Convert javascript to jquery for form with select options

How do you make this code into jquery javascript code? Your help is greatly appreciated.

////////////////////
The original question was http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/HTML/Q_23868468.html
The issue was:
When the user selects a choice, I need the choiceCode which is a1,a2, or a3.
I also need the words "Information" or "Sessions" or "Case Studies" passed via the form also to choiceInfo.

I need where it says:
   <input type="hidden" name="choiceInfo" value="">
For the value to be filled in with the above selection.
One last thing, I would like to actually *not* use the submit button, and just have onChange submit the form.
////////////////////

And now I would like to see this solution as jquery ... is this possible?
Thank you!

<script type="text/javascript">
function setValue()
{
var form=document.getElementById('choice');
form['choiceInfo'].value=form['choiceCode'].getElementsByTagName('option')[form['choiceCode'].selectedIndex].innerHTML; 
form.submit();
}
</script>
 
<form id="choice">
<select name="choiceCode" onchange="setValue()">
<option value="00" selected="">Choose</option>
<option value="a1">Information</option>
<option value="a2">Sessions</option>
<option value="a3">Case Studies</option>
</select>
 
<input type="hidden" name="choiceInfo" value="">
</form>

Open in new window

ssjo22Asked:
Who is Participating?
 
sh0eConnect With a Mentor Commented:
jQuery code is JavaScript code.  There are just things that jQuery makes easier.  I don't see any reason that you need to replace the above.
<script type="text/javascript">
function setValue()
{
  var form=$('#choice');
  form.find(':hidden[name="choiceInfo"]').val(
    form.find('select[name="choiceCode"] option:selected').text()
  );
  form.submit();
}
$(document).ready(function(){
  $('#choice select[name="choiceCode"]').change(setValue);
});
 
</script>
 
<form id="choice">
<select name="choiceCode">
<option value="00" selected="">Choose</option>
<option value="a1">Information</option>
<option value="a2">Sessions</option>
<option value="a3">Case Studies</option>
</select>
 
<input type="hidden" name="choiceInfo" value="">
</form>

Open in new window

0
 
ssjo22Author Commented:
Thank you. I got some basic jquery working, but this would really help me to learn how that javascript can be converted to how jquery works. As I really was unsure of how to convert it over ...

This really helps me understand javascript and jquery more. Thanks!
0
 
ssjo22Author Commented:
Thanks again!
0
All Courses

From novice to tech pro — start learning today.