dongta1824
dongta1824
2014-08-13 14:47

PHP表单 - 单击单选按钮提交表单

已采纳

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.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

5条回答

  • duanfan1965 duanfan1965 7年前

    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

    点赞 评论 复制链接分享
  • doujieluo5875 doujieluo5875 7年前

    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)

    点赞 评论 复制链接分享
  • dongpao9165 dongpao9165 7年前

    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.

    点赞 评论 复制链接分享
  • duanhu7615 duanhu7615 7年前

    You could use jQuery to submit the form:

    $('input[name=RadioGroup]').change(function () {
    
        $("#form2").submit();
    
    });
    
    点赞 评论 复制链接分享
  • drruhc4944 drruhc4944 7年前

    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();
    
    });
    
    点赞 评论 复制链接分享

相关推荐