我有一组问题在html的形式

I have a set of Questions in a html form

本文关键字：html 问题 一组      更新时间：2023-09-26

我在html表单中有一组问题。其中一些问题的答案在单选按钮中显示，一些问题的答案通过复选框显示。

问题是我想数一下答案。我有5个问题。其中3个是"是"或"否"问题(单选按钮)。其中2个是选择题(复选框)。用户回答了5个问题中的4个。我的计数器会显示4然后只有提交按钮是可点击的。

<form method="post" action="" id="myForm">

            <p>Name:<br>
                <input type="text" name="Lname" size="50" onKeyPress="return lettersonly(event)" id="lname" value=""required/>
            </p>
            <p>E-mail:<br>
                <input type="text" name="Lemail" size="50" onKeyPress="return emailLetters(event)" value=""required/>
            </p>
            <p>Gender: 
                <input type="radio" name="Lgender" value="female" required>Female
                <input type="radio" name="Lgender" value="male" required>Male
            </p>
            <p>1. What is your special interests? <i><small>you can choose more than one option</small></i><br>
                <input type="checkbox" name="q01[]" value="Circuit Design">Circuit Design<br>
                <input type="checkbox" name="q01[]" value="System Design">System Design<br>
                <input type="checkbox" name="q01[]" value="Logical Circuits">Logical Circuits<br>
                <input type="checkbox" name="q01[]" value="IT-Security">IT-Security<br>
                <input type="checkbox" name="q01[]" value="Embedded System">Embedded System<br>
                <input type="checkbox" name="q01[]" value="Others">Others<br>
            </p>
            <p>2. Have you taught Logic Circuits or other related Subjects to undergraduate students? <br>
                <input type="radio" name="q02" value="Yes" onclick="display(this)" required>Yes
                <input type="radio" name="q02" value="No" onclick="display(this)" required>No
            </p>
            <div id="hideform" style="display:none">
                <p>3. Have you taught VERILOG or other types of Gate Level programming languages to undergraduate students? <br>
                    <input type="radio" name="q03" value="Yes">Yes
                    <input type="radio" name="q03" value="No">No
                </p>
                <p>4. In your opinion, how many of students have some difficulties to cope with the concept of complex combination of Logic Units and implementation of them by a programming language like VERILOG or VHDL? <br>
                    <input type="checkbox" name="q04" value="None of the Students">None of the Students<br>
                    <input type="checkbox" name="q04" value="Small Group of Students">Small Group of Students<br>
                    <input type="checkbox" name="q04" value="Half of the Students">Half of the Students<br>
                    <input type="checkbox" name="q04" value="Majority of the Students">Majority of the Students<br>
                </p>
                <p>5. Do you have enough time to give them enough examples during the face to face classroom? <br>
                    <input type="radio" name="q05" value="Yes">Yes
                    <input type="radio" name="q05" value="No">No
                </p>
            <p><input class= "submitbtn" type="submit"  name="submit" value="Submit" onclick="myFunction()"></p> 
            <!--onclick= "alert('Thanks for your time!')"-->
        </form>

您将需要jquery (https://code.jquery.com/)来轻松完成此操作。此外，将disabled添加到提交按钮中，使其不可点击。然后添加自己的JavaScript代码:

$(document).ready(function(){
  //check form when page is loaded
  checkform();
  //check form when element is clicked
  $("input[type='radio'][name^='q'],input[type='checkbox'][name^='q']").click(function(){
    checkform();
  });
});
function checkform(){
  counter =0;
  // Count filled form sections
  for(i=1;i<=5;i++){
    if($('input[name="q0'+i+'"],input[name="q0'+i+'[]"]').is(':checked')){             
      counter++;
    }
  }
  // submit form
  if(counter>=4){
    //enable button
    $(".submitbtn").show(); //better use an id for the button
  }
}

确保没有其他以"q"开头的输入元素，否则在您的页面上我建议的代码将无法工作。

相关文章：