I have an html5 page where I want to set the value of a dropdown menu based on a hidden field but its not working.
function checkPayAdd() {
var i;
var PayAddOption =document.querySelectorAll('input[name="PayAddOption"]');
for ( i = 0; i < PayAddOption.length; i++) {
if (PayAddOption[i].checked == true) {
switch(i)
{
case 0:
document.getElementById("BillingAddress1").value = document.getElementById("Contact_Address1").value;
document.getElementById("BillingAddress2").value = document.getElementById("Contact_Address2").value;
document.getElementById("BillingCity").value = document.getElementById("Contact_City").value;
document.getElementById("BillingProv").selectedIndex = document.getElementById("First_Corp_Director_Prov").value;
document.getElementById("BillingPostalCode").value = document.getElementById("Contact_Postal").value;
document.getElementById("BillingCountry").selectedIndex = document.getElementById("First_Corp_Director_Country").value;
break
I set the values of the hidden field in the same format as those in the drop downs - ie. Province value in hidden field is: "AL" which should then set the Billing.Prov dropdown value to the same. These are the hidden fields
<input type="hidden" name="First_Corp_Director_Province" id="First_Corp_Director_Province" value="AL">
<input type="hidden" name="First_Corp_Director_Country" id="First_Corp_Director_Country" value="US">
<select name="BillingProv" id="BillingProv" class="form-control">
<option value="">select State or Province (Canada/US Only)</option>
<option value="ZZ">Outside US or Canada</option>
<optgroup label="United States">
<option id="USA-AL" value="AL">Alabama (AL)</option>
<option id="USA-AK" value="AK">Alaska (AK)</option>
<option id="USA-AZ" value="AZ">Arizona (AZ)</option>
Any help would be appreciated!
There are 2 errors here
You should be assigning to the value of the select element instead of selectedIndex.
The id of hidden field is wrong. Should be First_Corp_Director_Province instead of
First_Corp_Director_Prov.
so the replace your 4th line of switch case 0 with
document.getElementById("BillingProv").value = document.getElementById("First_Corp_Director_Province").value;
and 6th line with
document.getElementById("BillingCountry").value = document.getElementById("First_Corp_Director_Country").value;
Related
function updateItems() {
const data = {
ItemNames: []
};
var ItemCount = document.getElementById("selectQty").value;
for (var i = 1; i <= ItemCount; i++){
data.ItemLists.push({
id: `ItemName${i}`,
value: document.getElementById(`ItemName${i}`).value
});
}
}
Above is my code, I am trying to create new input text called id="ItemName" to create based on the value in the select combobox called id="selectQty". I created this loop but it doesn't create new input text based on the selected number in the combo box. I am beginner at Javascript and doing exercises. I tried looking for other solution but I can't seem to find any. Any help will be appreciated.
This function will be called on using the select:
<select id="selectQty" onchange="updateItems()">
<option value="0" disabled selected value>Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="2">4</option>
<option value="2">5</option>
<option value="2">6</option>
<option value="2">7</option>
</select>
This is my input text
<input type="text" id="ItemName" placeholder="Item Name">
You need to use createElement method to create new dynamically added inputs.
To get the value of actual input we need to create we can use _this.value which will be coming from our onclick function.
You might notice this + sign which mean we are converting the string number to actual integer format for looping purposes.
Also, i have also addedlabel to each of your input when they are created you can name the label to what suits you the best.
In addition, to make it look nicer we can add line break <br> to make sure our labels and input are generated in each line.
Lastly, you need to use innerHTML to make sure that you set the results to empty each time you select a different option from the select.
You can also refer to each comment as well i have added in each line of JS code below.
Live Demo:
function updateItems(_this) {
var ItemCount = +_this.value //get the value
var results = document.querySelector('#results') //append results
results.innerHTML = '' //clear the results on each update
for (var i = 1; i <= ItemCount; i++) {
var input = document.createElement('input') //create input
var label = document.createElement("label"); //create label
label.innerText = 'Input ' + i
input.type = "text";
input.placeholder = "Type text here"; //add a placeholder
input.className = "my-inputs"; // set the CSS class
results.appendChild(label); //append label
results.appendChild(document.createElement("br"));
results.appendChild(input); //append input
results.appendChild(document.createElement("br"));
}
}
<select id="membership-members" onchange="updateItems(this)">
<option value="0" disabled selected>Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<br>
<br>
<div id="results"></div>
I have three select tags in HTML with option tag.I want to establish relationship between option tags of different select tag.
EDIT-1
When I choose Reference-1 from select name="reference" then 2014-10-10 07:17:00 and 2014-10-10 08:46:00 from select name="from" and select name="to" should only be present in the dropdown list.When I choose Reference-2 then 2014-09-01 10:00:00 and 2014-09-01 11:00:00 should only be present in dropdown list of from and to select tag. My html code for is-
<form method="post">
Select Reference:
<select name="reference">
<option value="Select">Select</option>
<option value="Reference-1">Reference-1;</option>
<option value="Reference-2">Reference-2</option>
<option value="Reference-3">Reference-3</option>
<option value="Reference-4">Reference-4</option>
</select>
From Date:
<select name="from">
<option value="Select">Select</option>
<option value="2014-10-10 07:17:00">2014-10-10 07:17:00</option>
<option value="2014-09-01 10:00:00">2014-09-01 10:00:00</option>
<option value="2014-09-08 10:00:00">2014-09-08 10:00:00</option>
</select>
To Date:
<select name="to">
<option value="Select">Select</option>
<option value="2014-10-10 08:46:00">2014-10-10 08:46:00</option>
<option value="2014-09-01 11:00:00">2014-09-01 11:00:00</option>
<option value="2014-09-08 10:00:00">2014-09-08 11:00:00</option>
</select><br>
<b>Select Date to be compared</b>
<p>Date: <input type="text" id="datepicker"></p>
<input type="submit" value="Submit"><br>
</form>
Get the index of the selected option from reference select element and then disable all the options of from and to select elements except the option with index of the previous index you got from reference select option.
javaScript Solution :
var reference = document.getElementsByName("reference")[0];
var fromSelect = document.getElementsByName("from")[0];
var toSelect = document.getElementsByName("to")[0];
reference.onchange = function(){
var selectedIndex = this.selectedIndex;
for(var i = 1; i <= fromSelect.length; i++){
if(i != selectedIndex){
fromSelect.getElementsByTagName("option")[i].disabled = true;
toSelect.getElementsByTagName("option")[i].disabled = true;
} else{
fromSelect.getElementsByTagName("option")[i].disabled = false;
toSelect.getElementsByTagName("option")[i].disabled = false;
}
}
};
jsFiddle
jQuery Solution :
$("select[name='reference']").on("change", function(){
var $fromSelect = $("select[name='from']");
var $toSelect = $("select[name='to']");
var selectedIndex = $(this).children("option:selected").index();
$fromSelect.children("option").removeAttr("disabled");
$toSelect.children("option").removeAttr("disabled");
$fromSelect.children("option").not(":eq(" + selectedIndex +")").prop("disabled", "disabled");
$toSelect.children("option").not(":eq(" + selectedIndex +")").prop("disabled", "disabled");
});
jsFiddle
If second selection values are dependent on the first selection option, then you should disable the whole second selection until the first one is selected.
When the first one is selected then disable all the unrelated options in second selection and make it enabled to the user. Let me know if it helped.
$("select[name='reference']").on('change', function() {
var value = $(this).val(); // first selection value
if ("Reference-1" == value ) {
var $selection2 = $("select[name='from']");
$selection2.find("option[value*='2014-09-01 10:00:00']").prop('disabled',true);
$selection2.find("option[value*='2014-09-08 10:00:00']").prop('disabled',true);
}
...
});
Here is DEMO
How do I access several option values in a form, under two different select ids, with JavaScript?
Here's the code: (JSFiddle: http://jsfiddle.net/sebastianonline/9yL4rv6j/)
(HTML5)
Select your favorite fruit:
<select id="mySelect">
<option value="apple">Apple</option>
<option value="orange">Orange</option>
<option value="pineapple">Pineapple</option>
<option value="banana">Banana</option>
</select>
Click the button to return the value of the selected fruit.
Pick a product
Amount
<label><strong>Amount:</strong></label>
<select id="amount">
<option selected>1</option>
<option>2</option>
<option>3</option>
</select>
<!-- text value here -->
<p id="include"></p>
<p id="include2"></p>
(JavaScript)
function mySelect()
{
var x = document.getElementById("mySelect").selectedIndex;
var p = document.getElementsByTagName("option")[x].value;
document.getElementById("include").innerHTML = p;
}
function myAmount()
{
var a = document.getElementById("amount").selectedIndex;
var b = document.getElementsByTagName("option")[a].value;
document.getElementById("include2").innerHTML = b;
}
Function mySelect() is able to pick the right option value and insert it in the first paragraph, however, the second function (myAmount()) is picking the same options as the first function, even though its id points to select id="amount". I need the second function to pick the options in select id="amount" and print it in p id="include2".
You are using document.getElementsByTagName("option"), which returns all option elements in the document, not all options for the current select. Which of course means your indexing is out.
But you can get the selected option's value in a given select element using the .value property of the select element itself:
function mySelect() {
var x = document.getElementById("mySelect").value;
document.getElementById("include").innerHTML = x;
}
function myAmount() {
document.getElementById("include2").innerHTML =
document.getElementById("amount").value;
}
I'm looking to make a series of select boxes in html which show different options depending on what has already been selected. I can get the first two to work but can't work out why it's not injecting into the last box here, the #FCadultseats select box.
I basically want the FCadultseats box to be available only when the movie is in the big cinema (at 9pm).
Thanks a lot for any and all help. I've been trying for ages and dont know why this wont work.
Here's my code:
<form id = "booking" method = "POST" action = "testserver">
Day:
<select id = "dayselector" name = "day">
<option disabled selected> -- Select a Day -- </option>
<option value= "Monday">Monday </option>
<option value = "Tuesday">Tuesday</option>
<option value = "Wednesday">Wednesday</option>
<option value = "Thursday">Thursday</option>
<option value = "Friday">Friday</option>
<option value = "Saturday">Saturday</option>
<option value = "Sunday">Sunday</option>
</select>
<br>
Time and Cinema:
<select id ="timeselector" name ="time">
<option disabled selected> -- Select a Time -- </option>
</select>
First Class Adults: <select id ="FCadultseats">
<option disabled selected> -- Not Available -- </option>
</select>
</form>
$(document).ready(function(){
$("#dayselector").change(function(){
var sel_day = $('option:selected').val();
if (sel_day == "Saturday" || sel_day == "Sunday"){
$("select#timeselector").html('<option disabled selected> -- Select a Time -- </option><option value ="9">9pm - Large Cinema</option><option value ="4">4pm - Small Cinema</option>');
} else {
$("select#timeselector").html('<option disabled selected> -- Select a Time -- </option><option value ="9">9pm - Large Cinema</option>');
}
});
$("#timeselector").change(function(){
var sel_time = $('option:selected').val();
if (sel_time == 9){
$("#FCadultseats").html('<option value ="0">0</option><option value ="1"></option><option value ="2">2</option><option value ="3">3</option><option value ="4">4</option><option value ="5">5</option><option value ="6">6</option><option value ="7">7</option><option value ="8">8</option><option value ="9">9</option><option value ="10">10</option><option value ="11">11</option><option value ="12">12</option>');
}
});
});
Try changing
var sel_day = $('option:selected').val();
to
var sel_day = this.value;
and do that in both places.
$('option:selected') selects ALL the selected options on the page, for every select.
I am building validation for my forms. I have covered the input text fields with the folowing code:
function validateForm_id()
{
var ctrl = document.forms["form1"]["id"];
var x=ctrl.value;
if (x==null || x=="") {
document.getElementById('id').style.backgroundColor="#FFD4D4";
document.getElementById("id").style.borderColor="#FF7A7A";
document.all.id.innerText = "password required";
I would like to validate the value from my select drop down boxes. The values are:
-- Select Title --
Mr
Mrs
Ms
I would like the user to not be able to submit if -- Title -- is the value from the box.
how do i refer to the first value of the dropdownbox in the if (x==null || x=="") of the above code? Here is my dropdown:
<select name="title" onKeydown="Javascript: if (event.keyCode==13) post();" onFocus="validation_title()" onBlur="return validateForm_title()" id="title">
<option>- Title -</option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Other</option>
</select> <div align="center" id="title" style="font-size:small; color:#FF0000;"><script type="text/javascript">document.all.title.innerText = " ";</script></div>
You can use the selectedIndex property of <select> to check out that the first index is never selected.
if (ctrl.selectedIndex == 0) { alert('The Title field is required'); }
var select = document.getElementById('mySelectID');
alert(select.options[0].value); //first option's value
alert(select.value); // currently selected value
To get option's text use
alert(select.options[select.selectedIndex].text);
var opts = yourSelectObj.options;
then loop on options.