I have few dropdown with text fields.
I want to get all those values and display on a button.
The only condition is that button should be generate upto 5 time.
means -> if all the value of dropdown & text field are displaying on a button field so i want to generate another button and again i want to display my value on that by clicking on generate button.
Here is my code for reference.
$('#left_indicator').on('change', function(event) {
event.preventDefault();
/* Act on the event */
if ($(this).val()=='sma') {
$("#left_period_guider").html('(period,offset)');
}else if ($(this).val()=='ema') {
$("#left_period_guider").html('(close,period,offset)');
}
});
$('#right_indicator').on('change', function(event) {
event.preventDefault();
/* Act on the event */
if ($(this).val()=='sma') {
$("#right_period_guider").html('(period,offset)');
}else if ($(this).val()=='ema') {
$("#right_period_guider").html('(close,period,offset)');
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<select name="left_indicator" id="left_indicator">
<option>select</option>
<option value="sma">sma</option>
<option value="ema">ema</option>
</select>
<input type="text" name="left_PeriodAndOffset" id="left_PeriodAndOffset" placeholder="e.g (10.2)">
<div id="left_period_guider"></div>
<select name="comparator" id="comparator">
<option>select</option>
<option value="=">=</option>
<option value="<"><</option>
</select>
<select name="right_indicator" id="right_indicator">
<option>select</option>
<option value="sma">sma</option>
<option value="ema">ema</option>
</select>
<input type="text" name="right_PeriodAndOffset" id="right_PeriodAndOffset" placeholder="e.g (10.2)">
<div id="right_period_guider"></div>
<button type="button" id="generateButton" name="generateButton">click to generate button upto 5 with remove button</button>
<hr>
This button should generate by clicking above the button with the all field provided values.
example : sma(10.2) < ema(3.2)
<button type="button" id="generated1" name="generated1" value="">value will display here</button>
<button type="button" id="removethis" name="removethis">removethis</button>
</div>
</body>
</html>
As you can see here,
I'm just expecting the solution like all the dropdown and text field value should display on a button and generate the button so i can do the same strategies on another button upto 5 time.
so value should display on each generated button like. sma(10.2) < ema(3.2).
The following code would do the Job !
To perform better validation, I added a class name 'chk' to check all input fields.
This would be used to validate and generate the buttons' data.
Notice that I also added an empty value property to your select boxes, that's required for this code.
var data='';
var btnid=0;
function generateBtn(data){
btnid++;
var btns='<button type="button" id="generated'+btnid+'" name="generated'+btnid+'" value="" data-id="'+btnid+'">'+data+'</button><button type="button" id="removethis" class="removethis" data-id="'+btnid+'">removethis</button>';
$('#container').append(btns);
}
function check_inputs() {
var i=0;
//validation to check for empty inputs
//Same loop used to generate valid Button' Data
data='';
//we reset Data
$('.chk').each(function(){
if( $(this).val() === "" ){
$(this).css({'border-color':'red','border-size':'3px'});
} else{
$(this).css({'border-color':'green','border-size':'3px'});
if($(this).is('input')){
data+='('+$(this).val()+')';
} else {
data+=' '+$(this).val();
}
i++;
}
});
if(i==$('.chk').length){
//We gernerate the button
generateBtn(data);
} else{
return;
}
}
//Dynamically generated buttons are non-Dom, so we base selction on the parent container
//Data-id attribute is used to match targeted buttons
$("#container").on('click','.removethis', function() {
$('button[data-id='+$(this).data('id')+']').remove();
});
$("#generateButton").on('click', function() {
//Because we can remove buttons
//We count generated buttons before generating more than 5
if($("[id^=generated]").length<5){
check_inputs();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<select name="left_indicator" id="left_indicator" class="chk">
<option value="">select</option>
<option value="sma">sma</option>
<option value="ema">ema</option>
</select>
<input type="text" name="left_PeriodAndOffset" id="left_PeriodAndOffset" placeholder="e.g (10.2)" class="chk">
<div id="left_period_guider"></div>
<select name="comparator" id="comparator" class="chk">
<option value="">select</option>
<option value="=">=</option>
<option value="<"><</option>
</select>
<select name="right_indicator" id="right_indicator" class="chk">
<option value="">select</option>
<option value="sma">sma</option>
<option value="ema">ema</option>
</select>
<input type="text" name="right_PeriodAndOffset" id="right_PeriodAndOffset" placeholder="e.g (10.2)" class="chk">
<div id="right_period_guider"></div>
<button type="button" id="generateButton" name="generateButton">click to generate button upto 5 with remove button</button>
<hr>
</div>
I commented the code, but I suggest you revise your HTML code for the small (Non standard) mistakes. Just to pay attention to What's unique and what's not! I don't know if this is meant to be in <form> or not, repeating name property in buttons for example should be taken care of.
From your question, I'm not sure where to put the buttons, so I assumed to place it at the end of the document. To make it even simple I added a div at the end before the closing of the body.
<div id="displayButtons" style="display:block;">
Then you can add the following code in the script tag to achieve what you are looking for.
var buttonCount = 0;
$('#generateButton').click(function () {
if (buttonCount < 5) {
// Get all values
let left_indicator = $("#left_indicator").val();
let left_PeriodAndOffset = $("#left_PeriodAndOffset").val();
let comparator = $("#comparator").val();
let right_indicator = $("#right_indicator").val();
let right_PeriodAndOffset = $("#right_PeriodAndOffset").val();
// Define Button to display
let buttonText = left_indicator + " (" + left_PeriodAndOffset + ") " + comparator + " " + right_indicator + " (" + right_PeriodAndOffset + ")";
let button = '<button id="' + buttonCount + '">' + buttonText + '</button>';
// Display button inside Div
$("#displayButtons").append(button);
buttonCount++;
} else {
alert("Limit of 5 reached");
}
})
$("#removethis").click(function () {
if (buttonCount > 0) {
$("#displayButtons > button:last-child").remove();
buttonCount--;
}
else {
alert("No more buttons to remove.");
}
})
Another additional thing I would like to mention is ;
$('#left_indicator').on('change', function (event) {
event.preventDefault();
/* Act on the event */
if ($(this).val() == 'sma') {
$("#left_period_guider").text('(period,offset)'); <== I think you need to replace html with text to display what you require..
} else if ($(this).val() == 'ema') {
$("#left_period_guider").text('(close,period,offset)');
}
});
I hope that's what you were looking for...
Complete working Code:
var buttonCount = 0;
$('#generateButton').click(function () {
if (buttonCount < 5) {
// Get all values
let left_indicator = $("#left_indicator").val();
let left_PeriodAndOffset = $("#left_PeriodAndOffset").val();
let comparator = $("#comparator").val();
let right_indicator = $("#right_indicator").val();
let right_PeriodAndOffset = $("#right_PeriodAndOffset").val();
// Define Button to display
let buttonText = left_indicator + " (" + left_PeriodAndOffset + ") " + comparator + " " + right_indicator + " (" + right_PeriodAndOffset + ")";
let button = '<button id="' + buttonCount + '">' + buttonText + '</button>';
// Display button inside Div
$("#displayButtons").append(button);
buttonCount++;
} else {
alert("Limit of 5 reached");
}
})
$("#removethis").click(function () {
if (buttonCount > 0) {
$("#displayButtons > button:last-child").remove();
buttonCount--;
}
else {
alert("No more buttons to remove.");
}
})
$('#left_indicator').on('change', function(event) {
event.preventDefault();
/* Act on the event */
if ($(this).val()=='sma') {
$("#left_period_guider").text('(period,offset)');
}else if ($(this).val()=='ema') {
$("#left_period_guider").text('(close,period,offset)');
}
});
$('#right_indicator').on('change', function(event) {
event.preventDefault();
/* Act on the event */
if ($(this).val()=='sma') {
$("#right_period_guider").text('(period,offset)');
}else if ($(this).val()=='ema') {
$("#right_period_guider").text('(close,period,offset)');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="left_indicator" id="left_indicator">
<option>select</option>
<option value="sma">sma</option>
<option value="ema">ema</option>
</select>
<input type="text" name="left_PeriodAndOffset" id="left_PeriodAndOffset" placeholder="e.g (10.2)">
<div id="left_period_guider"></div>
<select name="comparator" id="comparator">
<option>select</option>
<option value="=">=</option>
<option value="<"><</option>
</select>
<select name="right_indicator" id="right_indicator">
<option>select</option>
<option value="sma">sma</option>
<option value="ema">ema</option>
</select>
<input type="text" name="right_PeriodAndOffset" id="right_PeriodAndOffset" placeholder="e.g (10.2)">
<div id="right_period_guider"></div>
<button type="button" id="generateButton" name="generateButton">click to generate button upto 5 with remove button</button>
<hr>
This button should generate by clicking above the button with the all field provided values.
example : sma(10.2) < ema(3.2)
<button type="button" id="generated1" name="generated1" value="">value will display here</button>
<button type="button" id="removethis" name="removethis">removethis</button>
</div>
<div id="displayButtons" style="display:block;">
Related
Hey so I am trying to to make both a dynamic and dependent dropdown form. Essentially I want the second form to be dependent of the first forms option, and when you add a new form field I want it to generate a new div form with a different ID and and the option in the first form removed from the second and then third form. In the case the user only selects on form and doesn't decide to add a second or a third, I would like to still submit a NULL value through the form's that aren't submitted. Js is not my strong suit so any help would be appreciated
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="nativelangdrop">
<option value="1">Fashion Designer</option>
<option value="2">Visual Artist</option>
<option value="3">Clothing reseller</option>
<option value="4">Musician</option>
<option value="5">Videographer</option>
<option value="6">Photographer</option>
<option value="7">Dancer</option>
<option value="8">Sculpter</option>
</select>
<span id="additional"></span>
<input id="addBtn" type="button" value=" + "/>
<hr />
<select id="genre">
<option value="1">Fashion Designer</option>
<option value="2">Visual Artist</option>
<option value="3">Clothing reseller</option>
<option value="4">Musician</option>
<option value="5">Videographer</option>
<option value="6">Photographer</option>
<option value="7">Dancer</option>
<option value="8">Sculpter</option>
</select>
<span id="additional2"></span>
<script>
var total;
// To auto limit based on the number of options
// total = $("#nativelangdrop").find("option").length - 1;
// Hard code a limit
total = 2;
//if total two hide plus button
$("#addBtn").on("click", function() {
var button = document.getElementById('addBtn');
var ctr = $("#additional").find(".extra").length;
var ctr2 = $("#additional2").find(".extra2").length;
if (ctr < total) {
var $ddl = $("#nativelangdrop").clone();
var $ddl2 = $("#genre").clone();
$ddl.attr("id", "ddl" + ctr);
// $ddl2.attr("id", "ddl2" + ctr);
$ddl.addClass("extra");
$ddl2.addClass("extra2");
$("#additional").append($ddl);
$("#additional2").append($ddl2);
}
else{
button.style.display = 'none';
}
});
//implement dependent genre form.
/*implement creating form after each iteration of ctr, var MyIDvariable = "MyID123";
var cartHTML = '<div id="'+MyIDvariable+'" class="soft_add_wrapper" onmouseover="setTimer();">';
... the rest of your code ... */
</script>
</body>
</html>```
This snippet displays two select elements, and a submit button. Initially, button is disabled.
Desired behavior: enable submit button when both elements have second option (complete) selected. If either one of the elements has first option (received) selected, disable the button.
Current behavior: button is enabled/disabled regardless of the first select element. Meaning: If I select option received in the first dropdown, and option complete in the second, button will be enabled, instead of disabled.
function enableButton() {
var all_statuses = document.body.querySelectorAll(".selected > .form-control");
var option_two = "complete";
for (var i = 0; i < all_statuses.length; i++) {
console.log(i + " This will work")
if (all_statuses[i].value == option_two) {
document.getElementById("btn_completed").disabled = false;
} else document.getElementById("btn_completed").disabled = true;
}
}
$(document).ready(enableButton);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="selected">
<select class="form-control" id="select_one" onchange="enableButton()">
<option value="received">received</option>
<option value="complete">complete</option>
</select>
<select class="form-control" id="select_two" onchange="enableButton()">
<option value="received">received</option>
<option value="complete">complete</option>
</select>
</div>
</form>
<button id="btn_completed">Completed</button>
So, the question is: How to enable the button if all select elements have option complete selected, or how to disable the button if at least one select element has option different than complete selected?
working code:
<!DOCTYPE html>
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<div class="selected">
<select class="form-control" id="select_one" onchange="enableButton()">
<option value="received">received</option>
<option value="complete">complete</option>
</select>
<select class="form-control" id="select_two" onchange="enableButton()">
<option value="received">received</option>
<option value="complete">complete</option>
</select>
</div>
</form>
<button id="btn_completed" disabled>Completed</button>
</body>
<script>
function enableButton() {
debugger;
var all_statuses = document.body.querySelectorAll(".selected > .form-control");
var option_two = "complete";
var isdisabled = false;
for (var i = 0; i < all_statuses.length; i++) {
console.log(i + " This will work")
if (all_statuses[i].value != option_two) {
isdisabled = true;
break;
}
}
if(isdisabled) {
document.getElementById("btn_completed").disabled = true;
}
else {
document.getElementById("btn_completed").disabled = false;
}
}
$(document).ready(enableButton);
</script>
</html>
I'm dynamically generating on button with values.
I have used array as name also inside the button field but unable to receive value of it.
I need to get each of button generated value on same page using php after submitting the form.
Here is my code.
$('#left_indicator').on('change', function(event) {
event.preventDefault();
/* Act on the event */
if ($(this).val()=='sma') {
$("#left_period_guider").html('(period,offset)');
}else if ($(this).val()=='ema') {
$("#left_period_guider").html('(close,period,offset)');
}
});
$('#right_indicator').on('change', function(event) {
event.preventDefault();
/* Act on the event */
if ($(this).val()=='sma') {
$("#right_period_guider").html('(period,offset)');
}else if ($(this).val()=='ema') {
$("#right_period_guider").html('(close,period,offset)');
}
});
/* -----------------------------------*/
var data='';
var btnid=0;
function generateBtn(data){
btnid++;
var btns='<button type="button" id="generated'+btnid+'" name="generated[]'+btnid+'" value="" data-id="'+btnid+'">'+data+'</button><button type="button" id="removethis" class="removethis" data-id="'+btnid+'">removethis</button>';
$('#container').append(btns);
}
function check_inputs() {
var i=0;
//validation to check for empty inputs
//Same loop used to generate valid Button' Data
data='';
//we reset Data
$('.chk').each(function(){
if( $(this).val() === "" ){
$(this).css({'border-color':'red','border-size':'3px'});
} else{
$(this).css({'border-color':'green','border-size':'3px'});
if($(this).is('input')){
data+='('+$(this).val()+')';
} else {
data+=' '+$(this).val();
}
i++;
}
});
if(i==$('.chk').length){
//We gernerate the button
generateBtn(data);
} else{
return;
}
}
//Dynamically generated buttons are non-Dom, so we base selction on the parent container
//Data-id attribute is used to match targeted buttons
$("#container").on('click','.removethis', function() {
$('button[data-id='+$(this).data('id')+']').remove();
});
$("#generateButton").on('click', function() {
//Because we can remove buttons
//We count generated buttons before generating more than 5
if($("[id^=generated]").length<10){
check_inputs();
}
});
<?php print_r($_POST); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Demo</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="">
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF']; ?>" method="POST" accept-charset="utf-8">
<div id="container">
<select name="left_indicator" id="left_indicator" class="chk">
<option value="">select</option>
<option value="sma">sma</option>
<option value="ema">ema</option>
</select>
<input type="text" name="left_PeriodAndOffset" id="left_PeriodAndOffset" placeholder="e.g (10.2)" class="chk">
<div id="left_period_guider"></div>
<select name="comparator" id="comparator" class="chk">
<option value="">select</option>
<option value="=">=</option>
<option value="<"><</option>
</select>
<select name="right_indicator" id="right_indicator" class="chk">
<option value="">select</option>
<option value="sma">sma</option>
<option value="ema">ema</option>
</select>
<input type="text" name="right_PeriodAndOffset" id="right_PeriodAndOffset" placeholder="e.g (10.2)" class="chk">
<div id="right_period_guider"></div>
<button type="button" id="generateButton" name="generateButton">click to generate button upto 5 with remove button</button>
<hr>
</div>
<button type="submit">click me</button>
</form>
</body>
</html>
As you can see,
I'm selecting value from dropdown and generating button field with value by clicking on generate button.
I just need generated button values on same page after submitting a form using php.
I have created a jquery method to load data when selects from the dropdown but the problem is that when i click and select and data changes then again when I select it is not working anymore
Please take a look at below snippet what i have done so far
$(document).ready(function() {
$('select[name="ht_opt"]').change(function() {
var tab = $('select[name="ht_opt"]').val();
var symbol = $('#symbol').val();
if ($(this).val()){
var dropdown = "<select name='ht_opt'><option>Balance Sheet</option><option>Profit and Loss Account</option><option>Cash Flow Statement</option></select>";
$('#ht_title').html(tab + " " + dropdown);
$('#ht_data').html(symbol);
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="inf_h2" id="ht_title">Balance Sheet
<select name="ht_opt">
<option>Balance Sheet</option>
<option>Profit and Loss Account</option>
<option>Cash Flow Statement</option>
</select>
</h2>
<input type="hidden" id="symbol" value="test Symbol" />
<div id="ht_data">
</div>
Demo fiddle
you could use on() function of jquery .because you are append the select tag on each time of the change function .
Just follow the #devnull69 comment below use the first option like this <option style='color:#ccc'>--select option--</option>
$(document).ready(function() {
$(document).on('change','select[name="ht_opt"]',function() {
var tab = $(this).val();
var symbol = $('#symbol').val();
if ($(this).val()) {
var dropdown = "<select name='ht_opt'><option style='color:#ccc'>--select option--</option><option>Balance Sheet</option><option>Profit and Loss Account</option><option>Cash Flow Statement</option></select>";
$('#ht_title').html(tab + " " + dropdown);
$('#ht_data').html(symbol);
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="inf_h2" id="ht_title">Balance Sheet
<select name="ht_opt">
<option style="color:#ccc">--select option--</option>
<option>Balance Sheet</option>
<option>Profit and Loss Account</option>
<option>Cash Flow Statement</option>
</select>
</h2>
<input type="hidden" id="symbol" value="test Symbol" />
<div id="ht_data">
</div>
Updated answer : its show the selected value without reproduce the select tag
$(document).ready(function() {
$(document).on('change', 'select[name="ht_opt"]', function() {
var tab = $(this).val();
var symbol = $('#symbol').val();
$('select[name="ht_opt"] option').removeClass('select')
$('select[name="ht_opt"] option:selected').addClass('select')
if (tab) {
$('#ht_title p').html(tab);
$('#ht_data').html(symbol);
}
})
})
.select{
background:#aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="inf_h2" id="ht_title">
<p>Balance Sheet</p>
<select name="ht_opt">
<option class="select">Balance Sheet</option>
<option>Profit and Loss Account</option>
<option>Cash Flow Statement</option>
</select>
</h2>
<input type="hidden" id="symbol" value="test Symbol" />
<div id="ht_data">
</div>
Try to use delegate.But As of jQuery 3.0, .delegate() has been deprecated. It was superseded by the .on() method
Snippet
$(document).ready(function() {
$('body').delegate('select[name="ht_opt"]','change', function(){
var tab = $('select[name="ht_opt"]').val();
var symbol = $('#symbol').val();
if ($(this).val()){
var dropdown = "<select name='ht_opt'><option>Balance Sheet</option><option>Profit and Loss Account</option><option>Cash Flow Statement</option></select>";
console.log(dropdown);
$('#ht_title').html(tab + " " + dropdown);
$('#ht_data').html(symbol);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2 class="inf_h2" id="ht_title">Balance Sheet
<select name="ht_opt">
<option>Balance Sheet</option>
<option>Profit and Loss Account</option>
<option>Cash Flow Statement</option>
</select>
</h2>
<input type="hidden" id="symbol" value="test Symbol" />
<div id="ht_data">
</div>
Here is the jsfiddle:https://jsfiddle.net/nc425yh1/9/
I am trying to make dropdown enabling using jquery and click search then that category page should open.But I am uable to do it.When I am selecting any one option from "SEARCH BY MAKE" dropdown the next "SEARCH BY MODEL" dropdown should enable and this is same for other dropdown.Means next dropdown is depanded on previous.When I select option from last dropdown the search button should display,which I am hiding when page loads.I have lot of categories in "SEARCH BY MAKE".I want all the pages should open dynamically after clicking on search button.According to this three dropdowns the category or product page should open.Please help me out.Please check bellow code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<title>Untitled Document</title>
</head>
<body>
<form>
<select id="Make" name="Make" class="criterion">
<option value="">SEARCH BY MAKE</option>
<option value="1">ACURA</option>
<option value="2">INTEGRA</option>
<option value="3">MDX</option>
</select>
</form><br />
<form>
<select id="Model" name="Model" class="criterion">
<option value="">SEARCH BY MODEL</option>
<option value="1">XYZ</option>
</select>
</form><br />
<form>
<select id="Year" name="Year" class="criterion">
<option value="">SEARCH BY YEAR</option>
<option value="1">ABC</option>
</form>
<br />
<input type="submit" value="Search" class="CatsearchButton" />
<script type="text/javascript">
$(document).ready(function() {
$('.CatsearchButton').hide();
var $selects = $('select.criterion');
$selects.not("#Year").on('change', function() {
$selects.each(function() {
var $this = $(this);
var disable = $this.val() == '';
$this.closest('form').nextAll().find('select').prop('disabled', disable);
if (disable) return false;
})
}).eq(0).trigger('change');
$selects.filter('#Year').change(function() {
$('.CatsearchButton').show();
});
});
</script>
</body>
</html>
You are using jQuery 1.7.2 so use .prop() instead of .attr() to set the disabled property.
You were also using .removeAttr('disabled', false); wrong - it should have been .attr('disabled','false'); or just .removeAttr('disabled'), but it's irrelevant once you switch to .prop()
$('.go').hide();
var jSelect2 = $(".model");
jSelect2.prop('disabled', true);
var jSelect3 = $(".year");
jSelect3.prop('disabled', true);
$('.make').change(function() {
jSelect2.prop('disabled', $(this).val() == ' '); // disable if val == ' '
jSelect2.val(' ').change(); // set to default and trigger change
});
jSelect2.change(function() {
jSelect3.prop('disabled', $(this).val() == ' '); // disable if val == ' '
jSelect3.val(' ').change(); // set to default and trigger change
});
jSelect3.change(function() {
$('.go').toggle($(this).val() !== ' '); // show if val !== ' '
});
Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method.
http://jsfiddle.net/CE5VN/1/
EDIT:
Since you're using jQuery just remove teh inline code and bind the click event inside document.ready function
$('.go').click(function(e) {
e.preventDefault();
location = 'www.lightsmax.com/category_s/' + myform.make.options[myform.make.selectedIndex].value + '.htm' + myform.model.options[myform.model.selectedIndex].value + '/' + myform.year.options[myform.year.selectedIndex].value;
});
http://jsfiddle.net/CE5VN/2/
It is because you have spaces in the values so it does not go into the if statements.
$(document).ready(function() {
$("select").each(function(i){
$(this).addClass("class-" + i);
});
$("select").each(function(i){
$(this)[0].disabled = true;
$(this).change(function(){
if($(this).val()!=""){
$(".class-" + (i + 1))[0].disabled = false;
}
});
});
$("select:eq(0)")[0].disabled = false;
});
I am adding fiddle here