I am teaching myself how to code. I can't figure out how to take multiple values from an HTML drop down form and directly input them into a predefined function via javascript.(Form attributes?)
<form action="mywebsite.html">
<p> Month </p>
<select name="Bmonth">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
</select>
<p> Day </p>
<select name="Bdom">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p> Year </p>
<select name="Byear">
<option value="2015">2015</option>
<option value="2014">2015</option>
<option value="2013">1988</option>
</select></form>
<script>
function DOB(Bmonth, Bdom, Byear) {
var z=Byear-Bmonth*Bdom;
return window.alert("Your number is " +z);
}
DOB(Bmonth, Bdom, Byear);
</script>
I simply want to take the three values that the user provides and enter them into the function DOB(Bmonth, Bdom, Byear); If I run the code like this it says "Bmonth is undefined."
You could also use a javascript framework or library that will make your life easier. For instance, with jQuery you would adapt your code like so:
<form action="mywebsite.html">
<p> Month </p>
<select name="Bmonth">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
</select>
<p> Day </p>
<select name="Bdom">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p> Year </p>
<select name="Byear">
<option value="2015">2015</option>
<option value="2014">2015</option>
<option value="2013">1988</option>
</select></form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function DOB(Bmonth, Bdom, Byear) {
var z=Byear-Bmonth*Bdom;
return window.alert("Your number is " +z);
}
DOB(
$('[name="Bmonth"]').val(),
$('[name="Bdom"]').val(),
$('[name="Byear"]').val()
);
</script>
And with some further tweakings (adding a button to trigger DOB function and using ids instead of name): http://jsfiddle.net/neewonej/
First of all change name="" to id="" to make simpler with javascript selection. Which looks like this:
<form action="mywebsite.html">
<p> Month </p>
<select id="Bmonth">
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
</select>
<p> Day </p>
<select id="Bdom">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<p> Year </p>
<select id="Byear">
<option value="2015">2015</option>
<option value="2014">2015</option>
<option value="2013">1988</option>
</select></form>
You need to get the handle of the select box to tempElement variable using tempElement = document.getElementById("Bmonth"). Then get the selected index using tempElement.selectedIndex and make this index to retrieve value from tempElement.options. Use tempElement.options[tempElement.selectedIndex].value to get the value equivalent that user selects otherwise use tempElement.options[tempElement.selectedIndex].text to get the selected text.
Here is the working javascript code:
function DOB(Bmonth, Bdom, Byear) {
var z=Byear-Bmonth*Bdom;
return window.alert("Your number is " +z);
}
var tempElement = document.getElementById("Bmonth");
Bmonth = tempElement.options[tempElement.selectedIndex].value;
tempElement = document.getElementById("Bdom");
Bdom = tempElement.options[tempElement.selectedIndex].value;
tempElement = document.getElementById("Byear");
Byear = tempElement.options[tempElement.selectedIndex].value;
DOB(Bmonth, Bdom, Byear);
Thanks
Related
I am a beginner to JavaScript. I hope someone can help me
So basically i have several questions i need to ask my students. All the questions being yes/no questions being selected from a dropdown. "No" will always remain 0 but "Yes" will have a figure somewhere between 0-10.
Something like this
<p> 1. Did you attend summer training?
<select id="select1">
<option value="0">NO</option>
<option value="2">YES</option>
</select>
</p>
<p> 2. Have you passed all your grades?
<select id="select2">
<option value="0">NO</option>
<option value="4">YES</option>
</select>
</p>
<p> 3. Have you completed summer assignments?
<select id="select2">
<option value="0">NO</option>
<option value="3">YES</option>
</select>
</p>
I am trying to add those selected values to sum them to a total so i can display a score.
Appreciate any help
<p> 1. Did you attend summer training?
<select id="select1">
<option value="0">NO</option>
<option value="2">YES</option>
</select>
</p>
<p> 2. Have you passed all your grades?
<select id="select2">
<option value="0">NO</option>
<option value="4">YES</option>
</select>
</p>
<p> 3. Have you completed summer assignments?
<select id="select2">
<option value="0">NO</option>
<option value="3">YES</option>
</select>
</p>
<button onclick="submit()">Submit</button>
<script>
function submit() {
let total;
document.querySelectorAll('select').forEach(element => {
total += element.value;
});
console.log(total);
}
</script>
One way to approach it is to give all your select menus the same class name so you can reference them all in a loop, then add it all together. Something like this:
window.addEventListener('DOMContentLoaded', () => { // wait until the document has loaded
let total = 0 //initialize the variable
document.querySelector('#tally').addEventListener('click', e => { // event listener to catch the button click
e.preventDefault(); // prevent the form from submitting
total = 0; // set the total to zero
document.querySelectorAll('select.score').forEach(sel => total += +sel.value || 0); // loop through each select, get the value (which is a string) and convert to a number (with the + in front of it)
console.log("total:", total)
})
})
<form>
<p> 1. Did you attend summer training?
<select class='score' id="select1">
<option value="0">NO</option>
<option value="2">YES</option>
</select>
</p>
<p> 2. Have you passed all your grades?
<select class='score' id="select2">
<option value="0">NO</option>
<option value="4">YES</option>
</select>
</p>
<p> 3. Have you completed summer assignments?
<select class='score' id="select2">
<option value="0">NO</option>
<option value="3">YES</option>
</select>
</p>
<button id='tally'>Tally</button>
</form>
What I'm trying is something pretty basic, but I can't do it because the examples I see aren't anything similar to what I'm looking for.
There are 2 select, one of them you choose manually and the other dynamically changes depending on the value of the first one.
If the value of the first select is 1, that in the second one they only appear whose value is 1 as well.
I want to make it 100% JavaScript, I don't want any JQuery.
HTML.php
<select onchange="catch_value_types()" name="types" id="types">
<option value="1">Meat</option>
<option value="2">Fish</option>
<option value="3">Vegetables</option>
</select>
<select name="food" id="food">
<option value="1">Pork</option>
<option value="1">Cow</option>
<option value="1">Chicken</option>
<option value="2">Sardine</option>
<option value="2">Salmon</option>
<option value="2">Mackerel</option>
<option value="3">Spinach</option>
<option value="3">Kale</option>
<option value="3">Green peas</option>
</select>
JavaScript.js
function catch_value_types() {
var types_value_option = document.getElementById("types").value;
// What should I put here?
}
Loop through the options and hide if value doesnot match
function catch_value_types() {
const selectedValue = document.getElementById("types").value;
const select2 = document.getElementById("food");
Array.from(select2.options).forEach((node) => node.style.display = node.value === selectedValue ? "block": "none");
}
<select onchange="catch_value_types()" name="types" id="types">
<option value="1">Meat</option>
<option value="2">Fish</option>
<option value="3">Vegetables</option>
</select>
<select name="food" id="food">
<option>Please Select</option>
<option value="1">Pork</option>
<option value="1">Cow</option>
<option value="1">Chicken</option>
<option value="2">Sardine</option>
<option value="2">Salmon</option>
<option value="2">Mackerel</option>
<option value="3">Spinach</option>
<option value="3">Kale</option>
<option value="3">Green peas</option>
</select>
When the form is submit I can only get the number assigned to the value. I want to submit any of the texts that is between the select options.
For example, when I select Bird and Dove I want to receive Bird and Dove not 3 and 3
$("#select1").change(function() {
if ($(this).data('options') === undefined) {
/*Taking an array of all options-2 and kind of embedding it on the select1*/
$(this).data('options', $('#select2 option').clone());
}
var id = $(this).val();
var options = $(this).data('options').filter('[value=' + id + ']');
$('#select2').html(options);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form method="POST" action="process.php">
<select name="select1" id="select1">
<option value="0">-Select-</option>
<option value="1">Cars</option>
<option value="2">Phones</option>
<option value="3">Birds</option>
</select>
<select name="select2" id="select2">
<option value="0">-Select-</option>
<option value="1">BMW</option>
<option value="1">Benz</option>
<option value="1">Toyota</option>
<option value="2">iPhone</option>
<option value="2">Samsung</option>
<option value="2">Motorola</option>
<option value="3">Eagle</option>
<option value="3">Hawk</option>
<option value="3">Dove<option>
</select><br>
<label>Postal code</label>
<input type="number" name="zipcode" placeholder="postal code">
<button>Search</button>
</form>
When the form is submit the value of the selected option is sent. The problem is because you're using this value to match the child option elements to the parent.
To fix this you need to use value as it was intended, ie. to hold the value you want to send to the server when the form is submit, and use a different method for grouping the option elements between select. I'd suggest using a data attribute for this instead, like this:
$("#select1").change(function() {
if (!$(this).data('options')) {
$(this).data('options', $('#select2 option').clone());
}
var category = $(this).find('option:selected').data('category');
var options = $(this).data('options').filter(function() {
return $(this).data('category') == category;
});
$('#select2').html(options);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="POST" action="process.php">
<select name="select1" id="select1">
<option data-category="0" value="">-Select-</option>
<option data-category="1" value="Cars">Cars</option>
<option data-category="2" value="Phones">Phones</option>
<option data-category="3" value="Birds">Birds</option>
</select>
<select name="select2" id="select2">
<option data-category="0" value="Cars">-Select-</option>
<option data-category="1" value="BMW">BMW</option>
<option data-category="1" value="Benz">Benz</option>
<option data-category="1" value="Toyota">Toyota</option>
<option data-category="2" value="iPhone">iPhone</option>
<option data-category="2" value="Samsung">Samsung</option>
<option data-category="2" value="Motorola">Motorola</option>
<option data-category="3" value="Eagle">Eagle</option>
<option data-category="3" value="Hawk">Hawk</option>
<option data-category="3" value="Dove">Dove</option> <!-- note I fixed your typo here, missing / -->
</select><br>
</form>
Just change the value from number to text.
example
<option value="Hawk">Hawk</option>
<option value="Dove">Dove<option>
Done!
I have this scenario where i have 4 drop down boxes, where you can choose CM for a carport and a shed, within that carport.
I want to prompt the user with messages/errors in these scenarios:
the shed is chosen to be wider than it is long.
the shed is atleast 60cm smaller than the carports in both width and length
only one of the sheds dimensions being chosen
the form looks like this
<form name="createorder" action="FrontController" method="POST">
<input type="hidden" name="command" value="createorder">
<br>
Length of shed:<br>
<select name="lengthShed">
<option value="0">I do not want a shed</option>
<option value="180">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
</select>
<br>
Width of shed:<br>
<select name="widthShed">
<option value="0">I do not want a shed</option>
<option value="18=">180cm</option>
<option value="210">210cm</option>
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
</select>
<br>
Width:<br>
<select name="width">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
</select>
<br>
Length:<br>
<select name="length">
<option value="240">240cm</option>
<option value="270">270cm</option>
<option value="300">300cm</option>
<option value="330">330cm</option>
<option value="360">360cm</option>
<option value="390">390cm</option>
<option value="420">420cm</option>
<option value="450">450cm</option>
<option value="480">480cm</option>
<option value="510">510cm</option>
<option value="540">540cm</option>
<option value="570">570cm</option>
<option value="600">600cm</option>
<option value="630">630cm</option>
<option value="660">660cm</option>
<option value="690">690cm</option>
<option value="720">720cm</option>
<option value="750">750cm</option>
<option value="780">780cm</option>
</select>
Bind a function to your <select> elements onchange property.
let selects = document.querySelectorAll('select');
for(var i = 0; i < selects.length; i++){
selects[i].onchange = function(){
// Check for your conditions
// If your warning conditions are met, prompt user
}
}
That is, assuming you want the validation to happen when the user changes one of the select's values.
If you want to validate with a button click, you can instead bind the function to the click event of the button.
let button = document.getElementById(buttonID);
button.onclick = function(){
// Check for your conditions
// If conditions are met, prompt user
}
To prompt the user, you can use a simple alert() to which you pass your message. Or make a more elaborate function to do something custom.
As for your conditions, that sounds like commercial math. Might have to split your question in multiple questions here as there are a lot of possible awnsers.
It might be easier for you to add IDs to your selects so you can get them via document.getElementById(idString). You can then get their value through document.getElementById(idString).value. And to use it in math solving, you will need to parse the string that the <select> will return as value, like so parseInt(document.getelementById(idString).value).
I need to create a drop down menu containing numbers,
<select>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
</select>
and when a number is selected I want the value to be returned in a <p id="returned-value"></p>tag, but times by 1.09. How can I do that with javascript?
See this fiddle
As you can see in the fiddle, the (selected value * 1.9) is shown in the <p> as soon as a value is selected from the <select>. This is done using onchange. The onchange event occurs when the value of an element has been changed.
HTML
<select id="mySelect" onchange="myFunction()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<p id="demo">0</p>
JS
function myFunction() {
var x = document.getElementById("mySelect").value;
document.getElementById("demo").innerHTML = "You selected: " + x * 1.9;
}
var value = parseInt(document.getElementByTagName('select').value);
var newValue = value * 1.09;
document.getElementById('returned-value').innerHTML = newValue;