I am trying to change the second select dropdown based on whether the first selected option contains an (m) or (ft).
My form HTML search is as follows:
<form id="search" action="/property_search" method="get" class="clearfix">
<select name="sqsize" id="sqsize" class="sqsize">
<option value="">sq.ft/sq.m:</option>
<option value="233.52m">233.52m</option>
<option value="233.52m">233.52m</option>
<option value="467.04m">467.04m</option>
<option value="2,513ft">2,513ft</option>
<option value="2,513ft">2,513ft</option>
<option value="5,026ft">5,026ft</option>
</select>
<select name="sqsizemin" id="sqsizemin" class="sqsizemin">
<option value="">Size Min:</option>
</select>
<input type="submit" class="submit" value="Search">
</form>
My Jquery is as follows:
<script type="text/javascript">
$(function(){
$('#sqsize').change(function () {
var options = '';
if($(this).val() == 'm') {
options = '<option value=""></option>';
}
else if ($(this).val() == 'ft') {
options = '<option value="6">6</option>';
}
$('#sqsizemin').html(options);
});
$('#sqsize').trigger('change');
});
Try something like this(using indexOf):
$(function(){
$("#sqsize").change(function(){
var options = '';
if($(this).val().indexOf('m') > -1) {
options = '<option value="">mm</option>';
}
else if ($(this).val().indexOf('ft') > -1) {
options = '<option value="6">6</option>';
}
$('#sqsizemin').html(options);
});
});
Working fiddle: https://jsfiddle.net/robertrozas/b0w61quf/
Try like this:
https://jsfiddle.net/kc5qqtco/
$(function(){
$('#sqsize').change(function () {
if($(this).val().match(/m/g)) {
$('<option value=""></option>').appendTo('#sqsizemin');
}
else if ($(this).val().match(/ft/g)) {
$('<option value="6">6</option>').appendTo('#sqsizemin');
}
});
});
Using indexOf will get you a working solution.
See the jsfiddle
Related
I am doing dependent select box using jquery, ajax and php from same table of the database. Testpage
$(document).ready(function(){
$('.action').change(function(){
if($(this).val() != '')
{
var action = $(this).attr("id");
var query = $(this).val();
var result = '';
if(action == "name") {
result = 'category';
alert ('test1');
} else if (action == "category") {
result = 'material';
alert ('test2');
} else if (action == "material") {
result = 'source_light';
alert ('test3');
} else if (action == "source_light") {
result = 'color_temperature';
alert ('test4');
} else {
// result = 'color_temperature';
}
$.ajax({
url:"fetch_filter2.php",
method:"POST",
data:{action:action, query:query},
success:function(data){
$('#'+result).html(data);
}
})
}
});
});
I don't know why but it only works: test1 and test2. Test3 and 4 are not sent to php.
HTML file
Maybe something is wrong with select box? But these are just a select box with id's.
<select name="name" id="name" class="form-control action">
<option value="">Select name</option>
<?php echo $name; ?>
</select>
<br />
<select name="category" id="category" class="form-control action">
<option value="">Select category</option>
</select>
<br />
<select name="material" id="material" class="form-control">
<option value="">Select material</option>
</select>
<br />
<select name="source_light" id="source_light" class="form-control">
<option value="">Select source_light</option>
</select>
<br />
<select name="color_temperature" id="color_temperature" class="form-control">
<option value="">Select color_temperature</option>
</select>
What about something like this
$(document).ready(function(){
$('.action').change(function()
{
if($(this).val() != '')
{
var action = $(this).attr("id");
var query = $(this).val();
var result = '';
switch(action) {
case "name":
result = 'category';
alert ('test1');
break;
case "category":
result = 'material';
alert ('test2');
break;
case "material":
result = 'source_light';
alert ('test3');
break;
case "source_light":
result = 'color_temperature';
alert ('test4');
break;
default:
// result = 'color_temperature';
}
$.ajax({
url:"fetch_filter2.php",
method:"POST",
data:{action:action, query:query},
success:function(data){
$('#'+result).html(data);
}
})
}
});
});
Verify your drop down list under "action" class. As per your condition it won't trigger if your selected drop down item doesn't have value if($(this).val() != '').
Also make sure your expected drop down items have the value material for your test3 and source_light for your test4
Another suggestion: To load and trigger dynamic change event for drop down you can use below jQuery API:
$(document).on("change", ".action", function(){
//Your code here
});
If this doesn't solve your problem then please share your HTML or drop down data.
Updated answer: I can see there is no class "action" in your select/drop down items for material, source_light and color_temperature. That is why change actions of these drop down items are not catching in your $('.action').change(function() ... code block.
I'm trying to figure out how to have jQuery show/hide a dynamically generated textbox based on a pulldown menu selection. My JS skills are extremely limited. I have the following created in a while loop, depending on the number of people:
<select name="location[<?=$pid?>]" id="location[<?=$pid?>]">
<option value="<?=$loc_id?>" selected><?=$loc_name?> </option>
<option value="Other">Other</option>
<option value="Other">--------</option>
<? $query_loc = mysqli_query($link, "SELECT * FROM locations WHERE loc_app = 'Y' ORDER BY loc_name ASC");
while($fetch_loc = mysqli_fetch_array($query_loc)){
$loc_id = $fetch_loc['loc_id'];
$loc_name = $fetch_loc['loc_name'];
?>
<option value="<?=$loc_id?>"><?=$loc_name?></option>
<?
} ?>
</select>
<input name="location_other[<?=$pid?>]" type="text" id="location_other[<?=$pid?>]" style="display:none" />
jQuery function:
<script type='text/javascript'>
$(window).load(function(){
$('#location').change(function () {
if ($(this).val() == "Other") {
$('#location_other').show();
} else {
$('#location_other').hide();
}
});
});
</script>
I need to keep the id of the and the serialized with the $pid variable for later processing. Is there another way to call the jquery function on these?
The HTML output looks like this:
<select name="location[287]" id="location[287]">
<option value="1" selected>A</option>
<option value="Other">Other</option>
<option value="Other">--------</option>
<option value="12">B</option>
<option value="12">C</option>
</select>
<input name="location_other[287]" type="text" id="location_other[287]" style="display:none" />
Try
$(window).load(function(){
$('#location').change(function () {
$('input[id^=location_other]').hide();
if ($(this).val() == "Other") {
$('#location_other').show();
} else {
$('#location_other' + $(this).val()).hide();
}
});
});
Try this
<select name="location[287]" id="location[287]">
<option value="Other">Other</option>
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
<input name="location_other[287]" type="text" id="location_other" style="display:none" />
<script type='text/javascript'>
$(window).load(function() {
if ($('select[id^="location"]').val() == "Other") {
$('#location_other').show();
} else {
$('#location_other').hide();
}
$('select[id^="location"]').change(function() {
if ($(this).val() == "Other") {
$('#location_other').show();
} else {
$('#location_other').hide();
}
});
});
</script>
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.
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>