• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2199
  • Last Modified:

Jquery not serializing my radio buttons or select menu

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
LZ1
Asked:
LZ1
  • 3
  • 2
1 Solution
 
HainKurtSr. System AnalystCommented:
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
 
HainKurtSr. System AnalystCommented:
ie move line 57 --> 60
0
 
LZ1Author Commented:
Thanks HainKurt.  Wow....something so simple.  Do you know why it has to be that way, other than it works?  
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
HainKurtSr. System AnalystCommented:
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
 
LZ1Author Commented:
Thanks for that HainKurt! Much appreciated!
0
 
David S.Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now