www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Submitting two FORM variables by only selecting one dropdown?

  1. #1
    Join Date
    Feb 2010
    Posts
    4

    resolved [RESOLVED] Submitting two FORM variables by only selecting one dropdown?

    Hello,

    I'm looking for a JavaScript solution that will allow me to submit two separate hidden variables by only selecting one dropdown field from a HTML submission form.

    Each option of the dropdown field contains two data values: quantity and price. I'm selling some products online and I'd like to have different prices based on the quantity of the product order.

    Below is the code that I was thinking, though it's not functional... just wanted you to understand what I'm looking for!

    ----------------
    <form name="form1" action="http://www.domain.com/cgi-bin/submit.pl" method="post">

    <select name="quantity">
    <option value="1/10">1 piece ($10 each)
    <option value="2/9">2 pieces ($9 each)
    <option value="3/8">3 pieces ($8 each)
    <option value="4/7">4 pieces ($7 each)
    <option value="5/6">5 pieces ($6 each)
    </select>

    <input type="hidden" name="quantity" value="--QUANTITY SELECTED ABOVE--">
    <input type="hidden" name="price" value="--PRICE ASSOCIATED WITH THE SELECTED QUANTITY--">

    <input type="submit" value="Submit">

    </form>
    ----------------

    Basically the user selects the desired quantity, and after his submission the form will pass me the quantity and the price from the dropdown field in TWO SEPARATE hidden variables.

    I have several such products on a single HTML page, so the solution should be capable of working with multiple product forms on the same page. It's also important that I have only ONE dropdown field, plus the submission button. Nothing else really.

    I have no knowledge of Javascript, and I would really appreciate if you could try to be as explicit as possible. Thank you very much!

    Alexander

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    name of select changed to avoid conflict:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    function moveData(data) {
    var parts = data.split('/');
    var f = document.form1;
    alert(parts[0]+":"+parts[1]);
    f.quantity.value = parts[0];
    f.price.value = parts[1];
    }
    </script>
    
    <style type="text/css">
    * {margin:0;padding:0;}
    </style>
    
    </head>
    <body>
    <form name="form1" action="http://www.domain.com/cgi-bin/submit.pl" method="post">
    
    <select name="quantityprice" onchange="moveData(this.value);">
    <option value="1/10">1 piece ($10 each)
    <option value="2/9">2 pieces ($9 each)
    <option value="3/8">3 pieces ($8 each)
    <option value="4/7">4 pieces ($7 each)
    <option value="5/6">5 pieces ($6 each)
    </select>
    
    <input type="text" name="quantity" value="--QUANTITY SELECTED ABOVE--">
    <input type="text" name="price" value="--PRICE ASSOCIATED WITH THE SELECTED QUANTITY--">
    
    <input type="submit" value="Submit">
    
    </form>
    </body>
    </html>

  3. #3
    Join Date
    Feb 2010
    Posts
    4

    Thumbs up Thank you!

    Thank you very much! It's working great, this is exactly what I've been looking for!

    Alexander

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