Ich habe eine Reihe von Fragen in einem HTML-Formular

Question

Ich habe eine Reihe von Fragen in einem HTML-Formular. Einige der Antworten dieser Fragen werden in Radio Buttons angezeigt UND einige der Antworten der Fragen werden durch Kontrollkästchen angezeigt.

Das Problem ist, dass ich die Antworten zählen möchte. z.B. Ich habe 5 Fragen. 3 von ihnen sind Ja oder Nein Fragen (Radio-Buttons). 2 von ihnen sind mehrere Fragen (Kontrollkästchen). Der Benutzer hat 4 von 5 Fragen beantwortet. Also, mein Zähler zeigt 4 und dann nur senden Schaltflächen sind anklickbar.

<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> 

Answer 1

Sie müssen jquery (https://code.jquery.com/) dies mit weniger Aufwand zu tun. Fügen Sie außerdem disabled zu Ihrer Absenden-Schaltfläche hinzu, damit sie nicht anklickbar ist. Dann eigenen JavaScript-Code hinzufügen:

$(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 
    } 
} 

Stellen Sie sicher, es gibt keine andere Eingabeelemente mit „q“ beginnen sonst an Ihrer Seite mir vorgeschlagenen Code wird nicht funktionieren. Es gibt mehrere Möglichkeiten, das zu tun ...