We Keep Coding

Changing hidden Paypal value in dropdown

I've got 2 dropdowns
This is part of a form to buy either a Short Sleeve or Long Sleeve shirt using Paypal.
Short Sleeve is one price. Long Sleeve is another price. That works great. Using hidden values I can make a 2XL and 3XL Short Sleeve shirt change price. That works great.
The javascript is used to change the pricing for 2XL and 3XL Long Sleeve shirts.
This also works great. The problem I'm having is making the option_select values change to say "LS 2XL" or "LS 3xL" instead of "SS 2XL" or "SS 3XL" (along with the rest of the Long sleeve sizes).
I'm not proficient in javascript, but I can usually piece enough together to make thing work. This one has me stumped. Any help using javascript would be appreciated.
function changeHiddenInput(objDropDown) {
var upcharge2XL = document.getElementById("hiddenvalue2XL");
var upcharge3XL = document.getElementById("hiddenvalue3XL");
upcharge2XL.value = 20.00;
upcharge3XL.value = 21.00;
}
<select name="amount" size="1" id="Combobox1" onchange="changeHiddenInput(this)">
<option value="15.00">Short Sleeve</option>
<option value="18.00">Long Sleeve</option>
</select><br/>
<select name="os0" size="1" id="Combobox2">
<option selected>Select Size</option>
<option value="SS Small">Small</option>
<option value="SS Medium">Medium</option>
<option value="SS Large">Large</option>
<option value="SS XL">XL</option>
<option value="SS 2XL">2XL + $2</option>
<option value="SS 3XL">3XL + $3</option>
<option value="--------">--------</option>
<option value="SS Youth Small">Youth Small</option>
<option value="SS Youth Medium">Youth Medium</option>
<option value="SS Youth Large">Youth Large</option>
</select><br/>
Hidden Paypal Values
<input type="hidden" name="option_select0" value="SS 2XL" id="hiddensize2XL">
<input type="hidden" name="option_amount0" value="17.00" id="hiddenvalue2XL">
<input type="hidden" name="option_select1" value="SS 3XL" id="hiddensize3XL">
<input type="hidden" name="option_amount1" value="18.00" id="hiddenvalue3XL">

I think you mean this?
document.getElementById("pp1").addEventListener("submit",function(e) {
e.preventDefault(); // remove this line when finished testing
const sleeve = document.getElementById("Combobox1").value;
const size = document.getElementById("Combobox2").value;
if (sleeve === "" || size === "") {
alert("Please choose sleeves and size")
e.preventDefault(); // stop submission
}
let amt = sleeve === "SS" ? 15 : 17;
if (size === "2XL") amt += 2;
else if (size === "3XL") amt += 3;
document.getElementById("hiddensize2XL").value=size
document.getElementById("hiddensize3XL").value=size
document.getElementById("hiddenvalue2XL").value = amt.toFixed(2)
document.getElementById("hiddenvalue3XL").value = amt.toFixed(2);
})
<select name="amount" size="1" id="Combobox1">
<option value="" selected>Sleeves</option>
<option value="SS">Short Sleeve</option>
<option value="LS">Long Sleeve</option>
</select><br/>
<select name="os0" size="1" id="Combobox2">
<option value="" selected>Select Size</option>
<option value="Small">Small</option>
<option value="Medium">Medium</option>
<option value="Large">Large</option>
<option value="XL">XL</option>
<option value="2XL">2XL + $2</option>
<option value="3XL">3XL + $3</option>
<option value="--------">--------</option>
<option value="Youth Small">Youth Small</option>
<option value="Youth Medium">Youth Medium</option>
<option value="Youth Large">Youth Large</option>
</select><br/>
Hidden Paypal Values
<form id="pp1">
<input type="text" name="option_select0" value="" id="hiddensize2XL">
<input type="text" name="option_amount0" value="17.00" id="hiddenvalue2XL">
<input type="teyxt" name="option_select1" value="" id="hiddensize3XL">
<input type="teyt" name="option_amount1" value="18.00" id="hiddenvalue3XL">
<input type="submit" />
</form>

Multiple jQuery Scripts in one HTML page Not working together

