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>
Related
fist i select any option from fist select menu, then press on add button to get new select menu at this time the fist selected option is switches to default, how to prevent it...
<body id = "body">
<button onclick="add()">Add</button>
<select>
<option selected disabled>Choose...</option>
<option value="c1"> one </option>
<option value="c13"> two </option>
<option value="c11"> three </option>
<option value="c12"> four </option>
</select>
</body>
<script>
let body = document.getElementById('body');
function add(){
body.innerHTML += `<select>
<option selected disabled">Choose...</option>
<option value="c1"> one </option>
<option value="c13"> two </option>
<option value="c11"> three </option>
<option value="c12"> four </option>
</select>`;
}
</script>
https://jsfiddle.net/zala_jaydipsinh/34b95dq2/1/
Try like this:
let body = document.getElementById('body');
function add() {
body.insertAdjacentHTML(`beforeend`, `<select>
<option selected disabled">Choose...</option>
<option value="c1"> one </option>
<option value="c13"> two </option>
<option value="c11"> three </option>
<option value="c12"> four </option>
</select>`)
}
<body id="body">
<button onclick="add()">Add</button>
<select>
<option selected disabled>Choose...</option>
<option value="c1"> one </option>
<option value="c13"> two </option>
<option value="c11"> three </option>
<option value="c12"> four </option>
</select>
</body>
insertAdjacentHTML() does this without overwriting the content of the body element.
Hello Guys Please Help me for this I didn't how I show select title. I want to show above When should we call you?.
please check my code Thanks:-
<select name="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today" id="df">today</option>
<option value="tommorow" id="df">tommorow</option>
<option value="sunday" id="dfd">sunday</option>
</select>
Please check online codepen code link:- https://codepen.io/anon/pen/EQBbyG
You can add a <label> in your HTML Markup.
<label for="myfirst">When should we call you?</label>
<select name="myfirst" id="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today" id="df">today</option>
<option value="tommorow" id="df">tommorow</option>
<option value="sunday" id="dfd">sunday</option>
</select>
If you use jQuery you can select all the <select> elements with a title attribute, and copy its value into the first <option>.
$("select[title] option:first-child").text(function(i, oldtext) {
if (oldtext.trim() == '') {
return $(this).parent().attr("title");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="myfirst" title="When should we call you?">
<option class="optnoval"></option>
<option value="today">today</option>
<option value="tommorow">tommorow</option>
<option value="sunday" >sunday</option>
</select>
<select name="mytime" title="What time of day?">
<option class="optnoval"></option>
<option value="morning">Morning</option>
<option value="afternoon" >Afternoon</option>
<option value="evening">Evening</option>
</select>
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
I have a form with 2 radio buttons and when either button is toggled it shows or hides a certain fieldset. The issue I have is because the fieldset is just hidden so when the form is submitted it still takes the first fieldsets values.
I have setup a fiddle to show how the form changes the fieldsets http://jsfiddle.net/hhdMq/1/
So when I select "Scale B" although you can change the correct values, when the form is submitted it takes the default values of Scale A.
<center>
<input type="radio" name="sellorlet" value="Yes" id="rdYes" checked="yes" />
<label for="rdYes">Scale A</label>
<input type="radio" name="sellorlet" value="No" id="rdNo" />
<label for="rdNo">Scale B</label>
</center>
<fieldset id="sell">
<center>
<select id="pricemin" name="min">
<option value="50000">Min Price</option>
<option value="50000">£50,000</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
<option value="600000">£600,000</option>
<option value="700000">£700,000</option>
<option value="800000">£800,000</option>
<option value="900000">£900,000</option>
<option value="1000000">£1,000,000</option>
<option value="1250000">£1,250,000</option>
<option value="1500000">£1,500,000</option>
<option value="1750000">£1,750,000</option>
<option value="2000000">£2,000,000</option>
<option value="3000000">£3,000,000</option>
</select>
<select id="pricemax" name="max">
<option value="5000000">Max Price</option>
<option value="100000">£100,000</option>
<option value="200000">£200,000</option>
<option value="300000">£300,000</option>
<option value="400000">£400,000</option>
<option value="500000">£500,000</option>
<option value="600000">£600,000</option>
<option value="700000">£700,000</option>
<option value="800000">£800,000</option>
<option value="900000">£900,000</option>
<option value="1000000">£1,000,000</option>
<option value="1250000">£1,250,000</option>
<option value="1500000">£1,500,000</option>
<option value="1750000">£1,750,000</option>
<option value="2000000">£2,000,000</option>
<option value="3000000">£3,000,000</option>
<option value="4000000">£4,000,000</option>
<option value="5000000">£5,000,000</option>
</select>
</center>
</fieldset>
<fieldset id="buy" style="display:none;">
<center>
<select id="lpricemin" name="min">
<option value="500">Min Price</option>
<option value="500">£500</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
<option value="1250">£1250</option>
<option value="1500">£1500</option>
<option value="2000">£2000</option>
<option value="2500">£2500</option>
<option value="3000">£3000</option>
<option value="4000">£4000</option>
<option value="5000">£5000</option>
</select>
<select id="lpricemax" name="max">
<option value="5000">Max Price</option>
<option value="600">£600</option>
<option value="700">£700</option>
<option value="800">£800</option>
<option value="900">£900</option>
<option value="1000">£1000</option>
<option value="1150">£1150</option>
<option value="1250">£1250</option>
<option value="1500">£1500</option>
<option value="2000">£2000</option>
<option value="2500">£2500</option>
<option value="3000">£3000</option>
<option value="4000">£4000</option>
<option value="5000">£5000</option>
</select>
</center>
</fieldset>
and the jquery used:
$("input[name='sellorlet']").change(function () {
$("#sell").toggle(this.value == "Yes");
$("#let").toggle(this.value == "No");
});
My question is, how can I completely disable the first fieldset if Scale B is selected and likewise when Scale A is selected it will disable the second fieldset?
Many thanks
When submitting a form, you cannot have two inputs, selects, or textareas with the same name in the same form. Doing so will cause confusion and probably end up the wrong info being submitted. There are two ways you can fix this.
Method 1:
Change the
<select id="lpricemin" name="min">
<select id="lpricemin" name="lmin">
to
<select id="lpricemax" name="max">
<select id="lpricemax" name="lmax"> respectively.
This will allow you to handle the data from lmin and lmax and ensure you get the info from the second fieldset.
Method 2:
Put the second fieldset in a different form. Then just change the jQuery to show the forms instead of the fieldsets.
Changed the radio buttons now to a tabbed design so the form can be separated correctly. If anyone would like to know how the tabs are done they are here http://cssdeck.com/labs/fancy-tabbed-navigation-with-css3-and-jquery
Method 3 would be to change the switch the content of your select through Javascript rather than toggling through visibility. You can do that through:
function setMaxScale()
{
document.getElementById().innerHTML = "<option value="50000">Min Price</option>\
<option value="50000">£50,000</option>\
<option value="100000">£100,000</option>\
<option value="200000">£200,000</option>\
<option value="300000">£300,000</option>...";
}
An other clean solution would be to create your scales dynamically with a loop.
I'm new posting here, have visited several times over the years to read every ones ideas.
My issue is I have a form with 2 select boxes, second one populated with values upon selection in the first. The second holds a url value which you got to upon submit.
This function works perfectly using the onchange but on submit only the first of the second select list urls work. I can swap them but only the first works, all the others only pass the primary url followed by a crosshatch '#'.
<script>
$(document).ready(function($){
$("#category").change(function() {
$('select[name="product"]').removeAttr("name").hide();
$("#" + $(this).val()).show().attr("name", "product");
});
/* ' This works on all
$(".product").change(function() {
document.location = $(this).val();
});
*/
/* this only passes url on first product option list else passes opening url + #*/
$('#discover').submit(function() {
document.location = $(".product").val();
return false;
});
});
</script>
<div id="discover-box">
<form id="discover" method="post">
<fieldset>
<p class="category">
<label class="title">Category:</label>
<select id="category" name="category">
<option value="#" selected="selected">Choose category</option>
<option value="accommodation">Accommodation</option>
<option value="food">Food</option>
<option value="explore">Explore</option>
</select>
<p><label>Sub-Category:</label>
<select id="accommodation" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="accommodation_category.asp?o=1&c=1">Motels</option>
<option value="accommodation_category.asp?o=2&c=2">Camping, Caravan & Holiday Parks</option>
<option value="accommodation_category.asp?o=3&c=3">B&B, Self-Contained Houses & Cottages</option>
<option value="accommodation_category.asp?o=4&c=4">Hotels</option>
<option value="accommodation_category.asp?o=5&c=5">Backpackers & Group Accommodation</option>
<option value="accommodation_category.asp?o=6&c=6">National Parks</option>
</select>
<select id="food" style="display:none" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="food_wine_category.asp?o=1&t=1&c=1">Restaurants & Cafes</option>
<option value="food_wine_category.asp?o=2&t=1&c=2">Pubs</option>
<option value="food_wine_category.asp?o=3&t=1&c=3">Bakeries & Takeaway</option>
<option value="food_wine_category.asp?o=4&t=1&c=4">Local Produce</option>
<option value="food_wine_category.asp?o=5&t=2&c=1">Mount Gambier Wine Region</option>
<option value="food_wine_category.asp?o=5&t=2&c=2">Other Limestone Coast Wine Regions</option>
</select>
<select id="explore" style="display:none" name="product" class="product">
<option value="#" selected="selected">Choose sub-category</option>
<option value="explore_category.asp?o=1">Top 10</option>
<option value="explore_category.asp?o=2">Arts, Crafts, Galleries & Museums</option>
<option value="explore_category.asp?o=3">Heritage, Antiques & Collectables</option>
<option value="explore_category.asp?o=4">Family Fun</option>
<option value="explore_category.asp?o=5">Caves & Sinkholes</option>
<option value="explore_category.asp?o=6">Parks & Gardens</option>
<option value="explore_category.asp?o=7">Walks & Drives</option>
<option value="explore_category.asp?o=8">Kanawinka Geotrail</option>
<option value="explore_category.asp?o=9">Retail</option>
<option value="explore_category.asp?o=10">Recreation, Leisure & Adventure</option>
</select>
</p>
<p class="buttons">
<input type="image" src="images/submit-red.png" Value="submit">
</p>
</fieldset>
</form>
</div>
because $(".product").val(); will find first occurrence of DOM having class product so in any case it will fetch first one... u can do this using
$('#discover').submit(function() {
document.location = $('select[name="product"]').val();
return false;
});
Open Fiddler (fiddler2.com) and watch the post go past. I find that generally when more than one control on a page uses the same name, the browser actually passes all of them, but the server-side framework expecting each post parameter to be unique, ignores all but the last one.
when you submit , you have only one select box with attribute name ,so you can select the selected value by that attribute
$('#discover').submit(function() {
document.location = $('select[name="product"]').val();
return false;
});