I am trying to disable a <select> depending on if text input is empty or not.
What I need is on page load is for the select to be enabled because the text inputs are empty, but once a date is entered to disable the select.
This is what I've got so far:
<ul>
<li><label for="from_date">From Date:</label> <input type="text" name="from_date" id="from_date" value="<? print $_POST['from_date']; ?>" class="item_form_date" onchange="disableEl();" autocomplete="off" /></li>
<li><label for="to_date">To Date:</label> <input type="text" name="to_date" id="to_date" value="<? print $_POST['to_date']; ?>" class="item_form_date" onchange="disableEl();" autocomplete="off" /></li>
<li><label for="older_than">Or Older Than:</label>
<select name="older_than" id="older_than" class="input_tbl">
<option value="">Please Select</option>
<option value="1">1 Month</option>
<option value="2">2 Month</option>
<option value="3">3 Month</option>
<option value="4">4 Month</option>
<option value="5">5 Month</option>
<option value="6">6 Month</option>
</select>
</li>
<li><input type="submit" id="date_range" name="submit" class="" value="Apply" /></li>
</ul>
And the JavaScript:
$(document).ready(function() {
$(".item_form_date").change(function(e) {
if($(this).val() == '') {
$("#older_than").removeAttr('disabled');
} else {
$("#older_than").attr('disabled','disabled');
}
});
});
It will work better the way you want it with keyup:
$(document).ready(function() {
$(".item_form_date").on("keyup change", function() {
var checker = $.trim($(this).val()).length === 0;
$("#older_than").attr('disabled', !checker);
});
});
Oh, and if you want the select element disabled or not when you load the page, depending on whether the input's are populated or not, you can check that with your PHP:
<ul>
<li>
<label for="from_date">From Date:</label>
<input type="text" name="from_date" id="from_date" value="<? print $_POST['from_date']; ?>" class="item_form_date" autocomplete="off" />
</li>
<li>
<label for="to_date">To Date:</label>
<input type="text" name="to_date" id="to_date" value="<? print $_POST['to_date']; ?>" class="item_form_date" autocomplete="off" />
</li>
<li>
<label for="older_than">Or Older Than:</label>
<!-- this code -->
<?php $disable = (trim($_POST['from_date']) == "" && trim($_POST['to_date']) == "") ? "" : " disabled"; ?>
<select name="older_than" id="older_than" class="input_tbl"<?php echo $disable; ?>><!-- end of new feauture -->
<option value="">Please Select</option>
<option value="1">1 Month</option>
<option value="2">2 Month</option>
<option value="3">3 Month</option>
<option value="4">4 Month</option>
<option value="5">5 Month</option>
<option value="6">6 Month</option>
</select>
</li>
<li><input type="submit" id="date_range" name="submit" class="" value="Apply" /></li>
</ul>
If you want it to update as the user types, you need to use the input event.
http://jsfiddle.net/rfujjge6/1/
$(document).ready(function() {
$(".item_form_date").on('input',function(e) {
if($(this).val() == '') {
$("#older_than").removeAttr('disabled');
} else {
$("#older_than").attr('disabled','');
}
});
});
Related
I have some inputs. "input and select" data in the id value of "customer-1", I want to match and transfer with "class" value if click add button.
For example, id="customer-1" "input and select" data in, I want it imported into class="customer-1".
$('.customer-add').click(function(){
var customer_id = $('.customer-add').closest('.customer-bar').find("input").attr("id");
$("." + customer_id).val($("#" + customer_id).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="customer-bar">
<div id="customer-1">
<input type="text" id="customer-name" value="john" disabled />
<input type="text" id="customer-surnamename" value="doe" disabled />
<select name="" id="customer-day" disabled>
<option value="">14</option>
</select>
<select name="" id="customer-month" disabled>
<option value="">02</option>
</select>
<select name="" id="customer-year" disabled>
<option value="">1995</option>
</select>
</div>
<br />
<div class="customer-add" style="cursor:pointer;background:red;color:white;display:inline-block;">Click to add customer details</div>
<br /><br />
<div class="customer-1">
<input type="text" class="customer-name" value="" />
<input type="text" class="customer-surnamename" value="" />
<select name="" class="customer-day">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-month">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-year">
<option value=""></option>
<option value="">2012</option>
<option value="">2015</option>
</select>
</div>
</div>
<br><br><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="customer-bar">
<div id="customer-2">
<input type="text" id="customer-name" value="john" disabled />
<input type="text" id="customer-surnamename" value="doe" disabled />
<select name="" id="customer-day" disabled>
<option value="">14</option>
</select>
<select name="" id="customer-month" disabled>
<option value="">02</option>
</select>
<select name="" id="customer-year" disabled>
<option value="">1995</option>
</select>
</div>
<br />
<div class="customer-add" style="cursor:pointer;background:red;color:white;display:inline-block;">Click to add customer details</div>
<br /><br />
<div class="customer-2">
<input type="text" class="customer-name" value="" />
<input type="text" class="customer-surnamename" value="" />
<select name="" class="customer-day">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-month">
<option value=""></option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
<select name="" class="customer-year">
<option value=""></option>
<option value="">2012</option>
<option value="">2015</option>
</select>
</div>
</div>
I updated my code. I was able to transfer a single input, but I have to transfer them all
Change id to class
use closest and next
I assume you meant copy from customer1 to customer2
I cannot make a working snippet because you have the same IDs and no names, but the code will look this this
$(function() {
$(".customer-add").on("click",function() {
const $container = $(this).closest(".customer-bar")
const $nextContainer = $container.next(".customer-bar")
const $currentElements = $(":input",$container);
const $nextElements = $(":input",$nextContainer);
$currentElements.each(function(i) {
console.log(i,$(this).attr("class"))
$nextElements.eq(i).val($(this).val())
})
})
})
I updated my code. I was able to transfer a single input, but I have to transfer them all
I have an HTML code with 3 jQuery Scripts and they are not working together correctly can SomeOne Help me to solve this, please
I do to solve this problem as I don't have any experience in jQuery
and how can I fix this issue?
It works now but one drop-down menu at a time how can I make them work together
(function() {
var options = $("#DropDownList2").html();
$('#DropDownList2 :not([value^="Fac"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList2").html(options);
$('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove();
});
})();
(function() {
var options = $("#DropDownList3").html();
$('#DropDownList3 :not([value^="Dip"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList3").html(options);
$('#DropDownList3 :not([value^="' + text.substr(0, 3) + '"])').remove();
});
})();
(function() {
var options = $("#DropDownList4").html();
$('#DropDownList4 :not([value^="Dr"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList4").html(options);
$('#DropDownList4 :not([value^="' + text.substr(0, 3) + '"])').remove();
});
})();
<script src = "https://code.jquery.com/jquery-latest.min.js"></script>
Availabe Restaurants:
<br> Burgers:
<label><input type="radio" name="test" value="Garage" /> Burger Garage</label>
<label><input type="radio" name="test" value="Burger" /> Hardee's</label>
<label> <input type="radio" name="test" checked="checked" value="Factory" /> Burger Factory & More</label>
<br>
<select ID="DropDownList2" Height="18px" Width="187px">
<option Value="Factory_Style_1">Turbo Chicken</option>
<option Value="Factory_Style_2">Twin Turbo Chicken</option>
<option Value="Factory_Style_3">Garage Burger</option>
<option Value="Burger_Style_1">Chicken Fille</option>
<option Value="Burger_Style_2">Grilled Chicken Fillet</option>
<option Value="Burger_Style_3">Jalapeno Chicken</option>
<option Value="Garage_Style_1">Original Burger</option>
<option Value="Garage_Style_2">Twin Turbo Chicken</option>
<option Value="Garage_Style_3">Shuwa Burger</option>
</select>
<br> Desserts:
<label><input type="radio" name="test1" checked="checked" value="Dip" /> Dip N Dip</label>
<label><input type="radio" name="test1" value="Camel" /> Camel Cookies</label>
<label> <input type="radio" name="test1" value="Ravenna" /> Ravenna Kunafa</label>
<br>
<select ID="DropDownList3" Height="18px" Width="187px">
<option Value="Dip_Style_1">Brownies Crepe</option>
<option Value="Dip_Style_2">Fettuccine Crepe</option>
<option Value="Dip_Style_3">Cream Puff Pyramid</option>
<option Value="Camel_Style_1">Brownie Fondant</option>
<option Value="Camel_Style_2">Lotus Pancake</option>
<option Value="Camel_Style_3">Camel Lava</option>
<option Value="Ravenna_Style_1">Konafa With Chocolate</option>
<option Value="Ravenna_Style_2">Konafa Mabrooma With Cheese</option>
<option Value="Ravenna_Style_3">Konafa Mabrooma With Cream</option>
</select>
<br> Beverages:
<option>Dr.Shake</option>
<option>Juice Lab</option>
<option>Aseer Time</option>
<label><input type="radio" name="test2" checked="checked" value="Dr" />Dr.Shake</label>
<label><input type="radio" name="test2" value="Juice" /> Juice Lab</label>
<label> <input type="radio" name="test2" value="Aseer" /> Aseer Time</label>
<br>
<select ID="DropDownList4" Height="18px" Width="187px">
<option Value="Dr_Style_1">Pressure Milkshake</option>
<option Value="Dr_Style_2">Thermometer Milkshake</option>
<option Value="Dr_Style_3">Brain Recovery Milkshake</option>
<option Value="Juice_Style_1">G Lab</option>
<option Value="Juice_Style_2">Summer Vimto</option>
<option Value="Juice_Style_3">Summer Bubble Gum</option>
<option Value="Aseer_Style_1">Hormone Happiness</option>
<option Value="Aseer_Style_2">The King</option>
<option Value="Aseer_Style_3">Berry Smothey</option>
</select>
Your issue here is that your radio button change events are overlapping each other so they don't have scope they just override each other, see the changes below where the radio input are now wrapped in a container and each event is scoped separately.
it's worth noting that using scope around each section of dropdown and radio button set you could refactor your code into a single function can handle all events.
(function() {
var options = $("#DropDownList2").html();
$('#DropDownList2 :not([value^="Fac"])').remove();
$('.group1 input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList2").html(options);
$('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove();
});
})();
(function() {
var options = $("#DropDownList3").html();
$('#DropDownList3 :not([value^="Dip"])').remove();
$('.group2 input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList3").html(options);
$('#DropDownList3 :not([value^="' + text.substr(0, 3) + '"])').remove();
});
})();
(function() {
var options = $("#DropDownList4").html();
$('#DropDownList4 :not([value^="Dr"])').remove();
$('.group3 input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList4").html(options);
$('#DropDownList4 :not([value^="' + text.substr(0, 3) + '"])').remove();
});
})();
<script src = "https://code.jquery.com/jquery-latest.min.js"></script>
Availabe Restaurants:
<br> Burgers:
<div class="group1">
<label><input type="radio" name="test" value="Garage" /> Burger Garage</label>
<label><input type="radio" name="test" value="Burger" /> Hardee's</label>
<label> <input type="radio" name="test" checked="checked" value="Factory" /> Burger Factory & More</label>
</div>
<br>
<select ID="DropDownList2" Height="18px" Width="187px">
<option Value="Factory_Style_1">Turbo Chicken</option>
<option Value="Factory_Style_2">Twin Turbo Chicken</option>
<option Value="Factory_Style_3">Garage Burger</option>
<option Value="Burger_Style_1">Chicken Fille</option>
<option Value="Burger_Style_2">Grilled Chicken Fillet</option>
<option Value="Burger_Style_3">Jalapeno Chicken</option>
<option Value="Garage_Style_1">Original Burger</option>
<option Value="Garage_Style_2">Twin Turbo Chicken</option>
<option Value="Garage_Style_3">Shuwa Burger</option>
</select>
<br> Desserts:
<div class="group2">
<label><input type="radio" name="test1" checked="checked" value="Dip" /> Dip N Dip</label>
<label><input type="radio" name="test1" value="Camel" /> Camel Cookies</label>
<label> <input type="radio" name="test1" value="Ravenna" /> Ravenna Kunafa</label>
</div>
<br>
<select ID="DropDownList3" Height="18px" Width="187px">
<option Value="Dip_Style_1">Brownies Crepe</option>
<option Value="Dip_Style_2">Fettuccine Crepe</option>
<option Value="Dip_Style_3">Cream Puff Pyramid</option>
<option Value="Camel_Style_1">Brownie Fondant</option>
<option Value="Camel_Style_2">Lotus Pancake</option>
<option Value="Camel_Style_3">Camel Lava</option>
<option Value="Ravenna_Style_1">Konafa With Chocolate</option>
<option Value="Ravenna_Style_2">Konafa Mabrooma With Cheese</option>
<option Value="Ravenna_Style_3">Konafa Mabrooma With Cream</option>
</select>
<br> Beverages:
<option>Dr.Shake</option>
<option>Juice Lab</option>
<option>Aseer Time</option>
<div class="group3">
<label><input type="radio" name="test2" checked="checked" value="Dr" />Dr.Shake</label>
<label><input type="radio" name="test2" value="Juice" /> Juice Lab</label>
<label> <input type="radio" name="test2" value="Aseer" /> Aseer Time</label>
</div>
<br>
<select ID="DropDownList4" Height="18px" Width="187px">
<option Value="Dr_Style_1">Pressure Milkshake</option>
<option Value="Dr_Style_2">Thermometer Milkshake</option>
<option Value="Dr_Style_3">Brain Recovery Milkshake</option>
<option Value="Juice_Style_1">G Lab</option>
<option Value="Juice_Style_2">Summer Vimto</option>
<option Value="Juice_Style_3">Summer Bubble Gum</option>
<option Value="Aseer_Style_1">Hormone Happiness</option>
<option Value="Aseer_Style_2">The King</option>
<option Value="Aseer_Style_3">Berry Smothey</option>
</select>
I have input field with arrow (up, down). Next to it I have two buttons, + and -. When I click on the input field and then click the arrow the system gets the value from dropdown list. This is ok. But when I click the second one the system doesn't get the value from the dropdown list but he add 1 value. Where is the problem?
$(document).ready(function() {
$("#quantity_wanted").attr({
"min": parseInt($('#group_psoft :selected').val())
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="group_psoft" id="group_psoft" class="form-control attribute_select no-print">
<option value="35" selected="selected" title="35">35</option>
<option value="36" title="36">36</option>
<option value="37" title="37">37</option>
<option value="38" title="38">38</option>
<option value="39" title="39">39</option>
<option value="40" title="40">40</option>
</select>
<input name="qty" id="quantity_wanted" class="text" value="1" min="35" type="number">
Dropdownlist above product name: http://prestashop.suszek.info/pl/summer-dresses/printed-summer-dress
You need to add a event listener to select so that min is updated every time dropdown is selected.
<select name="group_psoft" id="group_psoft" class="form-control attribute_select no-print" onChange='group_psoft_onChange()'>
In javacript add the code to change value of min inside function group_psoft_onChange()
$(document).ready(function() {
function group_psoft_onChange(){
$("#quantity_wanted").attr({
"min": parseInt($('#group_psoft :selected').val())
});
}
});
As Rohit Agrawal Jquery solution works well, this is a JavaScript version of the answer because you tagged JavaScript.
Shorter version
function dropdownChanged(d){
document.getElementById("quantity_wanted").value = d.value;
}
<select name="group_psoft" id="group_psoft" class="form-control attribute_select no-print" onchange="dropdownChanged(this)">
<option value="35" selected="selected" title="35">35</option>
<option value="36" title="36">36</option>
<option value="37" title="37">37</option>
<option value="38" title="38">38</option>
<option value="39" title="39">39</option>
<option value="40" title="40">40</option>
</select>
<input name="qty" id="quantity_wanted" class="text" value="1" min="35" type="number">
Other option
var d = document.getElementById("group_psoft");
d.addEventListener("change",dropdownChanged);
function dropdownChanged(){
var dropdownValue = d.options[d.selectedIndex].value;
document.getElementById("quantity_wanted").value = dropdownValue;
}
<select name="group_psoft" id="group_psoft" class="form-control attribute_select no-print">
<option value="35" selected="selected" title="35">35</option>
<option value="36" title="36">36</option>
<option value="37" title="37">37</option>
<option value="38" title="38">38</option>
<option value="39" title="39">39</option>
<option value="40" title="40">40</option>
</select>
<input name="qty" id="quantity_wanted" class="text" value="1" min="35" type="number">
I have been making a product configurator for the past month and received some awesome help from Stackoverflow. I come back asking for some help. Before proceeding, I have Google'd for answers, looked on Stackoverflow, and tried messing around with the code myself. I am new to coding as well so I am aware that the code is not perfect by any means.
Anyways, my code works by taking an option from the dropdown or checkbox and places its value in an input textbox at the end. What I am trying to achieve is that in the "Options" section (which are all checkboxes), I would like the value to appear in the input textbox named "completeText" when checked and disappear when unchecked. I found some code that worked great, but if I made all of the dropdown selections before "Options" and then checked a checkbox, it would clear out the entire box except for that checkbox's value. I need the checkbox value to append to the other dropdown selections. The part number at the end should be all of the values appended to each other, separated by an "-". Again, I have tried a ton of different ways to achieve this and so far have been unsuccessful. Any direction or help would be marvelous! Thank you so much and my HTML/JS is below for reference if someone wants to help (WARNING LONG CODE):
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://www.flexotherm.net/templates/yoo_corona/js/samplepicture.js"> </script>
<script src="http://www.flexotherm.net/templates/yoo_corona/js/options.js"> </script>
<script src="http://www.flexotherm.net/templates/yoo_corona/js/sampleso.js"></script>
</head>
<br>
<div style="width: 900px; float: left; margin-left: 30px;"><h1><font face="bebas neue" size="15">Design your own</font></h1>
<div style="width: 520px; float: left; padding-right:30px;">
<h4 style="line-height:24px;"><font face="bebas neue" size="6">Heated Sample Lines</font></h4><br><br><br><br><br><br>
<img id="image" border="5" src='http://www.flexotherm.net/images/START2' height="253px" width="450px">
</div>
<div class="choices" style="width: 300px; float: right; padding: 20px; background-color: #eee;">
<div>
<body>
<form id="example" name="example">
<b>Series Type</b><br>
<select id="series" onchange="updateText('series')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="HSL">Heated Sample Lines</option>
</select>
<br>
<br>
<b>Tube Material</b><br>
<select id="tube" onchange="updateText('tube')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="E">PTFE Teflon®</option>
<option value="P">PFA Teflon®</option>
<option value="F">FEP</option>
<option value="PE">PEEK</option>
<option value="N11">Nylon 11</option>
<option value="S">316 Stainless Steel</option>
<option value="EPS">Electropolished Stainless Steel</option>
<option value="CS">Corrugated Stainless Steel (Overbraided)</option>
<option value="ESSBT">PTFE Stainless Steel Overbraided Teflon®</option>
<option value="PSSBT">PFA Stainless Steel Overbraided Teflon®</option>
</select>
<br>
<br>
<b>Tube Size</b><br>
<select id="size" onchange="updateText('size')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="4/2">1/4” O.D. x 1/8” I.D. (0.635cm x 0.318cm)</option>
<option value="4/3">1/4” O.D. x 3/16” I.D. (0.635cm x 0.476cm)</option>
<option value="6/4">3/8” O.D. x 1/4” I.D. (0.953cm x 0.635cm)</option>
<option value="6/5">3/8” O.D. x 5/16” I.D. (0.953cm x 0.794cm)</option>
<option value="/8">PTFE</option>
<option value="4">1/4” O.D. x 0.035” Wall (0.635cm x 0.089cm)</option>
<option value="5">5/16” O.D. x 0.035” Wall (0.7938cm x 0.089cm)</option>
<option value="6">3/8” O.D. x 0.035” Wall (0.953cm x 0.089cm)</option>
<option value="8">1/2” O.D. x 0.035” Wall (1.27cm x 0.089cm)</option>
<option value="4C">1/4" O.D.</option>
<option value="6C">3/8" O.D.</option>
<option value="8C">1/2” O.D.</option>
</select>
<br>
<br>
<b>Voltage</b><br>
<select id="voltage" onchange="updateText('voltage')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="A">110 / 115 / 120 VAC</option>
<option value="B">208 VAC</option>
<option value="C">220 / 230 / 240 VAC</option>
<option value="D">440 / 450 / 460 VAC</option>
<option value="E">12 VDC</option>
<option value="F">24 VDC</option>
</select>
<br>
<br>
<b>Power Connector</b><br>
<select id="connector" onchange="updateText('connector')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="A">7 Pin AMP™ (Power Pins 3-5)</option>
<option value="T">Mini Twist Lock (NEMA ML2-15)</option>
<option value="T2">Mini Twist Lock (NEMA ML3-15)</option>
<option value="W">Straight-Blade (NEMA 5-15)</option>
<option value="M">Molex 3 - Pin</option>
<option value="L">LAPP</option>
<option value="N">None - Flying Leads</option>
<option value="S">Special / Custom</option>
</select>
<br>
<br>
<b>Sensor Connector</b><br>
<select id="senseconnect" onchange="updateText('senseconnect')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="M">Miniture</option>
<option value="S">Standard</option>
<option value="F">Flying Leads</option>
</select>
<br>
<br>
<b>Sensor Placement</b><br>
<font size="1">After selection, specify length from lead or non-lead side</font>
<select id="placement" onchange="updateText('placement')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="N">T/C Non-Lead Side</option>
<option value="L">Lead Side</option>
</select> <select id="length" onchange="updateText('length')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="1">1 ft.</option>
<option value="2">2 ft.</option>
<option value="3">3 ft.</option>
<option value="4">4 ft.</option>
<option value="5">5 ft.</option>
<option value="6">6 ft.</option>
<option value="7">7 ft.</option>
<option value="8">8 ft.</option>
<option value="9">9 ft.</option>
<option value="10">10 ft.</option> </select>
<br>
<br>
<b>Operating Temperature</b><br>
<input type="text" id="temperature" onchange="updateText('temperature')" /> <font size="2"> °F</font>
<script>
document.getElementById("temperature").onkeyup=function(){
var input=parseInt(this.value);
if(input<1 || input>9999)
alert("Value should be between 1°F - 9999°F");
return;
}
</script> <br><br>
<b>Exterior Sleeve</b><br>
<select id="sleeve" onchange="updateText('sleeve')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="M">Black Nylon Mesh</option>
<option value="CT">Adaptaflex Corrugated Tubing</option>
<option value="A">Aluminized Gray Silicone</option>
<option value="S">Aluminized Rust-Red Silicone</option>
<option value="S">Aluminized Black Silicone</option>
<option value="CB">Cool Blue Aluminized Silicone (Premium)</option>
<option value="AC">Armored Cover</option>
<option value="TF">Tigerflex™</option>
<option value="GF">Gatorflex™</option>
<option value="BV">Blue Vinyl</option>
</select>
<br>
<br>
<b>Port Size</b><br>
<select id="port" onchange="updateText('port')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="2S">1/8"</option>
<option value="4S">1/4"</option>
<option value="6S">3/8"</option>
<option value="8S">1/2"</option>
</select>
<br>
<br>
<b>Port Type</b><br>
<font size="1">Please specify type if "Custom" is selected</font><br>
<select id="porttype" onchange="updateText('porttype')">
<option value="" disabled="disabled" selected="selected">Select One</option>
<option value="TS">Tube Stubs</option>
<option value="JIC">JIC Swivels</option>
<option value="SF">Sanitary Flange</option>
<option value="C">Custom</option>
</select> <input type="text" id="custom" onchange="updateText('custom')" />
<br>
<br>
<b>Line Length</b><br>
<input type="text" id="line" onchange="updateText('line')" /><font size="2"> ft</font>
<script>
document.getElementById("line").onkeyup=function(){
var input=parseInt(this.value);
if(input<1 || input>9999)
alert("Value should be between 1 ft. - 9999 ft.");
return;
}
</script>
<br>
<br>
<b>Lead Length</b><br>
<input type="text" id="lead" onchange="updateText('lead')" /><font size="2"> ft</font>
<script>
document.getElementById("lead").onkeyup=function(){
var input=parseInt(this.value);
if(input<1 || input>9999)
alert("Value should be between 1 ft. - 9999 ft.");
return;
}
</script>
<br>
<br>
<b>Options</b>
<br>
<font size="1"> Please select all options wanted</font>
<br>
<div id="inputs">
<input type="checkbox" id="prof" class="choice" value="PR" onchange="updateText('prof')"> Profiled w/ Data</input><br>
<input type="checkbox" id="slaveboth" class="choice" value="SL" onchange="updateText('slaveboth')"> Slaved Both Ends<br>
<input type="checkbox" id="slavelead" class="choice" value="SLL" onchange="updateText('slavelead')"> Slaved Lead End<br>
<input type="checkbox" id="slavenl" class="choice" value="SLNL" onchange="updateText('slavenl')"> Slaved Non-Lead End<br>
<input type="checkbox" id="silco" class="choice" value="SN" onchange="updateText('silco')"> SilcoNert® Coating<br>
<input type="checkbox" id="dur" class="choice" value="DR" onchange="updateText('dur')"> Dursan Coating<br>
<input type="checkbox" id="ss" class="choice" value="SR" onchange="updateText('ss')"> Stainless Steel 1/16" Braided Strain Relief<br>
<input type="checkbox" id="thermo" class="choice" value="TP" onchange="updateText('thermo')"> Thermocouple Pass Through* </div><input type="text" id="thermoquant" onchange="updateText('thermoquant')" size="4" /><br>
<input type="checkbox" id="pass" class="choice" value="PP" onchange="updateText('pass')"> Power Pass Through* <br></div>
<input type="text" id="quantity" onchange="updateText('quantity')" size="4" />
<br>
<font size="1">*Specify quantity</font><br>
<br>
<hr>
<center><input type="hidden" value="" maxlength="1" size="1" id="seriesText" />
<input type="hidden" value="" maxlength="1" size="1" id="tubeText" />
<input type="hidden" value="" maxlength="1" size="1" id="sizeText" />
<input type="hidden" value="" maxlength="1" size="1" id="voltageText" />
<input type="hidden" value="" maxlength="1" size="1" id="connectorText" />
<input type="hidden" value="" maxlength="1" size="1" id="sensorText" />
<input type="hidden" value="" maxlength="1" size="1" id="placementText" />
<input type="hidden" value="" maxlength="1" size="1" id="temperatureText" />
<input type="hidden" value="" maxlength="1" size="1" id="sleeveText" />
<input type="hidden" value="" maxlength="1" size="1" id="portText" />
<input type="hidden" value="" maxlength="1" size="1" id="porttypeText" />
<input type="hidden" value="" maxlength="1" size="1" id="customText" />
<input type="hidden" value="" maxlength="1" size="1" id="lineText" />
<input type="hidden" value="" maxlength="1" size="1" id="leadText" />
<input type="hidden" value="" maxlength="1" size="1" id="thermoText" />
<input type="hidden" value="" maxlength="1" size="1" id="thermoquantText" />
<input type="hidden" value="" maxlength="1" size="1" id="passText" />
<input type="hidden" value="" maxlength="1" size="1" id="quantityText" />
<input type="text" value="" maxlength="1" size="1" id="completeText" style="font-size:7pt; height:15px; width: 298px; border:1px solid #CC0000;" /> <br> {qluetip title=[What Next?]}<div style="width: 230px; float: left;">
<div style="width: 150px; float: left; padding-top: 5px;">
<font size="5"><font face="bebas neue"><span style="color: #d80101;">Send Us</span><span style="color: #d80101;"> an</span> email</font></font></b><br><p class="tool"> <font size="1.5"> Copy your part number and click the "Email Us" button below and we will get in contact with you:</font></p>
<a class="readmore" href="mailto:mike.seacord#neptechinc.com;rick#neptechinc.com;brian.church#neptechinc.com?Subject= (CONFIG)%20Temperature%20Controller%20Part Number"><span class="readmore-1"> <span class="readmore-2">Email Us</span></span></a> </center>
</br>
<hr>
<font face="bebas neue" size="5"><span style="color: #d80101;">Give us</span><span style="color: #d80101;"> a</span> Call</font><br><p class="tool"> <font size="1.5"> Provide your custom part number and let our dedicated sales staff help you directly by calling:</br></p><font size="2"> <b>810.225.2222</b> </font> </font>
{/qluetip}
</form>
<script type="text/javascript">
function updateText(type) {
var id = type+'Text';
var endValue;
var inputValue = document.getElementById(type).value;
document.getElementById(id).value = inputValue;
endValue = document.getElementById("seriesText").value;
if(document.getElementById("tubeText").value != ""){
endValue = endValue+"-"+document.getElementById("tubeText").value;
}
if(document.getElementById("sizeText").value != ""){
endValue = endValue+"-"+document.getElementById("sizeText").value;
}
if(document.getElementById("voltageText").value != ""){
endValue = endValue+"-"+document.getElementById("voltageText").value;
}
if(document.getElementById("connectorText").value != ""){
endValue = endValue+"-"+document.getElementById("connectorText").value;
}
if(document.getElementById("sensorText").value != ""){
endValue = endValue+"-"+document.getElementById("sensorText").value;
}
if(document.getElementById("placementText").value != ""){
endValue = endValue+"-"+document.getElementById("placementText").value;
}
if(document.getElementById("temperatureText").value != ""){
endValue = endValue+"-"+document.getElementById("temperatureText").value;
}
if(document.getElementById("sleeveText").value != ""){
endValue = endValue+"-"+document.getElementById("sleeveText").value;
}
if(document.getElementById("portText").value != ""){
endValue = endValue+"-"+document.getElementById("portText").value;
}
if(document.getElementById("porttypeText").value != ""){
endValue = endValue+"-"+document.getElementById("porttypeText").value;
}
if(document.getElementById("customText").value != ""){
endValue = endValue+"-"+document.getElementById("customText").value;
}
if(document.getElementById("lineText").value != ""){
endValue = endValue+"-"+document.getElementById("lineText").value;
}
if(document.getElementById("leadText").value != ""){
endValue = endValue+"-"+document.getElementById("leadText").value;
}
if(document.getElementById("thermoquantText").value != ""){
endValue = endValue+"-"+document.getElementById("thermoquantText").value;
}
if(document.getElementById("quantityText").value != ""){
endValue = endValue+"-"+document.getElementById("quantityText").value;
}
document.getElementById("completeText").value = endValue;
}
</script>
</body>
</div>
</div>
</div>
</div>
I have this code:
<div>
<label id="hd" for="escol"">text</label> <select name="escol"
class="drop">
<option value="1" class="dr">show</option>
<option value="2" class="dr">hide</option>
</select>
</div>
<div>
<label id ="showHide" for="type"">Tipo de formação</label> <select name="area"
class="drop1">
<option value="1" class="dr">Universidade</option>
<option value="2" class="dr">Politécnico</option>
</select>
</div>
and
<script>
$("#hd").click(function () {
$(".drop1").slideToggle("slow");
});
</script>
How to show the second select if the first select have the first option selected, and hide the second dropdown if the second option of the first dropdown is selected?
First, you can restructure the HTML a wee bit by putting the <select> elements inside the labels. That way you don't have to use the for label attribute.
<div>
<label id="hd">
text
<select name="escol" class="drop">
<option value="1" class="dr">show</option>
<option value="2" class="dr">hide</option>
</select>
</label>
</div>
<div>
<label id="showHide">
Tipo de formação
<select name="area" class="drop1">
<option value="1" class="dr">Universidade</option>
<option value="2" class="dr">Politécnico</option>
</select>
</label>
</div>
Then, use the .change() event:
$('#hd > select').change(function ()
{
$('#showHide > select').toggle(this.selectedIndex === 0);
});
Demo: http://jsfiddle.net/mattball/EaQea/
You can add an on change event handler to the first drop down like this:
$("#escol").change(function(){
if($(this).val() == "1"){
$("#area").show();
}else{
$("#area").hide();
}
});
And change your HTML to this:
<div>
<label id="hd" for="escol">text</label> <select id="escol"
class="drop">
<option value="1" class="dr">show</option>
<option value="2" class="dr">hide</option>
</select>
</div>
<div>
<label id ="showHide" for="type">Tipo de formação</label> <select id="area"
class="drop1">
<option value="1" class="dr">Universidade</option>
<option value="2" class="dr">Politécnico</option>
</select>
</div>
Notice that you have some extra double quotes in your html that I removed and I changed name="area" to id="area" and name="escol" to id="escol".
$("select[name='escol']").change(function () {
$("#showHide").parent()['slide'+((this.value==2)?'Up':'Down')]("slow");
});