Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Jquery not serializing my radio buttons or select menu

Posted on 2011-09-02
6
Medium Priority
?
1,946 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 61

Accepted Solution

by:
HainKurt earned 2000 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 61

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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 61

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 43

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

How to Use the Help Bell

Need to boost the visibility of your question for solutions? Use the Experts Exchange Help Bell to confirm priority levels and contact subject-matter experts for question attention.  Check out this how-to article for more information.

Question has a verified solution.

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

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…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
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…

963 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