SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Select Option Values Written into Two Hidden Fields

    I am trying to pass 2 hidden values from the selected option drop down option.

    For example, here is the html for the drop-down:

    <select name="description1"/>
    <option value="">Select a category</option>
    <option value="3563" >Disaster Relief Fund</option>
    <option value="3564">New Turbine DC-3</option>
    <option value="3551">DC-3 Repaint Project</option>
    </select>
    <input type="submit" value="Continue" name="order" />

    I need "description1" to be passed as the text (or hidden text) "Disaster Relief Fund" and I need a separate hidden text "item1" to be passed as "3563".

    Anybody know how to do this with javascript or just html?

    Thanks!

  2. #2
    Non-Member
    Join Date
    Jan 2011
    Location
    Heaven
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can use DOM methods to take the values you need from the select list and then set them to the values of hidden textboxes.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Code html4strict:
    <form id="descriptiveFormName">
        ...
        <input type="hidden" name="descValue">
        <input type="hidden" name="descText">
    </form>

    Code javascript:
    var form = document.getElementById('descriptiveFormName');
    form.elements.description1.onchange = function () {
        var option = this.options[this.selectedIndex];
        this.form.elements.descValue.value = option.value;
        this.form.elements.descText.value = option.innerHTML;
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here's another way to do it. The two hidden values are shown as an alert() when the script runs.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Populate hidden variables from select</title>
    <script type="text/javascript">
    <!--
    function process(formObj)
     { var F=formObj.description1;
       // check for valid selection
         if(F.selectedIndex==0){return;}
          // ------
       formObj.hidden1.value=F.options[F.selectedIndex].value;
       formObj.hidden2.value=F.options[F.selectedIndex].text;
       alert("hidden1= "+formObj.hidden1.value);
       alert("hidden2= "+formObj.hidden2.value);
     }
    //-->
    </script>
    </head>
     
    <body>
     
    <form name="myForm">
      <p><select name="description1" onchange="process(this.form)">
      <option value>Select a category</option>
      <option value="3563">Disaster Relief Fund</option>
      <option value="3564">New Turbine DC-3</option>
      <option value="3551">DC-3 Repaint Project</option>
      </select> <input type="button" value="Submit" name="order" disabled></p>
      <input type="hidden" value="0" name="hidden1">
      <input type="hidden" value="0" name="hidden2">
    </form>
    <!-- end myForm -->
     
    </body>
     
    </html>

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by AllanP View Post
    Here's another way to do it. The two hidden values are shown as an alert() when the script runs.
    A significant problem with that technique though is that you are then using inline scripting events, which is quite a no-no these days.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Jan 2011
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This passes just the "description1" option value, not text. And doesn't pass anything for "item1" field. What error did I make? Thanks!

    Here's the javascript code:

    var form = document.getElementById('pay');
    form.elements.description1.onchange = function () {
    var option = this.options[this.selectedIndex];
    this.form.elements.item1Value.value = option.value;
    this.form.elements.description1Text.value = option.innerHTML;
    }

    And, then the html:
    <form name=pay id=pay>
    <select name="description1">
    <option>Select a category</option>
    <option value="3653">Disaster Relief Fund</option>
    <option value="3654">New Turbine DC-3</option>
    <option value="3551">Repaint DC-3 Project</option></select>
    <input type="hidden" name="description1" />
    <input type="hidden" name="item1"/>
    <input type="submit" name="order" value="Continue" /></form>

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Is the script running after the form is available? If you run the script before the form exists, the script cannot obviously do anything with the form.
    Apply the best-practice of putting your scripts at the bottom of the page, just before the </body> tag, and that will help a lot.

    Where you have item1Value and description1Text, those should be the names of the form fields, such as item1 and description1

    Also, the name="pay" part is not needed, and can even be confusing when left there. You'll be best to get rid of that as well.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Here are those suggestions built into the code. Several areas needed changing. You can see these if you compare your previous code with this new code. You also need an action attribute before you can submit the form, and to change my button back to a submit button after removing the disabled attribute. The alerts are included so that you can see the result of saving the values.

    Code :
    <!doctype HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     
    <head>
     
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Save hidden variables in form</title>
    </head>
     
    <body>
     
    <!-- no action attribute yet set for this form -->
    <form id="pay">
      <p><select name="description1">
      <option>Select a category</option>
      <option value="3653">Disaster Relief Fund</option>
      <option value="3654">New Turbine DC-3</option>
      <option value="3551">Repaint DC-3 Project</option>
      </select> <input type="hidden" name="hidden1">
      <input type="hidden" name="item1">
      <input type="button" name="order" value="Continue" disabled></p>
    </form>
    <script type="text/javascript">
    <!--
       var form = document.getElementById("pay");
       form.elements.description1.onchange = function () {
       //check for invalid selection
       if(this.selectedIndex==0){return; }
        // --------
       var option = this.options[this.selectedIndex];
    // --- changes here --
       this.form.elements.item1.value = option.value;
    // --- changes here --
       this.form.elements.hidden1.value = option.innerHTML;
    // --- added this for info only ---
       alert("hidden1= "+this.form.elements.hidden1.value);
       alert("item1= "+this.form.elements.item1.value);
       }
    //-->
    </script>
     
    </body>
     
    </html>


Tags for this Thread

Bookmarks

Posting Permissions

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