I really need you to help me on this issue. I have searched and found nothing on the above subject.

I have a form with 2+ option radio buttons plus a submit button. I codify the form with a setTimeOut script --> if no action is taken in 15 sec, the page should submit itself. ... that works!

Another clause that I want to add is, on click of any radio button, the form should auto Submit. This is because, I want to discard the Submit Button.

Therefore, the SetTimeOut function will still remain and the auto submit using onClick event.

My timer function is thus:

<script type="text/javascript">
var mins;
var secs;
function cd() {
mins = 1 * m("01"); // change minutes here
secs = 0 + s(":00"); // change seconds here (always add an additional second to your total)
redo();
}
function m(obj) {
for(var i = 0; i < obj.length; i++) {
if(obj.substring(i, i + 1) == ":")
break;
}
return(obj.substring(0, i));
}
function s(obj) {
for(var i = 0; i < obj.length; i++) {
if(obj.substring(i, i + 1) == ":")
break;
}
return(obj.substring(i + 1, obj.length));
}
function dis(mins,secs) {
var disp;
if(mins <= 9) {
disp = " 0";
} else {
disp = " ";
}
disp += mins + ":";
if(secs <= 9) {
disp += "0" + secs;
} else {
disp += secs;
}
return(disp);
}

function redo() {
secs--;
if(secs == -1) {
secs = 15;
mins--;
}
//document.getElementById(txt.innerHTML) = dis(mins,secs);
document.cd.disp.value = dis(mins,secs); // setup additional displays here.
if((mins == 0) && (secs == 0)) {
//window.alert("Time is up. Press OK to continue."); // change timeout message as required
document.getElementById('form2').submit();
window.location = "testResult.php" // redirects to specified page once timer ends and ok button is pressed
} else {
cd = setTimeout("redo()",1000);
}
}

function init() {
cd();
}
window.onload = init; 

// on page load, the time displays a countdown in a textbox (disp) of a form (CD)

The code for radiobuttons are thus:

<form id="form2" name="form2" method="post" action="testResult.php?Id=<?php echo $SID;?>&QuizId=<?php echo $qId;?>">
<table width="60%" border="0" cellpadding="0" cellspacing="0" align="center">

<?php
 $q=$Question;
$qid = '<input type="hidden" name="qid" id="qid" value="'.$Id.'" />';//question Id
$atsh='<input type="hidden" name="ats" id="ats" value="'.$atsid.'" />';//subject Id
//$quizh='<input type="hidden" name="quiz" id="quiz" value="'.$Quiz.'" />';//quiz Id
$qh='<input type="hidden" name="quest" id="quest" value="'.$Question.'" />';//get the question
$ah='<input type="hidden" name="ans" id="ans" value="'.$Answer.'" />'; //get the correct answer
$qA='<input type="radio" name="RadioGroup'.$i.'" value="'.$OptionA.'" id="OptionA" />'.$OptionA;//get the choices
$qB='<input type="radio" name="RadioGroup'.$i.'" value="'.$OptionB.'" id="OptionB" />'.$OptionB;
$qC='<input type="radio" name="RadioGroup'.$i.'" value="'.$OptionC.'" id="OptionC" />'.$OptionC;
$qD='<input type="radio" name="RadioGroup'.$i.'" value="'.$OptionD.'" id="OptionD" />'.$OptionD;


echo '<tr><td height="36" colspan="2" bgcolor="#85A157">
<span class="style1">Q.'.$Id.') '.$q.'</span>'.$qh.$ah.$atsh.$qid.'</td></tr>';
    echo '<tr><td  colspan="2">

<table width="100%" height="64" border="2" cellpadding="0" cellspacing="0" bordercolor="#A6BF79">';

echo '<tr><td height="32" width="50%">'.$qA.'</td>';
echo '<td width="50%">'.$qC.'</td></tr>';
echo '<tr><td height="32" width="50%">'.$qB.'</td>';
echo '<td width="50%">'.$qD.'</td></tr>';
?>

<input type="submit" name="button" id="button" value="Submit" />

The challenge there is that, I do not know how to make the form submit itself when a user clicks on any radio button.

I really need you to help me on this issue. I have searched and found nothing on the above subject.

I have a form with 2+ option radio buttons plus a submit button. I codify the form with a setTimeOut script --> if no action is taken in 15 sec, the page should submit itself. ... that works!

Another clause that I want to add is, on click of any radio button, the form should auto Submit. This is because, I want to discard the Submit Button.

Therefore, the SetTimeOut function will still remain and the auto submit using onClick event.

My timer function is thus:

<script type="text/javascript">
var mins;
var secs;
function cd() {
mins = 1 * m("01"); // change minutes here
secs = 0 + s(":00"); // change seconds here (always add an additional second to your total)
redo();
}
function m(obj) {
for(var i = 0; i < obj.length; i++) {
if(obj.substring(i, i + 1) == ":")
break;
}
return(obj.substring(0, i));
}
function s(obj) {
for(var i = 0; i < obj.length; i++) {
if(obj.substring(i, i + 1) == ":")
break;
}
return(obj.substring(i + 1, obj.length));
}
function dis(mins,secs) {
var disp;
if(mins <= 9) {
disp = " 0";
} else {
disp = " ";
}
disp += mins + ":";
if(secs <= 9) {
disp += "0" + secs;
} else {
disp += secs;
}
return(disp);
}

