Jquey Form Question - Regaring Radio Buttons


I just want to confirm the most logical way to handle a form submission where there are multiple surveys on a page where each form offers radio button options to choose from (no other form fields exist, only radio buttons)

<li id="checkbox1_3_0"><a href="javascript:vote('choice_3', 'checkbox1_3_0', '7');"><span>yes</span></a></li>

<li id="checkbox2_3_1"><a href="javascript:vote('choice_3', 'checkbox2_3_1', '8');"><span>no</span></a></li>

<li id="checkbox3_3_2"><a href="javascript:vote('choice_3', 'checkbox3_3_2', '29');"><span>I do not know</span></a></li>

Let’s say I have 4 of them on one page. Do I need unique form names for each or can I just select the first instance of <li> being selected?

Since I only want to capture one vote at a time, which means they can only answer one survey out of 4, I was not sure if they still need unique form names. Since I am looping through a db randomly to pluck out these survey questions, I was hoping I could do this dynamically and know, ahead of time, any form name (or field) I must look for so I can process the vote.

One advantage to using jquery would be to use val IIRC to grab such a value. IS that possible with jquery even if I have 4 surveys without a unique form name to each survey?

TY for your time.

Err, what is this? You don’t have any radio buttons or any other form inputs for that matter. You have some list items and links referring to nonexistant checkboxes.

These are radio buttons, and a group of radio buttons should all have the same name:

<input type="radio" name="choice" value="yes" /> Yes <br />
<input type="radio" name="choice" value="no" /> Yes <br />
<input type="radio" name="choice" value="unknown" /> I do not know

On the server side you have one form element named choice whose value is the value of the selected radio button.

I am not allowed to show off the site, but they are in fact radio buttons that I work with, just not conventional. Yes, they are called checkboxes but that should be ignored. Sorry for confusion.

This works when there is one ‘form/survey’ per page. We use a hidden form such as:

<form id="thirdform" action="" method="get">
<input type="hidden" name="qid" value="3">
<input type="hidden" id="choice_3" name="choice_3" value="">
<input type="hidden" id="user_id" name="user_id" value="">
<input type="hidden" id="token" name="token" value="">

Then we display the radio buttons as you see here:

<li id="checkbox3_3_2"><a href="javascript:vote('choice_3', 'checkbox3_3_2', '29');"><span>I do not know</span></a></li>

Then it is submitted with a css ‘button’ that is triggered and captured by jquery. The process works wonderfully with one ‘question/survey’ per page but having 6 unique ones on a page makes it hard to track which survey was selected. They can only select one at a time. I hope this explains it.

I will now review what you have posted in terms of the code. I just wanted to be a bit more clear with how this works. Basically, a javascript function exists behind the scenes, which is listed in the LI elements. It helps me capture
the values so I can pass it to the external php page and submit a vote. It does work I just didn’t want to post the entire source code. Rather, my concern was more general “How does one, assuming there are 4-6 surveys, using this style of radio button, detect the chosen one?”

Thanks for your time so far. I hope I was clear.

PS. The system was designed this way to create a visual effect that was needed for the website so it is a combo of css/jquery working behind the scenes. It’s not allowable for me to bypass that and it seems the css <li> method is the only way to capture the vote as well as offer that visual advantage (a red light appears during your selection).

So, using the logic of the <li> element, where the question ID is appended with the option #, such as question ID and option #3,

Your entire system will fail if javascript is turned off. It also will be bewildering to use without a mouse. I for one, like filling in forms (or surveys) using the keyboard.

I would recommend that you use the form elements the way they were designed. They are also easier to deal with when it comes to javascript. The only other thing is your styling requirements. This is trickier. The radio button can’t be styled much. However, you can trick the browser by superimposing the image you want to use over it (using javascript), capturing the click event on it and transferring it to the radio button.

I have no choice. The owner of the site doesn’t care. Normally, I agree 100%
I am doing something for a designer that left. I literally have no choice.

There are 6 surveys that do use that. I just need to know, even if it’s flawed, how to guarantee that they can choose one of 6 and I grab that value. To say I have lost weeks on this is an understatement but I do not have a choice. Normally having a hidden form lets me grab the correct value. It works fine, but are more hidden form names, attached to EACH survey, required? Or just surround them in one form element? (Was that what you were referring to, Dan?)

Ty so much for understanding this bizarre request :wink: (If it is understood)

Treat this as bizaro world if you must, but the rules in this example cannot be broken sadly. I can post more code, I guess, if needed.

I would create a hidden input for each answer you need to get back.

Can you elaborate? What I do is a serialize a form value (as you see, above, I have a form which works with the survey, so I can serialize “thirdform”'s values and work with it dynamically).

How would I do that with 4+? I’m just having a hard time visualizing exactly what you mean. maybe I need more coffee. I do apologize. I assume I could still do what you suggest dynamically, or is this a static method such as “If this form is submitted for this survey, do this. If it’s for this one instead…”

Since I can define the form names for each question, I can do that too. I just am not clear as to what you mean, sorry. (hides)

Sorry to bump, I was just trying to confirm what Dan meant. I should note that every form I create (I loop through a db) has a button that is identical that, once clicked, jquery creates an action. When I click any form outside of the first, nothing happens though.

The submit button:

<div class="rdbttnw"><div><a href="#" rel="#mies1" id="sresbtn1" ><span>Submit</span></a></div></div>

So for 6 surveys that appears 6 times so you can cast a vote. The jquery is:

    $('#sresbtn1').click(function () {   
var formData2 = $("#firstform").serialize();  

Works great for the first form (I tried looping a form name for each survey and then put all of them in a form. Nothing works outside of submitting a vote for the first survey).

This project has been an absolute drain and I am just desperate for a final solution. Ty for your time.

You’re generating unique identifiers and unique onclick functions for each button yes? Because the “id” attribute, which you are referring to in your jQuery as #sresbtn1 / #firstform, has to be unique.

Originally I was working with one survey per page so I only had one. Problem is, I now might find not only 4, but 30 of these surveys per page. I wasn’t sure how to dynamically prepare for 30 actions to look for assuming each ‘submit button’ has 30 unique names (1 unique submit button per unique survey on one page). So the goal was to use jquery to say “This is the first selected radio button from a submission from any form, and let’s process it”

I can’t write out 30 jquery onclick functions for each submit button, obviously, so I was curious to see how one gets around that dynamically. Sorry for not being clear earlier.

So, in short, my question was should each submit button have a different name and, if so, how do I sniff out which one was submitted dynamically as the # of survey’s per page is dynamic.

PS. Originally, it was going to be 4-6 max but now I realize for one section of the site it can be 30+ at a time per page. Ty for the time.

PPS. To be clear, I can dynamically name them differently for each question but I am too new to jquery to know
how to sniff out which dynamic submit button/survey was submitted/answered. That’s all I’m saying. once I have that value
I can pass it to my other functions which process the results/etc. Sorry again for not being more clear earlier. Ty.

<snip> I have lost thousands trying to figure this out. Does anybody know? I am dying to just resolve this. It just seems like I am in hell no matter what I try or where I go I can’t figure it out.

Should I just hard code 30 jquery actions for 30 differently named buttons if there are 30 per page? What if there are 50? There just isn’t anything in the ‘google world’ that offers advice for such a unique situation due to the strange nature of our radio buttons…

If you want to hire someone then purchase a listing in the Looking to Hire section of the marketplace, or use a freelance site like eLance/Guru. You can’t solicit in the forums.

It shouldn’t be difficult to generate appropriate code (both the forms and the JavaScript) in whatever server side language you’re using. You don’t need 30 functions that say the same thing. It’s not something we can do without seeing more of your code, though, but shouldn’t be more than a one-day job if you hire someone.

Sorry you haven’t found the help you want on the forums yet, but it’s just about impossible to solve someone’s problem when the description is vague and the necessary information isn’t available.

TY. Forgive me, what code do you need to see? I didn’t realize I was missing. I feel bad as I did not want to hold anybody back. (I also feel paypal is a courtesy and glad to offer it)

Basically, here is what 2 surveys would look like. This includes all of the choices that co-ordinate with the survey and the ‘submit’ button. For now, I have given up on where to place a ‘form’ as I am just too tired and confused lol

<h1>Survey 1 (Question ID = 5, you'll see '5' appear often here)</h1>

<li id="checkbox1_5"><a href="javascript:upny_captVote('choice_5', 'checkbox1_5', '12');"><span>Choice 1</span></a></li>

<li id="checkbox2_5"><a href="javascript:upny_captVote('choice_5', 'checkbox2_5', '13');"><span>Choice 2</span></a></li>

<li id="checkbox3_5"><a href="javascript:upny_captVote('choice_5', 'checkbox3_5', '14');"><span>Choice 3</span></a></li>

<li id="checkbox4_5"><a href="javascript:upny_captVote('choice_5', 'checkbox4_5', '23');"><span>Choice 4</span></a></li>

<li id="checkbox5_5"><a href="javascript:upny_captVote('choice_5', 'checkbox5_5', '24');"><span>Choice 5</span></a></li>

<li id="checkbox6_5"><a href="javascript:upny_captVote('choice_5', 'checkbox6_5', '25');"><span>Choice 6</span></a></li>

<div class="upny_rdbttn1 upny_rdbttnw"><div><a href="[#](http://www.sitepoint.com/forums/view-source:http://www.urpenny.com/answer_question/search_mockup.php#)" rel="#mies1" id="upny_sresbtn1" ><span>Submit!</span></a></div></div>

<h1>Survey 1 (Question ID = 4)</h1>

<li id="checkbox1_4"><a href="javascript:upny_captVote('choice_4', 'checkbox1_4', '9');"><span>Choice 1</span></a></li>

<li id="checkbox2_4"><a href="javascript:upny_captVote('choice_4', 'checkbox2_4', '10');"><span>Choice 2</span></a></li>

<li id="checkbox3_4"><a href="javascript:upny_captVote('choice_4', 'checkbox3_4', '11');"><span>Choice 3</span></a></li>
<li id="checkbox4_4"><a href="javascript:upny_captVote('choice_4', 'checkbox4_4', '26');"><span>Choice 4</span></a></li>

<li id="checkbox5_4"><a href="javascript:upny_captVote('choice_4', 'checkbox5_4', '36');"><span>Choice 5</span></a></li

<li id="checkbox6_4"><a href="javascript:upny_captVote('choice_4', 'checkbox6_4', '35');"><span>Choice 6</span></a></li>

<div class="upny_rdbttn1 upny_rdbttnw"><div><a href="[#](http://www.sitepoint.com/forums/view-source:http://www.urpenny.com/answer_question/search_mockup.php#)" rel="#mies1" id="upny_sresbtn1" ><span>Submit</span></a></div></div>

Right there, it’s 2 forms with the radio buttons (Despite the id ‘checkbox’). It calls a javascript function ‘captVote’ (changed name earlier) which allows the checkbox image to load from blank to red when selected. It also holds values. That function is below:

function upny_captVote(hiddeninput_id, listanswer_id, answer_value) {

    //unset previous value
    if(upny_voteTrac[hiddeninput_id]) { upny_EleObjs(upny_voteTrac[hiddeninput_id]).className = ''; }
    //Record and show on state
    upny_EleObjs(listanswer_id).className = 'upny_vlista_on';
    upny_voteTrac[hiddeninput_id] = listanswer_id;
    //Set vote value
    upny_EleObjs(hiddeninput_id).value = answer_value;

So the idea is that when there is one survey per page, I can easily grab the radio button value from using this hidden form:

<form id="firstform" action="" method="get">
<input id="qid" type="hidden" name="qid" value="4">
<input type="hidden" id="choice_4" name="choice_4" value="">
<input type="hidden" id="user_id" name="user_id" value="1">
<input type="hidden" id="token" name="token" value="j_1">

The ‘4’ is used as an example. What happens is if I select an option from survey where question ID = 4, the value of the radio button replaces the default value for the hidden field ‘id’=choice_4’ and it is saved. I use this jquery to capture it correctly. You will notice it references the name of the ‘submit button’ that appears in the survey code at the top of this post:

 $('#upny_sresbtn1').click(function () { 
var formData2 = $("#firstform").serialize();  
$.post("vote.php", $("#firstform").serialize());


So, with one survey per page, it works brilliantly. The question is, what if there are 4, 5, 10, 20, 30…?

I hope this explains it. Let me know if something is missing. Ty so much. I can retrieve data, animate, and finally get json to work. For some stupid reason I am stuck with multiple surveys that use this odd radio button method.

Forgot to mention this (something I found in older files of demos that worked with 1 survey per page)

<form id="upny_hpq5" action="/answer_question/view.php" method="GET">
<input type="hidden" id="upny_hpq5v1" name="upny_hpq5val" value="">

The submit button can also replace what I showed above and do this:

<div class=“rdbttnw”><div><a href=“javascript:upny_subVote(‘upny_hpq5’);”><span>Submit and Illuminate UrSelf!</span></a></div></div>

The function:

var upny_voteTrac = new Object();

function upny_subVote(question_id) {

Maybe I just create those hidden forms, name them with a prefix, such as
upny_hpq1 for survey #1 and loop through #30 with upny_hpq30

Then, I use the following to allow a dynamic submit button to be processed:

$("#[id^=upny_sresbtn_]").click(function() {

Which would work if the submit button is also named with a prefix, such as
sresbtn_1 –> sresbtn_30 (30 forms)

Would that be the most logical? I will test it out but I figured I’d include everything, as Dan requested. TY, guys.

With one <form></form> per page, I don’t see any code that would need to be changed at all. That JavaScript is all you need. It serializes the whole form, so as many hidden inputs as you create will be part of that serialized form sent to your vote.php page.

You just need to have a hidden input corresponding to each set of “radio buttons” (the styled lists/links)

<input type=“hidden” id=“choice_1” name=“choice_1” value=“”>
<input type=“hidden” id=“choice_2” name=“choice_2” value=“”>
<input type=“hidden” id=“choice_3” name=“choice_3” value=“”>
<input type=“hidden” id=“choice_4” name=“choice_4” value=“”>
<input type=“hidden” id=“choice_5” name=“choice_5” value=“”>

and vote.php needs to be prepared to read as many choice_# fields in $_POST as there were questions in the survey

Unless I’m missing something too, which is entirely possible

EDIT: So under each survey, I offer that hidden field, correct? (I mis-understood and originally thought under each radio button

I also assume I must place all of this in one form. That is fine.

For the record, I am using this currently as the jquery that recognizes the submit button I press (I dynamically named them for now before your response)

$("#[id^=upny_sresbtn_]").click(function() {

Ok. So it seems the idea is to serialize the entire form. Would I not
be able to try to use the above “wildcard” logic to" find the submitted
value of the radio button or are you saying serializing it is the only way?

I just want to make sure as this is still a bit new to me. Thank you SO much. You have NO idea what this means to me.

PS. Am I to assume that this was intended to not take into consideration the last post I made before yours? Either way, I will start testing and get back to you the first moment I have. Ty, again.

PPS. I see, you mean one hidden field for each survey (that’s how I view it. I was confused. Is this correct?


Using your method allows me to have (for now) 8 surveys on a page and submit uniquely as well as get the value to append due to the form.serialize method.

One thing I did, though, was name each submit button unqiuely and I notice that after a vote if they vote again, both forms save the value as a selected radio button. How can I make it so only the current chosen form shows the chosen radio button? Do I just clear the form after submit or simply keep the submit button name constant?

Thanks…so much. I am learning more because of this.

Oh, one last silly q. I include a javascript file (I showed you a function from it earlier, the
votetrac function). When I alert the following out:


It alerts the choice ID of that question instantly. If I turn it to a var, would it be able to save as a var in my other js file? For instance, form1.js is the file I use to handle the JQUERy stuff

The process is:

PHP page –> Include form1.js to do the back-end stuff. Global.js is the js file that the php page includes as well

How does one include a var from one included js to another? I tried and it didn’t work. Not critical, just curious as it would compliment all of this. TY.

For reference, the code of that included .js file:

function [B]upny_EleObjs[/B](e) { if(typeof(e)=='string') { if(document.getElementById) { e=document.getElementById(e); } else if(document.all) { e=document.all[e]; } else { e=null; } } return e; }

That is a one function. Here is what leads to the alert I am talking about:

function upny_captVote(hiddeninput_id, listanswer_id, answer_value) {

    //unset previous value
    if(upny_voteTrac[hiddeninput_id]) { upny_EleObjs(upny_voteTrac[hiddeninput_id]).className = ''; }
    //Record and show on state
    upny_EleObjs(listanswer_id).className = 'upny_vlista_on';
    upny_voteTrac[hiddeninput_id] = listanswer_id;
    //Set vote value
    [B]upny_EleObjs(hiddeninput_id).value = answer_value;[/B]
   [B] alert(answer_value);[/B]

I can’t seem to include a var that I create for it, such as:

var v=upny_EleObjs(hiddeninput_id).value;

I try to place that within the jquery code in another js file. Such as:

$(“#[id^=upny_sresbtn_]”).click(function() {

var v=upny_EleObjs(hiddeninput_id).value;


Nothing happens. I guess the problem is that my jquery is based on when a submit button is selected and, the alert which displays that choice ID through var ‘v’ only happens during selection of the radio button, before submission. Any way around it? Just curious

Thank you.

Where’s it going to get hiddeninput_id? That was a function argument the other place you used that code

Yeah. Clearly I hit a wall trying to get a hidden_id value.
Is there a way to dynamically use getelementbyID
and save a value based on the radio button it selects?

Using a wildcard type system which I used for when I had multiple submit button names? Just curious…either way, ty and I hope you enjoy your weekend. It’s not critical but it would be nice to pluck that radio button value ID by itself if possible. More of a luxury since when I test the forms, it saves all form submissions instead of just the one I am submitting.

It’s not critical but I figure I should learn to be ‘cleaner’ with my processing.