Radio button selection problem

[dashawk]

Hi guys, I have a problem on getting the selected radio button and save it in the database.

Here is my code:

<div id="container">        
            <div id="question1" style="display: inline;">
            	<p>Question 1</p>
            	<ul>
                    <li><input type="radio" name="q1" value="1" id="ans1" />Answer 1</li>
                    <li><input type="radio" name="q2" value="2" id="ans1"/>Answer 2</li>
                    <li><input type="radio" name="q3" value="3" id="ans1"/>Answer 3</li>
		</ul>
            </div>
            <div id="question2" style="display: none;">
            	<p>Question 2</p>
            	<ul>
                    <li><input type="radio" name="q1" value="1" id="ans2" />Answer 1</li>
                    <li><input type="radio" name="q2" value="2" id="ans2"/>Answer 2</li>
                    <li><input type="radio" name="q3" value="3" id="ans2"/>Answer 3</li>
		</ul>
            </div>
            <div id="question3" style="display: none;">
            	<p>Question 3</p>
            	<ul>
                    <li><input type="radio" name="q1" value="1" id="ans3" />Answer 1</li>
                    <li><input type="radio" name="q2" value="2" id="ans3"/>Answer 2</li>
                    <li><input type="radio" name="q3" value="3" id="ans3"/>Answer 3</li>
		</ul>
            </div>
</div><!-- END OF CONTAINER -->

and my javascript:

<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
        <script type="text/javascript">
			$('#container #ans1').click(function(){
				$('question1').css('opacity',1);
				$('question2').css('opacity',0);
				$('question3').css('opacity',0);
			});
			
			$('#container #ans2').click(function(){
				$('question1').css('opacity',0);
				$('question2').css('opacity',1);
				$('question3').css('opacity',0);
			});
			
			$('#container #ans3').click(function(){
				$('question1').css('opacity',0);
				$('question2').css('opacity',0);
				$('question3').css('opacity',1);
			});
        </script>

I wanted to know which answers are selected and save those answers in the database with the corresponding question. :sad: I am using MYSQL as my database tool. I know how to use MYSQL and querying :) but I just don't know how to get the datas that I need.:confused:

Please help me on this one.. Thanks :X

[cereal]

For each group of radio buttons you need to set the same name, they are alternatives so the scripts will get one of those options. The id, instead, is unique, so:

# question 1
<ul>
    <li><input type="radio" name="q1" value="1" id="ans1A" />Answer 1</li>
    <li><input type="radio" name="q1" value="2" id="ans1B" />Answer 2</li>
    <li><input type="radio" name="q1" value="3" id="ans1C" />Answer 3</li>
</ul>

#question 2
<ul>
    <li><input type="radio" name="q2" value="1" id="ans2A" />Answer 1</li>
    <li><input type="radio" name="q2" value="2" id="ans2B" />Answer 2</li>
    <li><input type="radio" name="q2" value="3" id="ans2C" />Answer 3</li>
</ul>

#question 3
<ul>
    <li><input type="radio" name="q3" value="1" id="ans3A" />Answer 1</li>
    <li><input type="radio" name="q3" value="2" id="ans3B" />Answer 2</li>
    <li><input type="radio" name="q3" value="3" id="ans3C" />Answer 3</li>
</ul>

Once you have chosen the options, just submit the form, if you are using POST method then, use $_POST, $_POST and $_POST to get the values.

[dashawk]

Hi cereal, I have tried using $_POST... but I can't get the values because those radio buttons are not a member of any form tags, it is only inside the <ul> tag, that's why I am wondering how I will know what option is chosen by the user and then save the chosen answer with the question in the database.

Here is my sample database:

Database:
 ID | QUESTION           | ANSWER |
-----------------------------------
  1 | This is question 1 | ans3   |
-----------------------------------
  2 | this is question 2 | ans1   |

[cereal]

The only way to get those values is to send them through a form, or through ajax. After that, your receiving script can do an insert query to set values into the database.

can't see why you don't enclose radios in a form tag - makes html sense to do so. You're using jquery so ajax would be an obvious choice for data sending, BUT, I suggest that you use progressive enhancement - so if js not available, the form is sent normally to a formhandler script, otherwise use js to hijack the submit action and use the same formhandler script via ajax. My 2p.

[dashawk]

umm, i don't use the form tag because I want that the script will only be triggered when the any of the radio button is clicked so i don't need to click a button to submit their selection.

This example of code should trigger the event:

<script type="text/javascript">
	$(document).ready(function(){
		$('.container :radio').click(function(){
			getNextQuestion('RADIOBUTTON_ID');
			return false;
		});
	});
</script>

Here is the javascript that I tried:

functiongetNextQuestion(radio_id){
	radio_id = radio_id.substring(3,4);		//this should get the number of the radio button id example ans2, we will get 2
	
	// then this should get the radio button value clicked that is under #question1, #question2 div etc...
	var answer = $('#question'+radio_id+' input:checked').val(); 
	
	//then when the user select an answer, the next answer should appear and the old answer will disapear.
	$('#question'+radio_id).animate({opacity: 0},300);
	setTimeout(function(){
		var nextQuestion = parseInt(radio_id)+1;
		$('#question'+nextQuestion).animate({opacity: 1}, 300);
	},300);
}

[cereal]

I agree with ardav and I think this thread should be moved to the AJAX forum. At this point your request is not related to PHP. Bye :)