I have an HTML code with 3 jQuery Scripts and they are not working together correctly
can SomeOne Help me to solve this, please
I do to solve this problem as I don't have any experience in jQuery
and how can I fix this issue?
UPDATE It works now but one drop-down menu at a time how can I make them work together
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Availabe Restaurants:
<br>
Burgers:
<label><input type="radio" name="test" value="Garage" /> Burger Garage</label>
<label><input type="radio" name="test" value="Burger" /> Hardee's</label>
<label> <input type="radio" name="test" checked="checked" value="Factory" /> Burger Factory & More</label>
<br>
<select ID="DropDownList2" Height="18px" Width="187px">
<option Value="Factory_Style_1">Turbo Chicken</option>
<option Value="Factory_Style_2">Twin Turbo Chicken</option>
<option Value="Factory_Style_3">Garage Burger</option>
<option Value="Burger_Style_1">Chicken Fille</option>
<option Value="Burger_Style_2">Grilled Chicken Fillet</option>
<option Value="Burger_Style_3">Jalapeno Chicken</option>
<option Value="Garage_Style_1">Original Burger</option>
<option Value="Garage_Style_2">Twin Turbo Chicken</option>
<option Value="Garage_Style_3">Shuwa Burger</option>
</select>
<br>
Desserts:
<label><input type="radio" name="test1" checked="checked" value="Dip" /> Dip N Dip</label>
<label><input type="radio" name="test1" value="Camel" /> Camel Cookies</label>
<label> <input type="radio" name="test1" value="Ravenna" /> Ravenna Kunafa</label>
<br>
<select ID="DropDownList3" Height="18px" Width="187px">
<option Value="Dip_Style_1">Brownies Crepe</option>
<option Value="Dip_Style_2">Fettuccine Crepe</option>
<option Value="Dip_Style_3">Cream Puff Pyramid</option>
<option Value="Camel_Style_1">Brownie Fondant</option>
<option Value="Camel_Style_2">Lotus Pancake</option>
<option Value="Camel_Style_3">Camel Lava</option>
<option Value="Ravenna_Style_1">Konafa With Chocolate</option>
<option Value="Ravenna_Style_2">Konafa Mabrooma With Cheese</option>
<option Value="Ravenna_Style_3">Konafa Mabrooma With Cream</option>
</select>
<br>
Beverages:
<option>Dr.Shake</option>
<option>Juice Lab</option>
<option>Aseer Time</option>
<label><input type="radio" name="test2" checked="checked" value="Dr" />Dr.Shake</label>
<label><input type="radio" name="test2" value="Juice" /> Juice Lab</label>
<label> <input type="radio" name="test2" value="Aseer" /> Aseer Time</label>
<br>
<select ID="DropDownList4" Height="18px" Width="187px">
<option Value="Dr_Style_1">Pressure Milkshake</option>
<option Value="Dr_Style_2">Thermometer Milkshake</option>
<option Value="Dr_Style_3">Brain Recovery Milkshake</option>
<option Value="Juice_Style_1">G Lab</option>
<option Value="Juice_Style_2">Summer Vimto</option>
<option Value="Juice_Style_3">Summer Bubble Gum</option>
<option Value="Aseer_Style_1">Hormone Happiness</option>
<option Value="Aseer_Style_2">The King</option>
<option Value="Aseer_Style_3">Berry Smothey</option>
</select>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
(function(){
var options = $("#DropDownList2").html();
$('#DropDownList2 :not([value^="Fac"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList2").html(options);
$('#DropDownList2 :not([value^="' + text.substr(0, 3) + '"])').remove();});
})();
(function(){
var options = $("#DropDownList3").html();
$('#DropDownList3 :not([value^="Dip"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList3").html(options);
$('#DropDownList3 :not([value^="' + text.substr(0, 3) + '"])').remove();});
})();
(function(){
var options = $("#DropDownList4").html();
$('#DropDownList4 :not([value^="Dr"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList4").html(options);
$('#DropDownList4 :not([value^="' + text.substr(0, 3) + '"])').remove();});
})();
</script>
</body>
</html>

