Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Apr 2010
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Adding a dropdown menu

    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:-

    Code:
    <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>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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.

  • Users who have thanked Philip M for this post:

    signman (12-27-2010)

  • #3
    New Coder
    Join Date
    Apr 2010
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    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

  • #5
    New Coder
    Join Date
    Apr 2010
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

    Code:
    <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>

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    <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.

  • Users who have thanked Philip M for this post:

    signman (12-27-2010)

  • #7
    New Coder
    Join Date
    Apr 2010
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,910
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by signman View Post
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •