Solved

Convert javascript to jquery for form with select options

Posted on 2008-11-02
3
1,416 Views
Last Modified: 2010-04-21
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

0
Comment
Question by:ssjo22
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
ID: 22863925
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
 

Author Comment

by:ssjo22
ID: 22864479
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
 

Author Closing Comment

by:ssjo22
ID: 31512531
Thanks again!
0

Featured Post

Tutorials alone can't teach real engineering

So we built better training tools.

-Hands-on Labs
-Instructor Mentoring
-Scenario-Based Tests
-Dedicated Cloud Servers

All at your fingertips. What are you waiting for?

Question has a verified solution.

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

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
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…

695 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