i want when choosed A option , input value will be 10,20,30 ...
for B option, input value 5,10,15,20
that code didnt work what is wrong
<select onchange="changeValue(this);" id="size" name="attribute_size">
<option selected="selected" value="">choose option…</option>
<option class="active" value="A">A</option>
<option class="active" value="B">B</option>
</select>
<input min="1" step="1" id="quantity" value="1" title="quantity" class="input-text qty text" size="4" type="number">
function changeValue() {
var option2 = document.getElementById('size').options[document.getElementById('size').selectedIndex].id;
if (option2 == "A") {
document.getElementById('quantity').setAttribute('step', "10");
}
else (option2 == "B")
{
document.getElementById('quantity').setAttribute('step', "5");
}
}
You have a missed if after else which was causing console error,
else if (option2 == "B")
Change the min attribute to '0',
<input min="0" step="1" id="quantity" value="0" title="quantity" class="input-text qty text" size="4" type="number">
And Javascript,
function changeValue(that) {
var option2 =that.options[that.selectedIndex].text;
var inputElm = document.getElementById('quantity');
inputElm.value = 0;
if (option2 == 'A') {
inputElm.setAttribute('step', '10');
} else if (option2 == 'B') {
inputElm.setAttribute('step', '5');
}
}
DEMO
Also, you can use the this onject passed in the parameter when operating on the current object.
You have several errors in your code. (For example typo in else if, wrong method of getting select option value and not using your argument in changeValue method)
I corrected them and put them together to working example:
<select onchange="changeValue(this);" id="size" name="attribute_size">
<option selected="selected" value="">choose option...</option>
<option class="active" value="A">A</option>
<option class="active" value="B">B</option>
</select>
<input min="1" step="1" id="quantity" value="1" title="quantity" class="input-text qty text" size="4" type="number">
<script>
function changeValue(elem) {
var input = document.getElementById('quantity');
if (elem.value == "A") {
input.setAttribute('step', "10");
}else if (elem.value == "B") {
input.setAttribute('step', "5");
}
}
</script>
Related
I want to get output based on text input and select input, the value of strength will be determined by nvalue and type(select)
my current code:
function findStrength() {
var n = document.getElementById('nvalue');
if ($(".select-box option[value='clay']").attr('selected') && $(n.value == '30')) {
document.getElementById('soil_strength').value = 'HARD';
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="nvalue" name="nvalue" min="0" max="50" required />
<select class="select-box" name="soil_type" id="soil_type2">
<option value="" disabled selected hidden>Type</option>
<option value="clay">CLAY</option>
<option value="silt">SILT</option>
<option value="sand">SAND</option>
<option value="gravel">GRAVEL</option>
</select>
<input type="text" id="soil_strength" name="soil_strength" placeholder="Strength" />
You should not mix jQuery and DOM access. Here I delegate from form and any change to the fields will update the strength
Also you had typos in the max and required attributes
Lastly why not use a number field?
const soilForm = document.getElementById('soilForm');
soilForm.addEventListener("input", function() {
const n = +this.nvalue.value; // cast to number
const soil = this.soil_type.value;
if (soil === "clay" && n === 30) {
this.soil_strength.value = 'HARD';
}
else this.soil_strength.value = "";
})
<form id="soilForm">
<input type="number" id="nvalue" name="nvalue" min="0" max="50" required />
<select class="select-box" name="soil_type" id="soil_type2">
<option value="" disabled selected hidden>Type</option>
<option value="clay">CLAY</option>
<option value="silt">SILT</option>
<option value="sand">SAND</option>
<option value="gravel">GRAVEL</option>
</select>
<input type="text" id="soil_strength" name="soil_strength" placeholder="Strength" />
</form>
jQuery version
$('#soilForm').on('input', function() {
const n = +$('#nvalue').val(); // cast to number
const soil = $('#soil_type2').val(); // why name="soil_type" and id="soil_type2" ?
let strength = "";
if (soil === 'clay' && n === 30) {
strength = 'HARD';
}
$('#soil_strength').val(strength);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="soilForm">
<input type="number" id="nvalue" name="nvalue" min="0" max="50" required />
<select class="select-box" name="soil_type" id="soil_type2">
<option value="" disabled selected hidden>Type</option>
<option value="clay">CLAY</option>
<option value="silt">SILT</option>
<option value="sand">SAND</option>
<option value="gravel">GRAVEL</option>
</select>
<input type="text" id="soil_strength" name="soil_strength" placeholder="Strength" />
</form>
You can use jQuery more effectively.
<script>
$(document).ready(function() {
$('#nvalue, #soil_type2').on('change',function(){
let type = $('#soil_type2').val();
let nvalue = $('#nvalue').val();
if (type == 'clay' && nvalue == '30') {
$('#soil_strength').val('HARD');
} else {
$('#soil_strength').val('EASY');
}
});
});
</script>
I'm trying to reset the value of closest select option.
$(document).ready(function () {
$('.limitation_points').hide();
$('.field .limitSelected').each(function () {
$(this).change(function () {
var selected = $(this).val();
if (selected == '1') {
$(this).closest('.field').find('.limitation_points').fadeIn(200);
} else {
$(this).closest('.field').find('.limitation_points').fadeOut(200);
$(this).closest('.field').find('input[name="pillers[]"]').val("");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
<input id="limitation1" type="radio" class="limitSelected" name="limitation" value="1" />Yes
<input id="limitation2" type="radio" class="limitSelected" name="limitation" value="0" />No
<select id="pijlers" class="pillers" name="pillers[]">
<option class="placeholder" selected disabled>Make Choice</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
Till fadeIn fadeOut my code is working how it should. But This code does't reset the value of select options when value has "0".
Can anyone help me with this, what i am doing wrong here?
Thanks in advance.
Using "-1" as default value and also using select instead of input as your selector, should do the trick.
$(document).ready(function () {
$('.limitation_points').hide();
$('.field .limitSelected').each(function () {
$(this).change(function () {
var selected = $(this).val();
if (selected == '1') {
$(this).closest('.field').find('.limitation_points').fadeIn(200);
} else {
$(this).closest('.field').find('.limitation_points').fadeOut(200);
$(this).closest('.field').find('select[name="pillers[]"]').val("-1");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field">
<input id="limitation1" type="radio" class="limitSelected" name="limitation" value="1" />Yes
<input id="limitation2" type="radio" class="limitSelected" name="limitation" value="0" />No
<select id="pijlers" class="pillers" name="pillers[]">
<option class="placeholder" value="-1" selected disabled>Make Choice</option>
<option value="0">0</option>
<option value="1">1</option>
</select>
</div>
Add value attribute to the default <option> and remove disabled.
When you use the empty string reset there is no matching option for it
<option value="" class="placeholder" >Make Choice</option>
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.
Based on the HTML Selection form field below, I need to reset a text field value when the selection field is set to any value besides Completed or Cancelled
<select name="status" id="status" title="">
<option label="Open" value="Open">Open</option>
<option label="In Progress" value="In_Progress">In Progress</option>
<option label="Future_Project" value="Future_Project">Future_Project</option>
<option label="Cancelled" value="Cancelled">Cancelled</option>
<option label="Completed" value="Completed" selected="selected">Completed</option>
</select>
The Text input that I need to set the value to empty/nothing looks like this...
<input autocomplete="off" type="text" id="date_completed_date" value="09/20/2014 06:15pm" size="11" maxlength="10" onblur="combo_date_completed.update();" onchange="combo_date_completed.update(); ">
I can use jQuery or regular JavaScript. I would appreciate any help, I think this should be pretty simple?
Working solution: http://jsfiddle.net/bevanr01/7e2ubo85/4/
$( "#status" ).change(function() {
if ((["Cancelled","Completed"].indexOf($(this).val()) == -1)){
$('#date_completed_date').val('');
}
});
And if you wanted to get fancy as mentioned below you could add today's date those two values are selected.
$( "#status" ).change(function() {
if ((["Cancelled","Completed"].indexOf($(this).val()) == -1)){
$('#date_completed_date').val('');
} else {
$('#date_completed_date').val(new Date());
}
});
Its worth retaining the Date if the user Re-selects another Option otherwise the date will stay Blank.
var date = $('#date_completed_date').val();
$("select").on("change", function () {
if ($(this).val().indexOf('ed') == -1) {
$('#date_completed_date').val('');
}
else {
$('#date_completed_date').val(date);
}
})
Demo
http://jsfiddle.net/mrw9hor8/
try this
<form name="sample">
<select name="status" id="status" title="" onchange="clearInput()">
<option label="Open" value="Open">Open</option>
<option label="In Progress" value="In_Progress">In Progress</option>
<option label="Future_Project" value="Future_Project">Future_Project</option>
<option label="Cancelled" value="Cancelled">Cancelled</option>
<option label="Completed" value="Completed" selected="selected">Completed</option>
</select>
<input autocomplete="off" type="text" id="date_completed_date" value="09/20/2014 06:15pm" size="11" maxlength="10" onblur="combo_date_completed.update();" onchange="combo_date_completed.update(); ">
</form>
in your script
function clearInput() {
if(document.sample.status.value != "Completed" && document.sample.status.value != "Cancelled")
{
document.getElementById('date_completed_date').value='';
}
}
I want to have my States select dropdown only be visible after a country has been chosen in a prior dropdown.
Here is my code:
<form>
Name: <input type="text" name="name" autofocus>
<br />
E-mail: <input type="text" name="email">
<br />
<input type="radio" name="sex" value="male">Male
<br />
<input type="radio" name="sex" value="female">Female
<br />
<select name="country" onchange="showStates()" id="country">
<option>Select A Country</option>
<option id="US" value="US">USA</option>
<option id="AUS" value="AUS">Australia</option>
</select>
<br />
<select name="State" style="display:none;" id="us-states">
<option>Select A State</option>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</select>
<br />
<select name="State" style="display:none;" id="aus-states">
<option value="" selected="selected">Select A State</option>
<option value="TAS">Tasmania</option>
<option value="QLD">Queensland</option>
<option value="VIC">Victoria</option>
</select>
<br />
<button type="submit">Submit</button>
<br />
<input type="reset" value="Reset">
</form>
Here is the showStates() function:
function showStates() {
var selected = $('#country :selected').text();
if (selected == "US") {
document.getElementByID('us-states').style.display = "block;";
} else {
document.getElementByID('us-states').style.display = "none;";
}
if(selected == "AUS") {
document.getElementByID('aus-states').style.display = "block;";
} else {
document.getElementByID('aus-states').style.display = "none;";}
}
}
I'm finding that the program initially hides the select boxes, but doesn't redraw them when a new option is selected in the country tag.
Since you're already using jQuery you can do away with the inline function call. Just add a change handler, and use the value of #country to determine which element to show:
$('#country').on('change', function() {
var country = this.value.toLowerCase();
$('select[name="State"]').hide()
.filter('#' + country + '-states')
.show();
});
Here's a fiddle
You can do this way using jQuery:
$('#country').on('change', function() {
var selected = $(this).val();
if(selected === "US") {
$('#us-states').show();
}
else {
$('#us-states').hide();
}
if(selected === "AUS") {
$('#aus-states').show();
}
else {
$('#aus-states').hide();
}
});
}
Fiddle Example HERE
OR:
$('#country').on('change',function()
{
var selected = $(this).val();
showStates(selected);
});
ShowStates Function:
function ShowStates(value)
{
if(value === "US") {
$('#us-states').show();
}
else {
$('#us-states').hide();
}
if(value === "AUS") {
$('#aus-states').show();
}
else {
$('#aus-states').hide();
}
}
Fiddle With Existing Function Reuse
How is this?
function showStates(id)
{
$("#"+id).css("display", "block");
}
$("#country").on("change", function(){
showStates('us-states');
});
http://jsfiddle.net/Lukx8/