validating multiple textboxes in javascript

Question

<form name="quest" onsubmit="return validate();">
  <table width="100%" border="1">
    <tr>
      <td>Question</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
        <td width="98">Response Type<font color="#CC0000">*</font></td>
        <td>
        <input type="radio" value="1" name="R1" onClick="showresponse(1)"> 
        True/False
        <input type="radio" value="2" name="R1" onclick="showresponse(2)">Single 
        Best Answer
        <input type="radio" value="3" name="R1" onclick="showresponse(3)">Multiple 
        Answers</td>
    </tr>
    <tr>
      <td width="98" valign="top"><span id="lbl" >Add Response<font color="#CC0000">*</font></span></td>
      <td>
            <table border="0" width="425" cellspacing="0" id="response2" cellpadding="5">
            <tr>
                <td width="161">
                <input type="text" name="cb1" size="20" style="width:300px;" maxlength="100"></td>
                <td>
                <input type="radio" value="1" name="R3"> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb2" size="20"  style="width:300px;" maxlength="100"></td>
                <td>
                <input type="radio" value="2"  name="R3"> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb3" size="20" style="width:300px;" maxlength="100"></td>
                <td>
                <input type="radio" value="3" name="R3"> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb4" size="20"  style="width:300px;" maxlength="100"></td>
                <td>
                <input type="radio" value="4"  name="R3"> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb5" size="20"  style="width:300px;" maxlength="100"></td>
                <td>
                <input type="radio" value="5"  name="R3"> 
                Answer</td>
            </tr>
            </table> 
        </td>   
    </tr>

  </table>
</form>

I want to validate to that a person can enter min 3 responses(Add response) and max 5 responses. once enter the response only allow to select the answer(radio button). pls anbody help me . thanks in advance

Answer 1

You can try this solution below.

Note that a full working example can be found at the end of this post.

---

• Set the method method attribute of your <form> to GET or POST, and define its method attribute (= which specifies where to send the form's data)

• Add an ID to each of your "Answer" checkboxes. You can provide them the following IDs, respectively: R1, R2, R3, R4, and R5. Provide different names to each input.

• Disable your "Answer" checkboxes by adding the attribute disabled. Since you only want the responses to check / uncheck the checkboxes, we want to prevent the users from doing it.

Eg:

<input type="radio" value="1" name="R1" id="R1" disabled>

• Add an the following events to each of your "Answer" text inputs:

  • onkeyup="toggle_checkbox(this, i);", where i should be the index related to the ID of the checkbox concerned (check the example below). The toggle_checkbox function is called every time we type something inside an "Answer" textbox, and checks, or unchecks, the checkbox associated to the text input we're typing in, depending on the latter's content:

    • if the content of the texbox is empty, the function unchecks the checkbox,

    • else, it checks it.

  • ondragstart="return false" which prevents to copy the content from a given textbox to another.

Eg:

<td width="161">

    <input type="text" name="cb1" size="20" style="width:300px;" maxlength="100" 
        onkeyup="toggle_checkbox(this, 1);" ondragstart="return false"></td>

    <td>
    <input type="radio" value="1" name="R1" id="R1" disabled> 
    Answer
</td>

In the example above, i is equal to 1, which is related to the concerned checkbox's ID R1.

• In your <head>, add the following JS functions:

  function toggle_checkbox(el, index) {
      var val = el.value;
  
      if(val!="") {
          document.getElementById("R"+index).checked = "checked";
      }
      else { 
          document.getElementById("R"+index).checked = "";
      }
  }
  
  function validate() {   
      var isok = false;
      var nb_checked = 0;
  
      for(var i =1; i<6; i++) {
          var el = document.getElementById("R"+i);
  
          if(el.checked) {
              nb_checked++;
          }           
      }   
  
      if(nb_checked < 3) {
          alert("Enter at least 3 responses!");
      }
      else {
          isok = true;
      }
  
      return isok;
  }
  

As you can see, there are two functions: one is toggle_checkbox and the other is validate.

• As explained a little bit previously, the function toggle_checkbox is called every time we type something inside an "Answer" textbox. This checks / unchecks the associated checkbox according to whether the content of the corresponding textbox is empty or not.

• The function validate is called when we submit the form. It counts the number of "Answer" checkboxes which are checked with the variable nb_checked. If this number is lower than 3, then we alert the message Enter at least 3 responses!. Otherwise, we set the output variable isok to true, which will allow the form to be processed and sent to the link provided in the action attribute of the <form>

---

Full working example:

<!DOCTYPE html>
<html>
<head>

<script>

function toggle_checkbox(el, index) {
    var val = el.value;

    if(val!="")
        document.getElementById("R"+index).checked = "checked";
    else document.getElementById("R"+index).checked = "";
}

function validate() {   
    var isok = false;
    var nb_checked = 0;

    for(var i =1; i<6; i++) {
        var el = document.getElementById("R"+i);

        if(el.checked)
            nb_checked++;

    }   

    if(nb_checked < 3) alert("Enter at least 3 responses!");
    else
        isok = true;

    return isok;
}

</script>

<head>

<body>

<form onsubmit="return validate();" method="post" action="http://www.google.com">

    <table width="100%" border="1">
    <tr>
      <td>Question</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
        <td width="98">Response Type<font color="#CC0000">*</font></td>
        <td>
        <input type="radio" value="1" name="Ra" onClick="showresponse(1)"> 
        True/False
        <input type="radio" value="2" name="Rb" onclick="showresponse(2)">Single 
        Best Answer
        <input type="radio" value="3" name="Rc" onclick="showresponse(3)">Multiple 
        Answers</td>
    </tr>

      <td width="98" valign="top"><span id="lbl" >Add Response<font color="#CC0000">*</font></span></td>
      <td>
            <table border="0" width="425" cellspacing="0" id="response2" cellpadding="5">
            <tr>
                <td width="161">
                <input type="text" name="cb1" size="20" style="width:300px;" maxlength="100" 
                    onkeyup="toggle_checkbox(this, 1);" ondragstart="return false"></td>
                <td>
                <input type="radio" value="1" name="R1" id="R1" disabled> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb2" size="20"  style="width:300px;" maxlength="100"
                    onkeyup="toggle_checkbox(this, 2);" ondragstart="return false"></td>
                <td>
                <input type="radio" value="2"  name="R2" id="R2" disabled> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb3" size="20" style="width:300px;" maxlength="100"
                    onkeyup="toggle_checkbox(this, 3);" ondragstart="return false"></td>
                <td>
                <input type="radio" value="3" name="R3" id="R3" disabled> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb4" size="20"  style="width:300px;" maxlength="100"
                    onkeyup="toggle_checkbox(this, 4);" ondragstart="return false"></td>
                <td>
                <input type="radio" value="4"  name="R4" id="R4" disabled> 
                Answer</td>
            </tr>
            <tr>
                <td width="161">
                <input type="text" name="cb5" size="20"  style="width:300px;" maxlength="100"
                    onkeyup="toggle_checkbox(this, 5);" ondragstart="return false"></td>
                <td>
                <input type="radio" value="5" name="R5" id="R5" disabled> 
                Answer</td>
            </tr>
            </table> 
        </td>   
    </tr>
    </table>

    <input type="submit" value="SUBMIT"/>

</form>

</body>
</html>

PS: Change the action attribute of the form. I set google's url just to let you see the redirection when the form is valid.

Hope this helps. Let me know if you have any questions.