The issue is that you have 3 functions that largely do the same thing and they all share the same variable. Instead of 3 functions that work on one element each, make one function that works on all 3 elements.
Note that no ids are needed here, just classes to organize the sets of radio buttons with the matching option elements.
See the comments inline:
<!DOCTYPE html>
<html>
<head>
<title>Order Selection</title>
<style>
/* Do all your styling in CSS not inline with the HTML */
select { width:187px; display:block; margin:10px; }
.hidden { display:none; }
fieldset { margin-top:1em; margin-bottom:1em; }
legend { font-weight:bold; }
</style>
</head>
<body>
<h1>Availabe Restaurants:</h1>
<fieldset>
<legend>Burgers:</legend>
<label><input type="radio" name="burgers" value="Garage"> Burger Garage</label>
<label><input type="radio" name="burgers" value="Burger"> Hardee's</label>
<label><input type="radio" name="burgers" value="Factory"> Burger Factory & More</label>
<select name="burgers">
<option value="">--- Select Burger ---</option>
<option class="Garage" value="Garage_Style_1">Original Burger</option>
<option class="Garage" value="Garage_Style_2">Twin Turbo Chicken</option>
<option class="Garage" value="Garage_Style_3">Shuwa Burger</option>
<option class="Burger" value="Burger_Style_1">Chicken Fille</option>
<option class="Burger" value="Burger_Style_2">Grilled Chicken Fillet</option>
<option class="Burger" value="Burger_Style_3">Jalapeno Chicken</option>
<option class="Factory" value="Factory_Style_1">Turbo Chicken</option>
<option class="Factory" value="Factory_Style_2">Twin Turbo Chicken</option>
<option class="Factory" value="Factory_Style_3">Garage Burger</option>
</select>
</fieldset>
<fieldset>
<legend>Beverages:</legend>
<label><input type="radio" name="beverages" value="Dr" />Dr.Shake</label>
<label><input type="radio" name="beverages" value="Juice"> Juice Lab</label>
<label> <input type="radio" name="beverages" value="Aseer"> Aseer Time</label>
<select name="beverages">
<option value="">--- Select Beverage ---</option>
<option class="Dr" value="Dr_Style_1">Pressure Milkshake</option>
<option class="Dr" value="Dr_Style_2">Thermometer Milkshake</option>
<option class="Dr" value="Dr_Style_3">Brain Recovery Milkshake</option>
<option class="Juice" value="Juice_Style_1">G Lab</option>
<option class="Juice" value="Juice_Style_2">Summer Vimto</option>
<option class="Juice" value="Juice_Style_3">Summer Bubble Gum</option>
<option class="Aseer" value="Aseer_Style_1">Hormone Happiness</option>
<option class="Aseer" value="Aseer_Style_2">The King</option>
<option class="Aseer" value="Aseer_Style_3">Berry Smothey</option>
</select>
</fieldset>
<fieldset>
<legend>Desserts:</legend>
<label><input type="radio" name="desserts" value="Dip"> Dip N Dip</label>
<label><input type="radio" name="desserts" value="Camel"> Camel Cookies</label>
<label> <input type="radio" name="desserts" value="Ravenna"> Ravenna Kunafa</label>
<select name="desserts">
<option value="">--- Select Dessert ---</option>
<option class="Dip" value="Dip_Style_1">Brownies Crepe</option>
<option class="Dip" value="Dip_Style_2">Fettuccine Crepe</option>
<option class="Dip" value="Dip_Style_3">Cream Puff Pyramid</option>
<option class="Camel" value="Camel_Style_1">Brownie Fondant</option>
<option class="Camel" value="Camel_Style_2">Lotus Pancake</option>
<option class="Camel" value="Camel_Style_3">Camel Lava</option>
<option class="Ravenna" value="Ravenna_Style_1">Konafa With Chocolate</option>
<option class="Ravenna" value="Ravenna_Style_2">Konafa Mabrooma With Cheese</option>
<option class="Ravenna" value="Ravenna_Style_3">Konafa Mabrooma With Cream</option>
</select>
</fieldset>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
// Hide the dropdown lists until a radio button selection is made
$("select").hide();
// Set up a change event handler for each of the radio buttons
$('input:radio').on("change", updateChoices);
function updateChoices(e) {
// Show the appropriate list based on the name of the radio button that was changed
$('select[name="' + this.name + '"]').show();
// Reset any previously selected option in the list back to the default
$('select[name="' + this.name + '"]').val($('select[name="' + this.name + '"] option:first').val());
// Update the <option> elements in the corresponding <select>
$('select[name="' + this.name + '"] option').each(function(index,element){
// If the option has the same class as the radio button that was changed...
if($(element).hasClass(e.target.value)){
$(element).show(); // Show the option
} else {
$(element).hide(); // Hide the option
}
});
}
</script>
</body>
</html>

