使用javascript onclick for单选按钮

时间:2016-02-21 19:34:58

标签: javascript html

我正在尝试为此调查编写此程序,我希望用户回答,在完成调查后,他们会点击提交,它会显示他们选择的确认。我不能让这个为我的生活工作。

这是我的代码:

<!DOCTYPE html>
<title> Satisfaction Survey </title>
<script Language ="Javascript">
  function testpage() {  
    errmsg = " ";
    confirmmsg = " ";
    errflag = false; 

    if ( document.form1.rdservice[0].checked == true ) {
      confirmmsg = confirmmsg + "<br> Overall is very satsified" ;
    }

    if ( document.form1.rdservice[1].checked == true ) {
      confirmmsg = confirmmsg + "<br> Overall is satisfied" ;
    }

    if ( document.form1.rdservice[2].checked == true ) {
      confirmmsg = confirmmsg + "<br> Overall is neutral" ;
    }

    if ( document.form1.rdservice[3].checked == true ) {
      confirmmsg = confirmmsg + "<br> Overall is unsatsified" ;
    }

    if ( document.form1.rdservice[4].checked == true ) {
      confirmmsg = confirmmsg + "<br> Overall is very unsatsified" ;
    }

    if ( (doucment.form1.rdservice[0].checked == false) &&        
         (doucment.form1.rdservice[1].checked == false) && 
         (doucment.form1.rdservice[2].checked == false) && 
         (doucment.form1.rdservice[3].checked == "false") && 
         (doucment.form1.rdservice[4].checked == false)) {
      errflag = true;
      errmsg  = errmsg + "<br> You forgot to select an option";
    }
  }
</script>

<body>
  <form  name=form1  method="post">
    <fieldset>
      <legend> Please take a few moments to complete this satisfaction survey.  </legend>   
    <fieldset>  
    <legend> Overall, how satisfied were you with the product / service? </legend>
    <input type="radio" name="rdservice" value="v"> Very Satisfied
    <br>
    <input type="radio" name="rdservice" value="s"> Satisfied
    <br>        
    <input type="radio" name="rdservice" value="n"> Neutral
    <br>
    <input type="radio" name="rdservice" value="un"> Unsatisfied
    <br>
    <input type="radio" name="rdservice" value="vu"> Very   Unsatisfied
  </fieldset>
  <fieldset>
    <input type="submit" name="subm1" value="Submit"  onclick="testpge()">
    <input type="Reset"  name="Res1"  value="Reset Form">
  </fieldset>       
  </fieldset>
</body>
</form>
</html>

2 个答案:

答案 0 :(得分:0)

代码有点乱,我可以建议使用jquery(https://jquery.com/download/)吗?它会让你的生活变得更轻松!

这是您需要的jquery代码:

var confirmmsg = "";
var errflag = false; 
var errmsg = "";

$.each($('form input[type=radio]'), function() {
    if($(this).is(":checked")) {
      confirmmsg += "<br> Overall is " + $(this).text();
    } else {
      errflag = true;
    }  
});

if (errflag) {
  errmsg  = "<br> You forgot to select an option";
}

此代码获取每个输入无线电元素并检查它是否已被检查然后进行confirmmsg,如果其中一个未检查,则errflag变为true,并且您也设置了errmsg

不过,我认为你需要复选框而不是无线电输入

答案 1 :(得分:0)

(非jquery方法)

“按钮”的表单输入只是按钮。您可以将事件附加到这些输入,但它们与提交表单无关。如果你想创建发送表单的按钮,你应该将“type”属性设置为“submit”。然后,您可以通过向<form>标记添加事件“onsubmit”来验证您的表单,而不是按钮。如果有人按下清除表格的按钮,您也可以使用“onreset”来捕捉事件。如果要添加“onsubmit”功能,例如:

onsumit="return testpage(this);"

如果表格应该发送,你可以轻松决定该功能。你可以通过返回值来做到这一点。如果您返回true,则表单将被发送,如果您返回false表单将不会发送。您还可以通过将<form>标记的“操作”属性设置为“javascript:void(0);”

来停用发送表单

在你的代码中,我会将“onsubmit”事件添加到<form>标签,我会从提交按钮中删除“onclick”(你正在调用函数然后发布表单),我还会将功能代码更改为:< / p>

function testpage(frm)
{
  var radioBoxSelected = false;
  for(var i=0; i < frm.elements.length;i++)
  {
    if (frm.elements[i].type == 'radio' && frm.elements[i].checked) {
      radioBoxSelected = true;
      val = frm.elements[i].value;
      // You can move messages to attribute "value" of radio boxes
      alert('You have selected: ' + val);
      // Below line sets some tag inner content to radiobox "value" attribute
      document.getElementById("satisfied_value").innerHTML = val;
      // Uncomment if you want send form here
      //return true;
    }
  }
  if (!radioBoxSelected) {
    alert('Please select option!');
    return false;
  }
}