?
Solved

Javascript Checkboxes & Drop Down Populate Hidden Field

Posted on 2004-04-11
5
Medium Priority
?
1,497 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
3 Comments
 
LVL 1

Accepted Solution

by:
bkiahg earned 200 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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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'…
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses

850 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