function redo() {
secs--;
if(secs == -1) {
secs = 15;
mins--;
}
//document.getElementById(txt.innerHTML) = dis(mins,secs);
document.cd.disp.value = dis(mins,secs); // setup additional displays here.
if((mins == 0) && (secs == 0)) {
//window.alert("Time is up. Press OK to continue."); // change timeout message as required
document.getElementById('form2').submit();
window.location = "testResult.php" // redirects to specified page once timer ends and ok button is pressed
} else {
cd = setTimeout("redo()",1000);
}
}

function init() {
cd();
}
window.onload = init; 

// on page load, the time displays a countdown in a textbox (disp) of a form (CD)

The code for radiobuttons are thus:

<form id="form2" name="form2" method="post" action="testResult.php?Id=<?php echo $SID;?>&QuizId=<?php echo $qId;?>">
<table width="60%" border="0" cellpadding="0" cellspacing="0" align="center">

<?php
 $q=$Question;
$qid = '<input type="hidden" name="qid" id="qid" value="'.$Id.'" />';//question Id
$atsh='<input type="hidden" name="ats" id="ats" value="'.$atsid.'" />';//subject Id
//$quizh='<input type="hidden" name="quiz" id="quiz" value="'.$Quiz.'" />';//quiz Id
$qh='<input type="hidden" name="quest" id="quest" value="'.$Question.'" />';//get the question
$ah='<input type="hidden" name="ans" id="ans" value="'.$Answer.'" />'; //get the correct answer
$qA='<input type="radio" name="RadioGroup'.$i.'" value="'.$OptionA.'" id="OptionA" />'.$OptionA;//get the choices
$qB='<input type="radio" name="RadioGroup'.$i.'" value="'.$OptionB.'" id="OptionB" />'.$OptionB;
$qC='<input type="radio" name="RadioGroup'.$i.'" value="'.$OptionC.'" id="OptionC" />'.$OptionC;
$qD='<input type="radio" name="RadioGroup'.$i.'" value="'.$OptionD.'" id="OptionD" />'.$OptionD;


echo '<tr><td height="36" colspan="2" bgcolor="#85A157">
<span class="style1">Q.'.$Id.') '.$q.'</span>'.$qh.$ah.$atsh.$qid.'</td></tr>';
    echo '<tr><td  colspan="2">

<table width="100%" height="64" border="2" cellpadding="0" cellspacing="0" bordercolor="#A6BF79">';

echo '<tr><td height="32" width="50%">'.$qA.'</td>';
echo '<td width="50%">'.$qC.'</td></tr>';
echo '<tr><td height="32" width="50%">'.$qB.'</td>';
echo '<td width="50%">'.$qD.'</td></tr>';
?>

<input type="submit" name="button" id="button" value="Submit" />

The challenge there is that, I do not know how to make the form submit itself when a user clicks on any radio button.

• javascript
• php
• forms

• 2 Handle the onclick event on a radio button (<input type="radio" onclick="your_function();">) and make it fire a function that submits your form using form.submit(); – Jonathon Commented Aug 13, 2014 at 14:52
• As a side-note, this seems unrelated to php, it would be a lot easier to read if you just posted the html. – jeroen Commented Aug 13, 2014 at 14:52

5 Answers 5

Simply add an onchange attribute to your radios:

$qA='<input type="radio" onchange="this.form.submit();" name="RadioGroup'.$i.'" value="'.$OptionA.'" id="OptionA" />'.$OptionA;//get the choices
$qB='<input type="radio" onchange="this.form.submit();" name="RadioGroup'.$i.'" value="'.$OptionB.'" id="OptionB" />'.$OptionB;
$qC='<input type="radio" onchange="this.form.submit();" name="RadioGroup'.$i.'" value="'.$OptionC.'" id="OptionC" />'.$OptionC;
$qD='<input type="radio" onchange="this.form.submit();" name="RadioGroup'.$i.'" value="'.$OptionD.'" id="OptionD" />'.$OptionD;

And there is no need for jquery, all form elements can reference their parent form with this.form

You could use jQuery to submit the form:

$('input[name=RadioGroup]').change(function () {

    $("#form2").submit();

});

The simplest way I can think of is using jquery.

Make sure to include jquery on your page and use:

$(document).on("click", "input[type='radio']", function(){

  $("#form2").submit();

});

I don't see a radio button selected by default, so you could add

onchange="document.getElementById('form2').submit()"

to all of your radio buttons.

In plain javascript you could modify your init() function something like:

function submit_form() {
  document.getElementById('form2').submit();
}

function init() {
  var radio_buttons = document.querySelectorAll("input[type=radio]");

  radio_buttons.onclick = submit_form;
  // or:
  // radio_buttons.addEventListener("click", submit_form);

  cd();  
}

(using a separate function to submit as you are using it multiple times)