Solved

Javascript Checkboxes & Drop Down Populate Hidden Field

Posted on 2004-04-11
5
1,478 Views
Last Modified: 2007-12-19
I need a function that "onChange" will write to my hidden fields (multiple values/selections ok).  There is a hidden text field for the checkboxes and one for the drop down.  Any help someone could provide would be appreciated. Thank you

<html>
<head>
<title>What I want to eat</title>
</head>

<body>
<form name="pick_up_request_form">
<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Steak
      <input name="whatIWantToEat" type="checkbox" id="whatIWantToEat" value="checkbox"></td>
  </tr>
  <tr>
    <td>Pizza
      <input name="whatIWantToEat" type="checkbox" id="whatIWantToEat" value="checkbox"></td>
  </tr>
  <tr>
    <td>Spaghetti
      <input name="whatIWantToEat" type="checkbox" id="whatIWantToEat" value="checkbox"></td>
  </tr>
  <tr>
    <td>Dog Food
      <input name="whatIWantToEat" type="checkbox" id="whatIWantToEat" value="checkbox"></td>
  </tr>
  <tr>
    <td>Lobster
      <input name="whatIWantToEat" type="checkbox" id="whatIWantToEat" value="checkbox"> <input name="whatIWantToEatSelection" type="hidden" id="whatIWantToEatSelection"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><select name="select">
      <option selected>--Select One--</option>
      <option value="Steak">Steak</option>
      <option value="Pizza">Pizza</option>
      <option value="Spaghetti">Spaghetti</option>
      <option value="Dog Food">Dog Food</option>
      <option value="Lobster">Lobster</option>
    </select> <input name="whatIWantToEatSelection2" type="hidden" id="whatIWantToEatSelection2"></td>
  </tr>
</table>
</form>
</body>
</html>
0
Comment
Question by:xcusmwah
  • 2
5 Comments
 
LVL 1

Accepted Solution

by:
bkiahg earned 50 total points
ID: 10803891
Not sure why you would want to do this but...

<html>
<head>
<title>What I want to eat</title>
</head>

<body>
<form name="pick_up_request_form">
<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Steak
      <input name="whatIWantToEat" type="checkbox" id="whatIWantToEat" value="checkbox" onClick="JavaScript:document.pick_up_request_form.whatIWantToEatSelection.value='Steak'"></td>
  </tr>
  <tr>
    <td>Pizza
      <input name="whatIWantToEat" type="checkbox" id="whatIWantToEat" value="checkbox" onClick="JavaScript:document.pick_up_request_form.whatIWantToEatSelection.value='Pizza'"></td>
  </tr>
  <tr>
    <td>Spaghetti
      <input name="whatIWantToEat" type="checkbox" id="whatIWantToEat" value="checkbox" onClick="JavaScript:document.pick_up_request_form.whatIWantToEatSelection.value='Spaghetti'"></td>
  </tr>
  <tr>
    <td>Dog Food
      <input name="whatIWantToEat" type="checkbox" id="whatIWantToEat" value="checkbox" onClick="JavaScript:document.pick_up_request_form.whatIWantToEatSelection.value='Dog Food'"></td>
  </tr>
  <tr>
    <td>Lobster
      <input name="whatIWantToEat" type="checkbox" id="whatIWantToEat" value="checkbox" onClick="JavaScript:document.pick_up_request_form.whatIWantToEatSelection.value='Lobster'">
<input name="whatIWantToEatSelection" type="text" id="whatIWantToEatSelection"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><select name="select" onChange="JavaScript: document.pick_up_request_form.whatIWantToEatSelection2.value=document.pick_up_request_form.select.value">
      <option selected>--Select One--</option>
      <option value="Steak">Steak</option>
      <option value="Pizza">Pizza</option>
      <option value="Spaghetti">Spaghetti</option>
      <option value="Dog Food">Dog Food</option>
      <option value="Lobster">Lobster</option>
    </select> <input name="whatIWantToEatSelection2" type="text" id="whatIWantToEatSelection2"></td>
  </tr>
</table>
</form>
</body>
</html>

Just change the input types back to hidden and viola.
0
 

Author Comment

by:xcusmwah
ID: 10803918
Perfect, thank you
0
 
LVL 1

Expert Comment

by:bkiahg
ID: 10803949
oops missed the multiple fields try this....

<html>
<head>
<title>What I want to eat</title>

<script language=Javascript>
<!--  Start function //
function hidden(add_value, form_name)  {
      if (form_name.checked)  {
            document.pick_up_request_form.whatIWantToEatSelection.value = document.pick_up_request_form.whatIWantToEatSelection.value + add_value + " ";
      }
      else  {
            my_selec = document.pick_up_request_form.whatIWantToEatSelection.value;
            add_value = add_value + " ";
            testing_array = my_selec.split(add_value);
            document.pick_up_request_form.whatIWantToEatSelection.value = testing_array[0] + testing_array[1];
      }
      // document.pick_up_request_form.whatIWantToEatSelection.value
}
// End -->
</script>
</head>

<body>
<form name="pick_up_request_form">
<table width="600" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>Steak
      <input name="whatIWantToEat1" type="checkbox" id="whatIWantToEat" value="checkbox" onClick="JavaScript: hidden('Steak', this);"></td>
  </tr>
  <tr>
    <td>Pizza
      <input name="whatIWantToEat2" type="checkbox" id="whatIWantToEat" value="checkbox" onClick="JavaScript: hidden('Pizza', this);"></td>
  </tr>
  <tr>
    <td>Spaghetti
      <input name="whatIWantToEat3" type="checkbox" id="whatIWantToEat" value="checkbox" onClick="JavaScript: hidden('Spaghetti', this);"></td>
  </tr>
  <tr>
    <td>Dog Food
      <input name="whatIWantToEat4" type="checkbox" id="whatIWantToEat" value="checkbox" onClick="JavaScript: hidden('Dog Food',this);"></td>
  </tr>
  <tr>
    <td>Lobster
      <input name="whatIWantToEat5" type="checkbox" id="whatIWantToEat" value="checkbox" onClick="JavaScript: hidden('Lobster',this);">
<input name="whatIWantToEatSelection" type="text" id="whatIWantToEatSelection"></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td><select name="select" onChange="JavaScript: document.pick_up_request_form.whatIWantToEatSelection2.value=document.pick_up_request_form.select.value">
      <option selected>--Select One--</option>
      <option value="Steak">Steak</option>
      <option value="Pizza">Pizza</option>
      <option value="Spaghetti">Spaghetti</option>
      <option value="Dog Food">Dog Food</option>
      <option value="Lobster">Lobster</option>
    </select> <input name="whatIWantToEatSelection2" type="text" id="whatIWantToEatSelection2"></td>
  </tr>
</table>
</form>
</body>
</html>
0

Featured Post

Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

803 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question