I am using a selectbox to display the list of "enterpirses" from the database. But the onchange event is not triggering. But when i manually once put the value of querystring then it starts working. I dont understand why it is happening.
I am new to javascript and php, kindly suggest me the solution to this.
<select id="enterprisebox" onchange="javascript:valueselect()" >
<option value="-">-</option>
<?php foreach($enterprise as $val) { ?>
<option value="<?php echo $val['customer_id'];?>"><?php echo $val['customer_name']?>
</option>
<? } ?>
</select>
and my javascript is--
function valueselect()
{
var i = document.getElementById('enterprisebox');
var p = i.options[i.selectedIndex].value;
//alert(p);
window.location.href = "channelinformation.html?selected="+p;
}
onchange="javascript:valueselect()" replace with onchange="valueselect(this.value);"
function valueselect(myval)
{
window.location.href = "channelinformation.html?selected="+myaval;
}
You Can Use Directly
onchange="window.location='channelinformation.html?selected='+myaval"
Make life easier and use jQuery:
$(document).ready(function () {
$('#enterprisebox').change(function () {
window.location.href = "channelinformation.html?selected="+ $(this).val();
});
});
Try this,
<select id="enterprisebox" onchange="javascript:valueselect(this)" >
<option value="-">-</option>
<?php foreach($enterprise as $val) { ?>
<option value="<?php echo $val['customer_id'];?>"><?php echo $val['customer_name']?>
</option>
<? } ?>
</select>
<script>
function valueselect(sel) {
var value = sel.options[sel.selectedIndex].value;
window.location.href = "channelinformation.html?selected="+value;
}
</script>
Related
I have an issue. I need to set the select value as text in the select box using jQuery but unable to do it.
<select name="countryCode" class="chosen-select" id="countryCode" required>
<?php foreach ($countrydata as $key => $value) {
if ($value['con_code']=='IN') {
$select='selected';
}else{
$select='';
}
?>
<option data-text="<?php echo $value['country']; ?>" value="<?php echo $value['dial_code']; ?>" <?php echo $select; ?>><?php echo $value['country']; ?></option>
<?php } ?>
</select>
My script part is given below.
$('#countryCode').find(':selected').html($('#countryCode').find(':selected').attr('value')); // already changed onload
$('#countryCode').on('change mouseleave', function () {
$('#countryCode option').each(function () {
$(this).html($(this).attr('data-text'));
});
$('#countryCode option:selected').html($('#countryCode option:selected').attr('value'));
$(this).blur();
});
$('#countryCode').on('focus', function () {
$('#countryCode option').each(function () {
$(this).html($(this).attr('data-text'));
});
});
What I need is that when the user selects any text, it's value will be shown to the user. In my code it's not happening like this.
1st: a little optimization of your JS :
$('#countryCode option:selected').html($(this).val());// already changed onload
Now, how to select an option using JS :
$(function() {
var $sel = $('.chosen-select');
$('#exists').click(function() {
$sel.val('option3');
console.log($sel.val());
});
$('#disabled').click(function() {
$sel.val('option2');
console.log($sel.val());
});
$('#noExist').click(function() {
$sel.val('option5');
console.log($sel.val());
});
$sel.on('change', function() {
console.log($sel.val());
});
});
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<button id="exists">Select 3rd option</button>
<button id="disabled">Select disabled option</button>
<button id="noExist">Select inexistant option</button>
<select class="chosen-select">
<option>option1</option>
<option disabled>option2</option>
<option>option3</option>
<option selected>option4</option>
</select>
<button onclick="console.clear();">X</button>
As you can see, only existant and not disabled options can be selected.
should be something like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$('#countryCode').on('change', function(){
var val = $(this).val();
$(this).find("option").each(function(){
$(this).text($(this).attr("data-text"));
});
$(this).find(":selected").text(val);
}).trigger("change");
});
</script>
<select id="countryCode" class="chosen-select">
<option data-text="A Text" value="A value">A Text</option>
<option data-text="B Text" value="B value">B Text</option>
<option data-text="C Text" value="C value" selected>C Text</option>
</select>
My Code:
select name="accttype">
<?php foreach($query as $row)
{
$act=$row->accounttype;
?>
<option value="<?php echo$act;?>"><?php echo$act;?></option>
<?php
}
?>
</select>
When I select the dropdown list I want to to redirect different functions to load different pages, like:
<option value="<?php echo site_url('Controller_n/function'><?php echo$act;?></option>
Is this possible?
Check this sample:
<select id="accttype" name="accttype">
<?php foreach($query as $row)
{
$act=$row->accounttype;
?>
<option value="<?php echo $act ?>"><?php echo $act ?></option>
<?php } ?>
</select>
<script>
$(function(){
// bind change event to select
$('#accttype').on('change', function () {
var url = $(this).val(); // get selected value
if (url) { // require a URL
window.location = url; // redirect
}
return false;
});
});
</script>
Give a id to your select like below
<select id="accttype">
<?php foreach($query as $row)
{
$act=$row->accounttype; ?>
<option value="<?php echo$act;?>"><?php echo$act;?></option>
<?php } ?>
</select>
// add jquery library if you not added already
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#accttype').change(function(){
window.location = $(this).val();
});
});
</script>
Hope it will help you.
I have one select box.on change event of it, I call confirm box. When I clicked on cancel button then remains changed value.
So I want to refresh only select box not whole page.
function statusChanged(obj,id){
$(obj).change(function() {
var answer = confirm ("Are you sure update Status?");
var status;
if(answer){
status=$(this).val();
//alert(status);
ajaxUpdate("service-providers.php", {action:"updatestatus",'status': status,'id':id}, function(data) {
if(data.type=="success") {
$("#notify").notification({caption:"Status Updated Successfully.", type:"information", sticky:false ,onhide:function(){
window.location="service-providers.php";
}
});
}
});
}
else{
// here i want to refresh select box
}
});
}
html code:
<select id="status1" name="status1" style="width:140px;" onChange="statusChanged(this,<?php echo $applicationid; ?>);">
<?php
if($status==3 || $status==4)
echo "<option value='4'>Submitted</option>";
else
echo "<option value='0'>Select</option>";
?>
<option value="2" <?php if($status==2) echo "selected='selected'"; ?> >Approved</option>
<option value="3" <?php if($status==3) echo "selected='selected'"; ?> >Rejected</option>
</select>
after page loads do:
$('select').each(function() {
$(this).attr('original_data', $(this).val());
});
and in your function do
$(this).val(this.attr('original_data'));
Checked. Works perfectly.
use this code under else it will just reset select box.
This will work
$('#SELECTBOX_ID').prop('selectedIndex',0);
see the for http://jsfiddle.net/TmJCE/10/ working demo.
also I implemented this code in my local I mainly made two changes I removed onchange from select and second is I did not use ajax coz you only want to work on click of cancel on confirm box.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery("#status1").change(function() {
var answer = confirm ("Are you sure update Status?");
var status;
if(answer){
status=$(this).val();
//I have did not call ajax
}
else{
jQuery('#status1').prop('selectedIndex',0);
}
});
});
</script>
<?php
$status = 0; // I temporary added t
?>
<select id="status1" name="status1" style="width:140px;" >
<?php
if($status==3 || $status==4)
echo "<option value='4'>Submitted</option>";
else
echo "<option value='0'>Select</option>";
?>
<option value="2" <?php if($status==2) echo "selected='selected'"; ?> >Approved</option>
<option value="3" <?php if($status==3) echo "selected='selected'"; ?> >Rejected</option>
</select>
I have two multi select boxes one for country list and one for state list
<select multiple="multiple" name="country[]" id="country" >
<option value="0">Select a Country</option>
<?php
foreach($country_list as $key=>$value){
echo "<option value=\"$key\"";
if($html['Country Name']==$key|| $row['Country Name']==$key){
echo ' selected="selected"';
}
echo ">$value</option>\n";
}?>
</select>
<select multiple="multiple" name="state[]" id="state">
<option value="">Select a State</option>
<?php
foreach($state_list as $key=>$value){
echo "<option value=\"$key\"";
if($html['state']==$key|| $row['state']==$key){
echo ' selected="selected"';
}
echo ">$value</option>\n";
}?>
</select>
I have this javascript which enables the state box when the country selected is USA.
window.onload = function() {
var selectCountry = document.getElementById('country');
selectCountry.onchange = function() {
document.getElementById('state').disabled = (selectCountry.value != 'USA')? true : false;
};
};
But, I want the state box to be disabled when other countries are selected along with USA in the first one.
Any suggestions please? Thanks
Demo: http://jsfiddle.net/eBTgb/
$("#country").on("click change", function(){
var option_usa = $("option[value=6]", this);
if (option_usa.is(":selected") && option_usa.siblings(":selected").length == 0) {
$("#state").removeAttr("disabled");
}
else {
$("#state").attr("disabled", "disabled");
}
});
I hope understand you correctly.
This can be done using JQuery.
$("#state").hide();
$("#country").change( function () {
var countryName = $("#country").find("option:selected").html();
if(countryName == 'USA'){
$("#state").show();
} else {
$("#state").hide();
}
});
Heres the link to the JSFIDDLE
`<select multiple="multiple" name="state[]" id="state">
<option value="">Select a State</option>
<?php
foreach($state_list as $key=>$value){
echo "<option value=\"$key\"";
if($html['state']==$key|| $row['state']==$key){
echo ' selected="selected"';
}
echo ">$value</option>\n";
}?>
</select> </p>`
<p>Select A Country
<select name="country" id="country">
<option value="0">Select a Country</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
</select> </p>
I have two select boxes 1)state[] 2) country . What is want is that "If the selected country is not USA, disable the multi-select box which consists all the USA states". Any help is appreciated
Add this Javascript to your code:
<script type="text/javascript">
<!--
window.onload = function() {
var selectCountry = document.getElementById('country');
selectCountry.onchange = function() {
document.getElementById('state').disabled = (selectCountry.value != 'USA')? true : false;
};
};
//-->
</script>
You could do the following if you have jQuery:
$('#country').change(function () {
if($('#country').val() != "USA") {
$('#state').attr('disabled', 'disabled');
}
else {
$('#state').removeAttr('disabled');
}
});
Or if you are using plain JavaScript:
var elem = document.getElementById("country");
elem.onchange = function () {
if(elem.options[e.selectedIndex].value != "USA") {
document.getElementById('state').disabled = "disabled";
}
else {
document.getElementById('state').removeAttribute("disabled");
}
}
This will disable the state combo box when the country combo box contains a value that is not "USA". When the selected country is "USA", it will remove the disabled attribute and make it usable again.
Hope this helps.