Solved

Jquery not serializing my radio buttons or select menu

Posted on 2011-09-02
6
1,687 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
  • 3
  • 2
6 Comments
 
LVL 51

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 51

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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 51

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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 …

919 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now