LZ1
asked on
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!
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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ie move line 57 --> 60
ASKER
Thanks HainKurt. Wow....something so simple. Do you know why it has to be that way, other than it works?
your code runs when page is loaded, an that time the first one is selected
var dataString = $('form#ideaUpdate').seria lize();
always gets the first item since the selection not made yet... you make your selection but uses the data created when page is loaded...
var dataString = $('form#ideaUpdate').seria
always gets the first item since the selection not made yet... you make your selection but uses the data created when page is loaded...
ASKER
Thanks for that HainKurt! Much appreciated!
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.
By the way, it's better to use a "submit" handler on the form instead of a "click" handler on the submit button.