Solved

Javascript Checkboxes & Drop Down Populate Hidden Field

Posted on 2004-04-11
5
1,480 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
jQuery on click requires double click 6 28
converting document.write() to innerHTML 7 43
Link Anchor Not working 9 42
modify change color of text 9 33
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
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…

679 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