Solved

Jquery not serializing my radio buttons or select menu

Posted on 2011-09-02
6
1,718 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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

825 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