Can you show me what I did do wrong here?
I would like to disable the input field when the Selection uses the second option (Treibstoffverbrauch in Liter).
$(document).ready(function() {
$('select[name="Kalkulationsart"]').on('change', function() {
var eins = $(this).val();
if (eins == "Kalkulation per Treibstoffverbrauch in Liter") {
$('#VerbrauchinL').attr('disabled', 'disabled');
} else {
$('#VerbrauchinL').removeAttr('disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="KATitle">Kalkulationsart</p>
<select name="Kalkulationsart" id="Kalkulationsart" size="1" type="text">
<option value="0">Kalkulation per Verbrauch/100km</option>
<option value="others">Kalkulation per Treibstoffverbrauch in Liter</option>
</select>
<p id="KMTitle" for="VerbrauchinL">Kraftstoffverbrauch in Liter/100km</p>
<input type="number" name="Verbrauch in L" id="VerbrauchinL" onkeyup="TKPJ()">
When you are using $(this).val() it returns the value attribute of the option element. So, you'd need to compare it with 0 or others.
See the snippet below:
$(document).ready(function() {
$('select[name="Kalkulationsart"]').on('change', function() {
var eins = $(this).val();
console.log(eins);
if (eins == "others") {
$('#VerbrauchinL').attr('disabled', 'disabled');
} else {
$('#VerbrauchinL').removeAttr('disabled');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="KATitle">Kalkulationsart</p>
<select name="Kalkulationsart" id="Kalkulationsart" size="1" type="text">
<option value="0">Kalkulation per Verbrauch/100km</option>
<option value="others">Kalkulation per Treibstoffverbrauch in Liter</option>
</select>
<p id="KMTitle" for="VerbrauchinL">Kraftstoffverbrauch in Liter/100km</p>
<input type="number" name="Verbrauch in L" id="VerbrauchinL" onkeyup="TKPJ()">
Your select value is different (others) than what you comparing against.
$(document).ready(function() {
$('#Kalkulationsart').on('change', function() {
$('#VerbrauchinL').prop('disabled', $(this).val() == "others");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="KATitle">Kalkulationsart</p>
<select name="Kalkulationsart" id="Kalkulationsart" size="1" type="text">
<option value="0">Kalkulation per Verbrauch/100km</option>
<option value="others">Kalkulation per Treibstoffverbrauch in Liter</option>
</select>
<p id="KMTitle" for="VerbrauchinL">Kraftstoffverbrauch in Liter/100km</p>
<input type="number" name="Verbrauch in L" id="VerbrauchinL" onkeyup="TKPJ()">
Your code seems fine, you need to check for the value in the checkbox (others) not the label used(Kalkulation per Treibstoffverbrauch in Liter).
I changed the way the attribute disabled is applied, we can toggle between true and false, to apply/unapply the attribute.
$(document).ready(function() {
$('select[name="Kalkulationsart"]').on('change', function() {
var eins = $(this).val();
if (eins === "others") {
$('#VerbrauchinL').attr('disabled', true);
} else {
$('#VerbrauchinL').attr('disabled', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="KATitle">Kalkulationsart</p>
<select name="Kalkulationsart" id="Kalkulationsart" size="1" type="text">
<option value="0">Kalkulation per Verbrauch/100km</option>
<option value="others">Kalkulation per Treibstoffverbrauch in Liter</option>
</select>
<p id="KMTitle" for="VerbrauchinL">Kraftstoffverbrauch in Liter/100km</p>
<input type="number" name="Verbrauch in L" id="VerbrauchinL" onkeyup="TKPJ()">
change "Kalkulation per Treibstoffverbrauch in Liter" to "others"
if you provide a value in the option val() gives the value
Related
I have 3 form select drop downs and have successfully retained the first select value after page loads, but am unable to get the second and third select values to be retained.
I'm using JavaScript and Jquery only for this.
I've tried over and over and finally got to bring my code here to see if someone more advanced can point out what I'm not doing correctly.
<form id="form">
<select id="select0" type="text">
<option type="text" value="" >make</option>
<option type="text" value="ford" >ford</option>
</select>
<select id="select1" type="text">
<option type="text" value="" >model</option>
<option type="text" value="mustang" >mustang</option>
</select>
<select id="select2" type="text">
<option type="text" value="">year</option>
<option type="text" value="1967" >1967</option>
</select>
<input type="submit" value="go">
</form>the
// JavaScript
var storeMake = sessionStorage.getItem("themake");
var storeModel = sessionStorage.getItem("themodel");
var storeYear = sessionStorage.getItem("theyear");
var make = $("#form #select0");
var model = $("#form #select1");
var year = $("#form #select2");
if(storeMake != undefined || storeMake != null){
make.find(":selected").removeAttr("selected");
make.find("option").each(function () {
if ($(this).val() == storeMake) {
$(this).attr("selected", true);
}
});
}
if(storeModel != undefined || storeModel != null){
model.find(":selected").removeAttr("selected");
model.find("option").each(function () {
if ($(this).val() == storeModel) {
$(this).attr("selected", true);
}
});
}
if(storeYear != undefined || storeYear != null){
year.find(":selected").removeAttr("selected");
year.find("option").each(function () {
if ($(this).val() == storeYear) {
$(this).attr("selected", true);
}
});
}
make.change(function () {
sessionStorage.setItem("themake", make.val());
});
model.change(function () {
sessionStorage.setItem("themodel", model.val());
});
year.change(function () {
sessionStorage.setItem("theyear", year.val());
});
The jQuery .val() method can be used to set the value of a select. This will replace each if statement.
Try the code below. The snippet will not work in Stack Overflow because sessionStorage is disabled.
var storeMake = sessionStorage.getItem("themake"),
storeModel = sessionStorage.getItem("themodel"),
storeYear = sessionStorage.getItem("theyear");
$("#select0").val(storeMake).change(function () {
sessionStorage.setItem("themake", $(this).val());
});
$("#select1").val(storeModel).change(function () {
sessionStorage.setItem("themodel", $(this).val());
});
$("#select2").val(storeYear).change(function () {
sessionStorage.setItem("theyear", $(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form">
<select id="select0">
<option value="">make</option>
<option value="ford">ford</option>
</select>
<select id="select1">
<option value="">model</option>
<option value="mustang">mustang</option>
</select>
<select id="select2">
<option value="">year</option>
<option value="1967">1967</option>
</select>
<input type="submit" value="go">
</form>
A few added notes:
The type attribute is not needed on select or option elements.
$("#form #select0") can updated to $("#select0") since the id will be unique. Same with select1 and select2.
I need the 'date' input to be disabled until the 'Deadline' option is selected. I have tried the following but it is not working. Any Suggestions?
CODE
<Select>
<option onselect="document.getElementById('deadline').disabled = false;">Deadline date</option>
<option>Monthly</option>
</Select>
<input id="deadline" type="date" disabled>
This should to it:
function validate() {
var dropdown = document.getElementById('dropdown');
var selectedOption = dropdown.options[dropdown.selectedIndex].value;
var input = document.getElementById('date');
if (selectedOption == "enabled") {
input.removeAttribute('disabled');
} else {
input.setAttribute('disabled', 'disabled');
}
}
<select id="dropdown" onchange="validate()">
<option value="disabled">Pick something</option>
<option value="enabled">Deadline date</option>
<option value="disabled">Monthly</option>
</select>
<input type="date" id="date" disabled="disabled">
You'll need to attach an event handler to the change event on your select, then check its value with this.value.
Finally, set the disabled attribute of your input to true or false accordingly.
document.getElementsByTagName('select')[0].onchange = function() {
document.getElementById('deadline').disabled = this.value != 'Deadline date';
}
<select>
<option>Deadline date</option>
<option>Monthly</option>
</select>
<input id="deadline" type="date" disabled>
At dropdown change event you can add or remove attribute like this with your match condition.
$("select").change(function() {
if ($(this).val() == 'Deadline date')
$('#inpTest').removeAttr('disabled');
else
$('#inpTest').attr("disabled", true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<Select>
<option>---select---</option>
<option>Deadline date</option>
<option>Monthly</option>
</Select>
<input type="date" disabled="disabled" id='inpTest'>
your issue is event on <option> is not trigger. please check below code.
<select id="selectedOption" onchange="myFunction()">
<option>select</option>
<option>Deadline date</option>
<option>Monthly</option>
</select>
<input id="deadline" type="date" disabled>
<script>
function myFunction() {
if (document.getElementById("selectedOption").value == "Deadline date") {
document.getElementById("deadline").disabled = false;
} else {
document.getElementById("deadline").disabled = true;
}
}
</script>
hope it help you.
I have a dropdownlist with two values and a text box. What I want is-
- If I select option 1, the text box should be like that atmost 10 characters can be entered
- If I select option 2, there should be no limit on maxlength for textbox
I am not sure how it could be done. May be by modifying the innerhtml but dont know how to proceed! Below is my .jsp file code for dropdown and textbox which as of now displays textbox of maxlength 10 which I need to make dynamic.
<select name="filetype" id="3">
<option value="null">--</option>
<option value="CTN" >CTN</option>
<option value="SLID" >SLID</option>
</select>
<h2>Enter the number<font color="red">*</font></h2>
<input type="text" name="customerID" maxlength=10 size="50" id="4"/>
<input type="submit" value="Submit Data" />
Since you tag this question with jquery here you are a simple example how to achieve that:
$('input[name="customerID"]').attr('maxlength')
This is a getter. To set a value you must to write second parameter. The whole example should be:
$(document).ready(function() {
$('select[name="filetype"]').on('change', function(e) {
var val = $(this).val();
if(val === "CTN") {
$('input[name="customerID"]').attr('maxlength', 10); //maxlength =10
} else if(val === "SLID") {
$('input[name="customerID"]').removeAttr('maxlength'); //no maxlength
}
});
});
Write an onchange event to select as below. Get the selected value and based on the condition add or remove maxlength attribute to/from textbox
$("select[name=filetype]").on('change', function() {
var val = $(this).find('option:selected').val();
$('input[name="customerID"]').val('');
if (val == "CTN")
$('input[name="customerID"]').attr('maxlength', 10);
else if (val == "SLID")
$('input[name="customerID"]').removeAttr('maxlength');
else
return false;
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="filetype" id="3">
<option value="null">--</option>
<option value="CTN">CTN</option>
<option value="SLID">SLID</option>
</select>
<h2>Enter the number<font color="red">*</font></h2>
<input type="text" name="customerID" maxlength="10" size="50" id="4" />
<input type="submit" value="Submit Data" />
Try this code below.
<script>
$(function () {
$('select').change(function () {
if ($(this).val() == "CTN") {
$('input:first').attr('maxlength', '10')
}
else if ($(this).val() == "SLID") {
$('input:first').attr('maxlength', '')
}
});
});
</script>
<select name="filetype" id="3">
<option value="null">--</option>
<option value="CTN">CTN</option>
<option value="SLID">SLID</option>
</select>
<h2>Enter the number<font color="red">*</font></h2>
<input type="text" name="customerID" maxlength="10" size="50" id="4" />
<input type="submit" value="Submit Data" />
with some JQuery something like this could works:
$("h2 input").attr({maxlength: 30});
I have a div that I need to hide when an option is selected in an option, below is my current html:
Type:<select name="Type" id="Type">
<option value="choice">Multiple choice</option>
<option value="image">Image/Video</option>
<option value="click">Click Image</option>
</select><br>
<div id="answers">
Correct Answer:<input type="text" name="answer"><br>
Wrong Answer 1:<input type="text" name="wrong1"><br>
Wrong Answer 2:<input type="text" name="wrong2"><br>
Wrong Answer 3:<input type="text" name="wrong3"><br>
</div>
So what I need is when the option with the value "click" is selected the div with the id "answers" is hidden, if either the other options are selected this div should be shown.
I am sure this can be dome with javas
Listen for the change event on select, take the value .val() and check if it's "click". If so, show() the #answers, otherwise hide() them.
var $answers = $("#answers");
$("#Type").on("change", function() {
if ($(this).val() === "click") {
$answers.show();
} else {
$answers.hide();
}
});
#answers {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Type:
<select name="Type" id="Type">
<option value="choice">Multiple choice</option>
<option value="image">Image/Video</option>
<option value="click">Click Image</option>
</select>
<br>
<div id="answers">
Correct Answer:
<input type="text" name="answer">
<br>Wrong Answer 1:
<input type="text" name="wrong1">
<br>Wrong Answer 2:
<input type="text" name="wrong2">
<br>Wrong Answer 3:
<input type="text" name="wrong3">
<br>
</div>
The no-jQuery version would be:
var answersElm = document.querySelector("#answers");
document.querySelector("#Type").addEventListener("change", function() {
if (this.value === "click") {
answersElm.style.display = "block";
} else {
answersElm.style.display = "none";
}
});
Try this
$(function(){
$("#Type").change(function(){
if($("#Type").val() == "click"){
$("#answers").css("display", "none");
}
else{
$("#answers").css("display", "block");
}
});
});
The name of my select option property is populated dynamically.
On submit my form I need to know if all my forams selects filled ...
How can I do this?
I would also like to take the mouse cursor to the select that was not filled.
<script type="text/javascript" src="js/jquery-1.6.4.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#teste").click(function () {
a = $("select[name='sel[]'] option:selected").length;
alert(a);
});
});
</script>
<title>
</title>
</head>
<form>
<select name="sel[0]">
<option value="teste"></option>
<option value="teste">1234</option>
<option value="teste">1234</option>
<option value="teste">1234</option>
</select>
<br />
<br />
<br />
<select name="sel[1]">
<option value="teste"></option>
<option value="teste">1234</option>
<option value="teste">1234</option>
<option value="teste">1234</option>
</select>
... Many others
<input type="button" id="teste" value="TESTAR">
</form>
</html>
Give your default option a value of -1 and provide a common class name for these options(Which is efficient that attribute starts with selector).
Try:
HTML:
<form>
<select name="sel[0]" class="sel">
<option value="-1"></option>
<option value="teste">1234</option>
<option value="teste">1234</option>
<option value="teste">1234</option>
</select>
<br />
<br />
<br />
<select name="sel[1]" class="sel">
<option value="-1"></option>
<option value="teste">1234</option>
<option value="teste">1234</option>
<option value="teste">1234</option>
</select>
<input type="button" id="teste" value="TESTAR">
JS:
$(document).ready(function () {
$("#teste").click(function () {
$(".sel").each(function () {
if (this.value == -1) { //If you are not providing value check for this.selectedIndex == 0
$(this).focus(); //set the focus
return false; //and break out of the loop
}
});
});
});
Fiddle
You have to set the variable like this var a;.
There is no element with select[name='sel[]'], you have a number inside of it, you could use name*= or name^= to say name contains or name starts with sel respectively
JSFIDDLE DEMO
$("#teste").click(function () {
var a = $("select[name^='sel'] option:selected");
var count = 0;
$.each(a, function () {
if ($(this).text().length) {
count++;
}
});
alert(count);
});
Select acts like the usual input when submitting form. So you can find selects with empty value:
$("select[value=]").first().focus()
Or iterate over all form elements, checking its value and type.
http://jsbin.com/UduNaGOh/1/edit?html,output
$(document).ready(function () {
$("#teste").click(function () {
var test = true;
$("#myform select").each(function(){
var select = $(this);
if(select.val() == 'none') {
select.addClass('fail');
select.focus();
test = false;
} else {
select.removeClass('fail');
}
});
if(test){
alert('well done');
$("#myform select").removeClass('fail');
// do your send stuff ...
}
});
});
I'm changing the class to style the empty selects.
So here is the css:
#myform > select.fail { background: red }
If you just need the number of empty selects you can use:
$('select:has(option[value="none"]:selected)').length