Solved

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

Posted on 2010-08-20
12
851 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
 
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
How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
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

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…

760 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now