It's a common global variable conflict issue. You can (must) wrap them all to self-executing function, which will keep all declared variables inside its own.
(conflict):
var test = $('#btn-1').text();
$('#btn-1').on('click', function(){ console.log( test ); });
var test = $('#btn-2').text();
$('#btn-2').on('click', function(){ console.log( test ); });
var test = $('#btn-3').text();
$('#btn-3').on('click', function(){ console.log( test ); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-1">111</button>
<button id="btn-2">222</button>
<button id="btn-3">333</button>
(no conflict):
(function(){
var test = $('#btn-1').text();
$('#btn-1').on('click', function(){ console.log( test ); });
})();
(function(){
var test = $('#btn-2').text();
$('#btn-2').on('click', function(){ console.log( test ); });
})();
(function(){
var test = $('#btn-3').text();
$('#btn-3').on('click', function(){ console.log( test ); });
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-1">111</button>
<button id="btn-2">222</button>
<button id="btn-3">333</button>
But in your case, at least would be better to run everything in loop (or adding a general class for all elements and loop with $('.class').each(function(){/*...*/})):
for( var i = 2; i < 5; i++ ){
doStuff( i );
}
function doStuff( index ){
var options = $("#DropDownList" + index).html();
$('#DropDownList' + index + ' :not([value^="Dr"])').remove();
$('input:radio').change(function(e) {
var text = $(this).val();
$("#DropDownList" + index).html(options);
$('#DropDownList' + index + ' :not([value^="' + text.substr(0, 3) + '"])').remove();
});
}
Here was used the function as well, to "keep" variables inside.

How can i disable my input and the content inside using a selected option

I have looked around and haven't found a solution to my problem, I am trying to learn javascript and jquery. what I want to learn is how can I do so when I select the option "none" the <input> and the data inside it, should be disabled.
this is my attempts:
First attempt link:http://jsfiddle.net/kmtLy705/7/
First attempt code: (Works with buttons)
<input disabled id="page_navigation1" type="number">
<button class="add">Add</button>
<button class="remove">Remove</button>
<select>
<option value="0" class="add" selected>None</option>
<option value="1" class="remove">select</option>
<option value="2" class="remove">select</option>
<option value="3" class="remove">select</option>
<option value="4" class="remove">select</option>
<option value="5" class="remove">select</option>
</select>
jquery
$('.add').click(function() {
$('#page_navigation1').attr('disabled', true)
});
$('.remove').click(function() {
$('#page_navigation1').removeAttr('disabled');
});
Now, this code works with buttons but I have tried countless ways to make it work with an option and haven't found a solution yet.
Second attempt link: http://jsfiddle.net/5u9pfot0/1/ this doesn't work at all but the idea was there (when val1 is selected then the input should be disabled)
Second attempt code:
<select id="selectid" name="selectname">
<option value="val1" id="valid1"> Val1 </option>
<option value="val2" id="valid2"> Val2 </option>
<option value="val3" id="valid3"> Val3 </option>
</select>
<input disabled id="page_navigation1" type="number">
jquery:
if (document.getElementById('selectid').value == "val1") {
$('#page_navigation1').attr('disabled', true)
}

I have modified your second approach just a little.
Try doing below:
function callthis()
{
if (document.getElementById('selectid').value == "val1") {
$('#page_navigation1').attr('disabled', true);
}
else
$('#page_navigation1').attr('disabled', false);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="selectid" name="selectname" onchange="callthis();">
<option default disabled>Choose one</option>
<option value="val1" id="valid1"> Val1 </option>
<option value="val2" id="valid2"> Val2 </option>
<option value="val3" id="valid3"> Val3 </option>
</select>
<input disabled id="page_navigation1" type="number">

if choose this option and this option change to 3 option

I have a table rows (this is not real, this is only example for simple it):
id, cat, company, device.
for example some recordes:
1, computer, samsung, ativ
2, computer, lg, blabla
3, phones, samsung, s6
4, phones, sony, z5
I want that if I choose category (computer for example) this will open only the company that they have computer, In addition, when the user select the second select, this will give the option that remain.
I found here the answer for the first select but for the second I did find.
I dont want to do "if ..., if ..." because this is need to be from the database and automatic.
This is the example that i did:
http://jsfiddle.net/e464etcq/
HTML:
<select class="form-control" id="type" name="type">
<option value="">choose</option>
<option value="1">phones</option>
<option value="2">computers</option>
</select>
<select class="form-control" id="reason" name="reason">
<option value="">choose</option>
<option value="1" class="1">samsung</option>
<option value="2" class="1">lg</option>
<option value="3" class="2">samsung</option>
<option value="3" class="2">sony</option>
</select>
<input type="text" id="billing">
JQUERY:
jQuery(function($) {
var backupShipStates = $("#reason").html();
$("#type").change(function() {
var country = $(this).val();
var options = $(backupShipStates).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == country; });
$("#reason").html(options);
});
});
do you have any suggition how to do it?
Thank you,
Omry.

If I've understand you, you could add a new change event to handle when the second select is changed.
So your code would be:
HTML
<select class="form-control" id="type" name="type">
<option value="">בחר</option>
<option value="1">phones</option>
<option value="2">computers</option>
</select>
<select class="form-control" id="reason" name="reason">
<option value="">choose</option>
<option value="1" class="1">samsung</option>
<option value="2" class="1">lg</option>
<option value="3" class="2">samsung</option>
<option value="3" class="2">sony</option>
</select>
<select class="form-control" id="third" name="third">
<option value="">choose</option>
<option value="1" class="1">Option3.1</option>
<option value="2" class="1">Option3.2</option>
<option value="3" class="2">Option3.3</option>
<option value="3" class="2">Option3.4</option>
</select>
<input type="text" id="billing">
jQuery
jQuery(function($) {
var backupShipStates = $("#reason").html();
var backupOption3 = $("#third").html();
$("#type").change(function() {
var country = $(this).val();
var options = $(backupShipStates).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == country; });
$("#reason").html(options);
});
$("#reason").change(function(){
var reason = $(this).val();
var options = $(backupOption3).filter(function() {
return !$(this).attr("class") || $(this).attr("class") == reason; });
$("#third").html(options);
});
});
Here is not necessary PHP.

Html/Javascript form calculation and validation in new page

I'm working on a website project and really need help as I'm new to all this. I'm basically given values to every option in the drop down menu's and make them add together which I've managed. But then I want to the total value from the menus to then be the range for a pseudo random to be a generated and added to the age I input.
When I hit submit I'd like it to calculate all that and display the result on a new page. I want to be able to do all this within javascript and html.
Any help would be greatly appreciated! My coding is below. Thanks so much!
<body>
<form id="form1" action="" method="post" onsubmit="return calcTotal(this)">
<select name=select1>
<option selected="selected" value="0">Chinese Zodiac</option>
<option value="3">Rat</option>
<option value="3">Ox</option>
<option value="4">Tiger</option>
<option value="2">Rabbit</option>
<option value="4">Dragon</option>
<option value="5">Snake</option>
<option value="3">Horse</option>
<option value="3">Sheep</option>
<option value="4">Monkey</option>
<option value="5">Rooster</option>
<option value="3">Dog</option>
<option value="3">Pig</option>
</select>
</select>
<br />
<select name=select2>
<option selected="selected" value="0">Star Sign</option>
<option value="2">Aries</option>
<option value="4">Taurus</option>
<option value="3">Gemini</option>
<option value="4">Cancer</option>
<option value="3">Leo</option>
<option value="2">Virgo</option>
<option value="2">Libra</option>
<option value="3">Scorpio</option>
<option value="2">Sagittarius</option>
<option value="4">Capricorn</option>
<option value="2">Aquarius</option>
<option value="3">Pisces</option>
</select>
<br />
<select name=select3>
<option selected="selected" value="0">Blood Type</option>
<option value="3">O</option>
<option value="2">A</option>
<option value="1">B</option>
<option value="3">AB</option>
</select>
<br />
<select name=select4>
<option selected="selected" value="0">Favourite Colour</option>
<option value="3">Black</option>
<option value="3">Blue</option>
<option value="2">Brown</option>
<option value="2">Green</option>
<option value="3">Orange</option>
<option value="3">Pink</option>
<option value="2">Purple</option>
<option value="4">Red</option>
<option value="2">Yellow</option>
<option value="2">White</option>
<option value="5">Other</option>
</select>
<br />
Age<input name="" type="number" value="" />
<br />
<input name="" type="submit" value="Total" />
<span>Total: </span><span id="result"></span>
</form>
<script type="text/javascript">
function calcTotal(oForm){
var sum = 0;
for(i=0; i < oSels.length; i++){
sum += new Number(oSels[i].value);
}
document.getElementById('result').innerHTML = sum;
return false;
}
window.onload=function(){
oSels = document.getElementById('form1').getElementsByTagName('select');
for(i=0; i < oSels.length; i++){
oSels[i].onchange=function(){
document.getElementById('result').innerHTML = '';
}
}
}
</script>

I played with your code. I don't now if it's someting like that that you wanted but here is an example of random score.
It now use the age to generate a value.
Take a look if you like it at my codepen.
I changed the age input:
Age<input id="age" name="" type="number" value="" />
I also added a new function to generate random number between min-max:
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
And modified how the sum is calculated:
var age = document.getElementById('age').value;
sum = parseInt(age) + parseInt(getRandomInt(sum-(age / 4),sum+(age / 4)));
//Add some random. The more you are older, the more random it is.
You can do a lot of different generated sum. If you want less modifications, we also can take the last digit of the age to get the min/max value generated...
Edit:
To help you share variables between pages, Look at this question.

Adding this as an answer as the submitter considers it a good idea:
Put the result from all your maths into hidden fields. Then when you submit the form, the values will be passed along.
You don't need to do anything special really. Just add fields like this:
<input type="hidden" value="[yourValue]" name="fieldName" id="fieldId" />
For the yourValue part, simply insert your caclulated value from the JavaScript:
document.getElementById("fieldId").value = calculatedValue;
Since it's all part of the same form that you're submitting anyway, they will all be past along. You can retrieve the fields on the receiving page as normal.
I downloaded and edited your entire code block. I changed a couple of things.
1. You don't need the onsubmit on your form. You need a call the JavaScript function on a Total button. The submit button is added to submit the form when the user is done.
2. A hidden field to hold your result is added to the form.
3. The function where you do your calculation has an addition to send the calulated total to the new hidden field.
4. You need to add something to the ACTION, so it knows where to submit the form. You can also remove the ALERT. I just added that to be sure it worked right.
I've run and tested this, and it works exactly as expected. This is what the edited code looks like:
<body>
<form id="form1" action="" method="post">
<select name=select1>
<option selected="selected" value="0">Chinese Zodiac</option>
<option value="3">Rat</option>
<option value="3">Ox</option>
<option value="4">Tiger</option>
<option value="2">Rabbit</option>
<option value="4">Dragon</option>
<option value="5">Snake</option>
<option value="3">Horse</option>
<option value="3">Sheep</option>
<option value="4">Monkey</option>
<option value="5">Rooster</option>
<option value="3">Dog</option>
<option value="3">Pig</option>
</select>
</select>
<br />
<select name=select2>
<option selected="selected" value="0">Star Sign</option>
<option value="2">Aries</option>
<option value="4">Taurus</option>
<option value="3">Gemini</option>
<option value="4">Cancer</option>
<option value="3">Leo</option>
<option value="2">Virgo</option>
<option value="2">Libra</option>
<option value="3">Scorpio</option>
<option value="2">Sagittarius</option>
<option value="4">Capricorn</option>
<option value="2">Aquarius</option>
<option value="3">Pisces</option>
</select>
<br />
<select name=select3>
<option selected="selected" value="0">Blood Type</option>
<option value="3">O</option>
<option value="2">A</option>
<option value="1">B</option>
<option value="3">AB</option>
</select>
<br />
<select name=select4>
<option selected="selected" value="0">Favourite Colour</option>
<option value="3">Black</option>
<option value="3">Blue</option>
<option value="2">Brown</option>
<option value="2">Green</option>
<option value="3">Orange</option>
<option value="3">Pink</option>
<option value="2">Purple</option>
<option value="4">Red</option>
<option value="2">Yellow</option>
<option value="2">White</option>
<option value="5">Other</option>
</select>
<br />
Age<input name="" type="number" value="" />
<br />
<input name="" type="button" value="Total" onclick="calcTotal();" />
<input name="submit" type="submit" value="Submit" />
<span>Total: </span><span id="result"></span>
<input type="hidden" value="0" name="resultIs" id="resultIs" />
</form>
<script type="text/javascript">
function calcTotal(oForm) {
var sum = 0;
for (i = 0; i < oSels.length; i++) {
sum += new Number(oSels[i].value);
}
//This is what you are using to display the result to your user.
document.getElementById('result').innerHTML = sum;
//This will add the value of the result to a hidden field I added to the form. When you submit it, just request the value of "resultIs"
document.getElementById("resultIs").value = sum;
alert(sum);
return false;
}
//I really don't even see that this is needed. Your form doesn't need to be cleared onLoad.
window.onload = function() {
oSels = document.getElementById('form1').getElementsByTagName('select');
for (i = 0; i < oSels.length; i++) {
oSels[i].onchange = function() {
document.getElementById('result').innerHTML = '';
}
}
}
</script>