How do I get my checkbox values and option values

I'm trying to make a checkout/shopping page, where you can select what you want to buy, choose your shipping price and when you click calculate shipping the full price for what you have selected will appear in the text area.

I have 3 check boxes with three different values & 3 options with three different values. I want to be able to add up the selected checkbox and option and I want the sum (answer) to be displayed in my textarea at the bottom of the page. The answer will pop in the text area once a button is pressed. My buttons id is #button.

How can this be done with javascript?

If anyone knows how to do this it would be greatly appreciated, I am learning how to use javascript and I would find reading your solutions a very useful way to learn.

Here is a snippet from my html:

<body>
<form action="script.php" method="get" id="myform">
<h1>Select a product below:</h1>

<div>

<p>Product 1</p> &#8364;25.00<input type = "checkbox" name = "25" value = "25" id="cb1" class="sum"><br>
<p>Product 2</p> &#8364;50.00<input type = "checkbox" name = "50" value = "50" id="cb2" class="sum">   <br>
<p>Product 3</p> &#8364;100.00<input type = "checkbox" name = "100" value = "100" id="cb3"                 class="sum">

</div>

<h2>
Where do you want the products delievered to:   
</h2>

<div><select>
<option value="select">Select a shipping option..</option>
<option value="2">Ireland (2.00)</option>
<option value="3">Rest of Europe (3.00)</option>
<option value="7">Rest of World (7.00)</option>
</select></div>

<div>
<textarea cols="20" rows="1" id="shipping">Shipping</textarea>
</div>

<input type = "submit" 
value = "Calculate Shipping"
id="button"
>
</form>
</body>

here is my css:

h1{
font-weight: normal;
font-size: 20px;
margin-top: 50px;
margin-left: 50px;
}

p{
margin-left: 50px;
margin-right: 80px;
font-size: 20px;
font-weight: normal;
display: inline-block;}

input{
display: inline-block;
}

h2{
font-weight: normal;
font-size: 20px;
margin-left: 50px;
display: inline-block;
float: left;
}

select{
display: inline-block;
margin-top: 20px;
margin-left: 20px;
}

body {
font-size: 20px;
}

#shipping{
margin-left: -370px;
margin-top: 20px;
font-family: arial;
display: inline-block;
}

#button{
display: inline-block;
float: right;
margin-right: 1000px;
margin-top: -26px;
}

textarea {resize: none;}

Sorry about the length of my question, would be great if someone could help me out :)

回答1:

You can use Javascript to do this. Use Jquery to get all the values of your inputs, sum them and use Jquery to set them to the textarea.

var numbers = $("input:checked").val();
var sum = numbers.reduce(function(sum, i) { return sum + i}, 0);

$("#shipping").val(sum);

回答2:

If you're using button type submit then it will submit the form to script.php unless you prevent it from submitting using javascript.

I suggest you make the #button type just button instead of submit.

to calculate you can use javascript something like this

var inputs, index, sum;
sum = 0;
inputs = document.getElementsByTagName('input');
for (index = 0; index < inputs.length; ++index) {
    // deal with inputs[index] element.
    var el = inputs[index];
    if (el.type && el.type === 'checkbox' && el.checked) {
        sum += inputs[index].value;
    }
}

Also you should use appropriate names for checkboxes, as they will be referenced in scripts.php on actual form submit.