Solved

Jquery not serializing my radio buttons or select menu

Posted on 2011-09-02
6
1,827 Views
Last Modified: 2012-05-12
Hey Experts!!

I have a super simple form that I'm just trying to get to serialize via Jquery.  There's only 2 values in this form: 1 is a select menu and the other is a hidden field with the date.

The date comes through fine, however the select menu always serializes as the first value regardless of what is selected.  Not sure what I'm doing wrong. My code is below:

Thanks in advance!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Submit a New Idea</title>
</head>

<body>
	<div id="container">
		<form name="ideaUpdate" method="post" id="ideaUpdate" action="">

			<div id="ideaDisplay">			
				<img src="images/lightbulb-logo.png" class="indicator" height="64px" />
				<h1>Just another test</h1>
								
					
					<div id="ideaText">
						This time let's make sure we go beyond the 50 character 
truncation.  That should have just about did it, but let's just make sure and keep on typing.

This time let's make sure we go beyond the 50 character truncation.  That should have just about did it, but let's just make sure and keep on typing.


This time let's make sure we go beyond the 50 character truncation.  That should have just about did it, but let's just make sure and keep on typing.
					</div><!--end ideaText -->
					
					<span class="submitted">
						Submitted by: <span class="name">Lenny again </span>

					</span><!--end submitted -->
					
					<div id="checks">						
						<select name="updStatus" size="1" id="updStatus">
							<option value="pass">Pass</option>
							<option value="closed">Closed</option>
							<option value="future">Future</option>
						</select>
						
				</div><!--end checks -->

	
											
				<div id="buttons">
					<input name="Submit" type="submit" class="submit button start" value="Submit" id="submit">
					<input name="Reset" type="reset" class="reset button" value="Reset" id="reset">
				</div>
				
				<input name="modifiedDate" id="modifiedDate" type="hidden" value="9/2/2011" />
			</div><!--end ideaDisplay -->
		</form>
	</div> <!--end container -->

	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
	<script type="text/javascript">
	$(function() {
	var dataString =  $('form#ideaUpdate').serialize();
	
	$(".submit").click(function() {
					   
		alert (dataString);return false;
			
		$.ajax({
		 type: "POST",
		 url: "/ideaCenter/ideaUpdate.asp",
		 data: dataString,
		 success: function() {
		   $('#ideaUpdate').html("<div id='message'></div>");
		   $('#message').html("<img id='checkmark' src='/images/check.png' /><h3>Status Updated! </h3>")
		   .hide()
		   .fadeIn(500, function() {
			$('#message').append("");
		   });
		 }
		}); 
	});
    return false;
	});

	
	</script>
	
	
</body>

</html>

Open in new window

0
Comment
Question by:LZ1
[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
  • 3
  • 2
6 Comments
 
LVL 56

Accepted Solution

by:
HainKurt earned 500 total points
ID: 36474203
move the line inside function


var dataString =  $('form#ideaUpdate').serialize();
	$(".submit").click(function() {

-->

	$(".submit").click(function() {
	var dataString =  $('form#ideaUpdate').serialize();

Open in new window

0
 
LVL 56

Expert Comment

by:HainKurt
ID: 36474209
ie move line 57 --> 60
0
 
LVL 30

Author Comment

by:LZ1
ID: 36474218
Thanks HainKurt.  Wow....something so simple.  Do you know why it has to be that way, other than it works?  
0
WordPress Tutorial 4: Recommended Plugins

Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.

 
LVL 56

Expert Comment

by:HainKurt
ID: 36474282
your code runs when page is loaded, an that time the first one is selected

var dataString =  $('form#ideaUpdate').serialize();

always gets the first item since the selection not made yet... you make your selection but uses the data created when page is loaded...
0
 
LVL 30

Author Closing Comment

by:LZ1
ID: 36474565
Thanks for that HainKurt! Much appreciated!
0
 
LVL 42

Expert Comment

by:David S.
ID: 36476422
So much of JavaScript code is event driven. You have to make sure that your code runs at the right time.

By the way, it's better to use a "submit" handler on the form instead of a "click" handler on the submit button.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

623 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