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

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

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
trippy1976
Asked:
trippy1976
  • 7
  • 3
  • 2
2 Solutions
 
matthew016Commented:
Is it only for unchecked radio's or for checked as well ?
0
 
trippy1976Author Commented:
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
 
leakim971PluritechnicianCommented:
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
trippy1976Author Commented:
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
 
trippy1976Author Commented:
Found this article, but I can't stop using jQueryUI unfortunately...
0
 
trippy1976Author Commented:
0
 
matthew016Commented:
And when you removed jQuery UI, did it work ?
0
 
matthew016Commented:
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
 
trippy1976Author Commented:
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
 
trippy1976Author Commented:
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
 
trippy1976Author Commented:
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
 
leakim971PluritechnicianCommented:
You're welcome! Thanks a lot for the points!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

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