Adding a dropdown menu

signman

12-27-2010, 09:15 AM

Hello, how would I add a drop down menu please? so that the values of the dropdown still add to the running total.

The code I have is:-

<html>
<head></head>
<body>
<form name=theForm onclick=getTotal() >
<div class="item">
<input name="WP" type="radio" value="99~~Package1"> Buying the rings at 1 location <br>
<input name="WP" type="radio" checked value="~~Cancel"> Cancel<br>
<br>
<input name="P" type="radio" value="99~~Package1"> Buying the Grooms' outfit at 1 location <br>
<input name="P" type="radio" checked value="~~Cancel"> Cancel<br>
<br>
<input name="a" type="radio" value="99~~Package1"> Buying the Brides' dress at 1 location <br>
<input name="a" type="radio" checked value="~~Cancel"> Cancel<br>
<br>
<input name="b" type="radio" value="99~~Package1"> Bride getting ready <br>
<input name="b" type="radio" checked value="~~Cancel"> Cancel<br>
<br>
<input name="d" type="radio" value="99~~Package1"> The Groom getting ready <br>
<input name="d" type="radio" checked value="~~Cancel"> Cancel<br>
<br>
<input name="c" type="radio" value="39~~Package1"> The Groom,guest and family <br>
<input name="c" type="radio" checked value="~~Cancel"> Cancel<br>
<br>
<input name="e" type="radio" value="99~~Package1"> The Wedding ceremony, guests and family afterwards <br>
<input name="e" type="radio" checked value="~~Cancel"> Cancel<br>
<br>
<input name="f" type="radio" value="79~~Package1"> Wedding Breakfast, afternoon reception & speeches <br>
<input name="f" type="radio" checked value="~~Cancel"> Cancel<br>
<br>
<input name="g" type="radio" value="15~~Package1"> Cutting of the cake <br>
<input name="g" type="radio" checked value="~~Cancel"> Cancel<br>
<br>
</form>
<span id=totalspan>
</span>
</body>

<script type=text/javascript>
function getTotal(){
var form=document.theForm;
var inputs=form.getElementsByTagName('input');
var length=inputs.length;
var total='0';

for(i=0;i<length-1;i++){
if(inputs[i].type=='radio'){
var checked=inputs[i].checked?1:0;
if(checked){
var value=inputs[i].value.split("~~")[0];
total-=-value;
}
}
}
document.getElementById('totalspan').innerHTML="<strong>Total price will be: £</strong>"+total
}

</script>

</html>

Philip M

12-27-2010, 10:06 AM

Are you sure that is what you want? Only one option may be selected from each dropdown list. Would not checkboxes be more appropriate?

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

signman

12-27-2010, 11:51 AM

Hi. I see where you're coming from. I have no idea how to do checkboxes though.

Thank you in advance.

Ideally this is what I need below my current code, but appreciate I may have to pay for this code. I would be happy with dropdown boxes to select print size,qty & framed. If not, I will carry on with radio buttons, but feel it may look a bit messy.

PRINT SIZE | QTY | FRAMED

6" X 4" | (DROPDOWN) | YES NO

Philip M

12-27-2010, 06:01 PM

Sorry, I do not see how that has any relation to Buying the Grooms' outfit at 1 location and so on.

Are you saying that you want three select lists:
Select list 1) Several different sizes
Select list 2) Quantity (but what if the user wants 2 of this size and 4 of that size?)
Select list 3) Framed - two options, yes or no

I think you ought to visit w3 schools.com and gather basic information about how to create checkboxes and select lists. This is simple HTML. Then you can come back here to get help with the JavaScript needed to capture the selected values.

Quizmaster: In seafood on a restaurant menu, the French word "poisson" translates into English as what?
Contestant: Chicken

signman

12-27-2010, 06:55 PM

The actual dropdown list I can create, but it's how to link it into the current tally at the bottom I have on my existing code

The dropdown menu refers to actual prints of the wedding required

Select list 1) Size: 6"x4" / 8" x 4" / 13" x 10"
Select list 2) Qty: 10 / 20 / 30 etc....
Select list 3) Framed: Yes / No

I need each option to have a value, but tally up with the first code I have.

I do have a second code which I have tried to modify, but without success

<html>
<body>
<form name="Prints calculator">
Print Size
<select name="selProducts">
<option value="-1">Choose one</option>
<option value="100.00">myProduct</option>
<option value="200.00">mySecondProduct</option>
</select><br>
Quantity<br>
<select name="selQuantity" onchange="calculateTotals();">
<option value="-1">Choose one</option>
<option value="10">10</option>
<option value="20">20</option>
</select><br>
<span id="spnTotal"></span>
</form>
<script>

function calculateTotals(){
var oForm = document.myForm;
var oProducts = oForm.selProducts
var nPrice = oProducts.value
var oQuantity = oForm.selQuantity
var nQuantity = oQuantity.value
document.getElementById('spnTotal').innerHTML = '$' + (nQuantity * nPrice)
}
</script>
</body>
</html>

Philip M

12-27-2010, 08:58 PM

<form name="Prints calculator"> // form name may not include a space
var oForm = document.Printscalculator; // the name of the form, not "myForm".

But what if the user selects something and then goes back to select "Choose One"?

I would like to offer you some helpful advice. You seem to have very little understanding of HTML and Javascript, and your code you have posted screams "amateur". As you appear to be offering a commercial photography service this is a very unwise approach. If your customers wince at the design and utility of your webpage they will suspect that your photography is just as amateurish. Remember - the biggest cost of all to your business is the value of sales you did not make - and there is no ledger acount for that.

If you do not know what you are doing, designing your on website (especially in something involving grahpic arts) is as sensible as it is to generate your own electricity.

signman

12-27-2010, 09:15 PM

I agree. I am going to contact a few people who have answered my request for the form. I really don't know what I am doing, so I shall put it in the hands of an expert.

Philip M

12-28-2010, 09:01 AM

I agree. I am going to contact a few people who have answered my request for the form. I really don't know what I am doing, so I shall put it in the hands of an expert.

How refreshing! Would that many others who approach this forum had the same degree of common sense. :)