dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: Connecting a select with an input

  1. #1
    Join Date
    Aug 2016
    Posts
    3

    Connecting a select with an input

    Hey everyone an
    i need help with this project
    so im doing this kind of web form where you could order something online
    so amongst the elements i put in it,i put this <select> where each one of the options are types of meat and each type of meat has its own price of cost, so the next input is the number only input where you select the ammount of meat youd like to order,and for example if you select "ribs" i would assign it as lets say 10 dollars per kilogram,so in this case the number selected in the input for example 8,would multiply instantly with the price of the variable and give the printout 80 dollars (8 * 10)
    Some version of the code were looking:
    var ribs = 10; (the variable of the meat could be easier to understand if i could assign its value directly in the value property of a <select>,could be a local variable or a global,cant work it out
    <input type="number">
    bla bla bla
    function someFunction() {
    i need help with this part how do i chain whatever is selected to the <select> with the numeric input?
    }

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,439
    try this as an example
    [code]<!DOCTYPE html>
    <html>
    <head>
    <title>Meat</title>

    <script>
    meat = { name:"", kg:0, qty:0};
    function calcMeat( m ){

    switch (m.name){

    case "meatType":
    meat.name = m.options[ m.selectedIndex ].text;
    meat.kg = m.options[ m.selectedIndex ].value;
    console.log("Meat Selected = " + meat.name);
    console.log("Meat price = " + meat.kg + " per Kilo");
    break;
    case "meatQty":
    meat.qty = m.options[ m.selectedIndex ].value;
    console.log("Meat Quanty = " + meat.qty);
    break;
    case "meats":
    if( meat.kg<=0 || meat.qty<=0 ){
    console.log("> nothing to do");
    }else{
    meat.total = Math.round( (meat.kg * meat.qty) * 100 ) / 100;

    tmp = "Meat Total @ " + meat.kg + " per Kilo for "+ meat.qty+" Kg "+ meat.name + " meat pack = " + meat.total;
    console.log(">> "+tmp);
    m.total.value = tmp;
    }
    break;


    }
    }
    </script>
    </head>
    <body>
    <form name="meats" action="javascript:;" enctype="plain/text" onsubmit="calcMeat(this); return false;">
    <select name="meatType" onchange="calcMeat(this);">
    <option value="-1" selected>Select your Meat</option>
    <option value="7.99" >Beef</option>
    <option value="5.99" >Pork</option>
    <option value="3.99" >Chicken</option>
    <option value="1.99" >Lamb</option>
    </select>
    <br>
    <select name="meatQty" onchange="calcMeat(this);">
    <option value="-1" selected>Select your pack size</option>
    <option value="1.0" >1 Kg</option>
    <option value="1.5" >1.5 Kg</option>
    <option value="2.5" >2.5 Kg</option>
    <option value="4.5" >4.5 Kg</option>
    </select>
    <br>

    <input name="Submit" type="submit" value="Calc">%0
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,439
    I got the error again... its something to do with the forum [ code ] [ html ] , etc tags
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,439
    The missing bit, the %0 is not in the code.

    <input name="total" type="text" value="" size="64" readonly>
    </form>

    </body>
    </html>
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles