Solved

jQuery - Radio button elements not being sent to server via Ajax in IE

Posted on 2010-08-20
12
857 Views
Last Modified: 2012-06-27
I have an Ajax form that contains radio buttons.

On Chrome and Firefox it submits fine and the back end has all the info on the form, including the radio button info.

On IE 7/8/+ all form info EXCEPT the radio button information is posted to the server.

Is there a known issue with radios and serializing in jQuery?  I'm using 1.4.2

Anyone run into this before and have a quick tip to share?
0
Comment
Question by:trippy1976
  • 7
  • 3
  • 2
12 Comments
 
LVL 9

Expert Comment

by:matthew016
ID: 33489759
Is it only for unchecked radio's or for checked as well ?
0
 
LVL 4

Author Comment

by:trippy1976
ID: 33489841
Checked.

Here is the form code.  Maybe I'm doing some bonehead rookie thing with the form, but I think it looks okay.

The radios start unchecked, but you have to check it to submit.  Even if you check one - they don't go over.  But only on IE.  If I check it and submit with Chrome or Firefox, the data goes over fine.  Do the same thing on IE... no "flag" info is posted, but "usernotes" and "action" and "userid" all post.

It's the oddest thing I've ever seen.  Usually with IE and this stuff it either doesn't work, or it does.  In this case, every form element except the radio button seems to get serialized.


<form onsubmit="hideModal();return getAJAX(this);">
				<input name="action" value="updateUserNotes" type="hidden">
				<input name="userid" value="43255" type="hidden">
				<div style="float: left;">

				<b>Flags:</b><br>
					<input name="flag" value="none" id="noflag" type="radio"> <img src="images/icons/grey_flag.png"> No Flag<br>
					<input name="flag" value="green" id="greenflag" type="radio"> <img src="images/icons/flag_green.png"> Green Flag<br>
					<input name="flag" value="red" id="redflag" type="radio"> <img src="images/icons/flag_red.png"> Red Flag
				</div>

				<div style="float: right;">
					<b>NOTES:</b><br>
					<textarea name="usernotes" cols="80" rows="10">adfads test</textarea>
				</div>
				<p style="clear: both;">
				<input value="Save Notes" type="submit">				
			</p>
		</form>

Open in new window

0
 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 33490197
Use : flag[] as name
<input name="flag[]" value="none" id="noflag" type="radio"> <img src="images/icons/grey_flag.png"> No Flag<br>
					<input name="flag[]" value="green" id="greenflag" type="radio"> <img src="images/icons/flag_green.png"> Green Flag<br>
					<input name="flag[]" value="red" id="redflag" type="radio"> <img src="images/icons/flag_red.png"> Red Flag

Open in new window

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 4

Author Comment

by:trippy1976
ID: 33490369
I tried the [], it did not work.

What's interesting is this...

If I submit the form in, say, chrome with the "red" flag selected it saves.

The PHP code that generates the form will put "checked" in the radio of the appropriate color if the database says it's that color.  So the flag you selected is pre-checked.

Then, after saving in Chrome, if I load it in IE - I get a value for flag (without the []'s in place... just my original form) but it's ALWAYS the default value.  So if I go to Chrome, change the flag to red and submit - it saves as red.  Then I go to IE, load the form and it shows red checked since that is what is saved.  Then while in IE, I change the flag from red to green and submit.  On the back end, I now see a post value for "flag" but it's red, no matter what I may have changed it to later.
0
 
LVL 4

Author Comment

by:trippy1976
ID: 33490397
Found this article, but I can't stop using jQueryUI unfortunately...
0
 
LVL 4

Author Comment

by:trippy1976
ID: 33490431
0
 
LVL 9

Expert Comment

by:matthew016
ID: 33490948
And when you removed jQuery UI, did it work ?
0
 
LVL 9

Assisted Solution

by:matthew016
matthew016 earned 250 total points
ID: 33490951
Could you also try to add a hidden input field (with same name) right before :

<input type="hidden" name="flag" value="dummy">

<input name="flag" value="none" id="noflag" type="radio"> <img src="images/icons/grey_flag.png"> No Flag<br>
<input name="flag" value="green" id="greenflag" type="radio"> <img src="images/icons/flag_green.png"> Green Flag<br>
<input name="flag" value="red" id="redflag" type="radio"> <img src="images/icons/flag_red.png"> Red Flag
0
 
LVL 4

Author Comment

by:trippy1976
ID: 33492343
matthew:  I can't remove jquery UI, it's pretty integral to this particular page.

I've tried making the radios into selects as well, same results.  I think it has something to do with how IE registers "onChange" events.  Neither radios nor select seems to work.  I'm pretty confident hidden would because all my other hidden fields work fine, as does the textarea.

It's something to do with the radio and select fields I think.

The form loads via ajax, what I'm going to try next is to load something without Ajax and see if just submitting a form on an HTML page will work with radios.  At least then I'll know it's probably something getting jacked because the form is being loaded via ajax into a dialog field.
0
 
LVL 4

Author Comment

by:trippy1976
ID: 33492381
Yeah, if I render the form on just a regular old page in my site, it works fine either when hard-code or when ajax loaded into a standard div on the site.

When I load the form into a jQuery UI dialog... the radios and serials do not get serialized properly.

So... I think what I'll end up having to do is to build a hidden field for "flag" and then have some kind of "onclick" event for the radios to update the hidden field and see how that works.

But if anyone knows a good/easy way to solve the jQuery UI / radio button serialization thing, please post :)
0
 
LVL 4

Author Comment

by:trippy1976
ID: 33597975
Well, by way of update and to close this question it turned out to only be an issue for ME.  It works for all my other users, even ones using the same browser.  I dunno. Sometimes with web stuff it seems like FM.  Maybe I had a caching issue that day or something.  Thanks for the help
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33598209
You're welcome! Thanks a lot for the points!
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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…

777 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