[Javascript] If checkbox C_1 is selected fields required?

Collapse
X
Collapse
 
  • Page of 3
  • Time
  • Show
Clear All
new posts
Previous 1 2 3 template Next
  • viki1967
    Contributor
    • Oct 2007
    • 263
    #1

    [Javascript] If checkbox C_1 is selected fields required?

    Hi all.

    I have this simple form.

    I need if checkbox C_1 is selected:

    1) field name="n_1" is required and accept only numbers;
    2) field name="n_2" is required and accept only numbers;

    I need if checkbox C_2 is selected:

    3) field name="n_3" is required and accept only numbers;
    4) field name="n_4" is required and accept only numbers;

    If checkbox not selected no required fields.

    Can you help me?

    Code:
      
<html>
<head>
 
<title>Popup</title>
 
<script language="javascript" type="text/javascript">
<!--
 
function Go(){
 
var f=document.getElementById('id_form')
var s='';
var re = new RegExp("^[0-9]+$");
 
for(var i=0;i<f.elements.length;i++){
 
if(f.elements[i].value == ""){
alert("KO!");
f.elements[i].focus();
return false;
 
}else if(f.elements[i].value.match(re)){
alert("Only numbers!");
f.elements[i].focus();
return false;
 
}else{
  s+=f.elements[i].value+',';
}
} 
  alert("OK.");
 
}
 
//-->
</script>
 
</head>
 
<body>
  
<form id="id_form" name="myform">
  
<div align="center">
<table border="0" id="table1">
     
<td class=blub align="center"><input type="checkbox" name="C_1" value="ON"></td> 
<td class=blub align="center"><input type="text" id="n_1" name="n_1" size="5"></td> 
<td class=blub align="center"><input type="text" id="n_2" name="n_2" size="5"></td>

<td class=blub align="center"><input type="checkbox" name="C_2" value="ON"></td> 
<td class=blub align="center"><input type="text" id="n_1" name="n_3" size="5"></td> 
<td class=blub align="center"><input type="text" id="n_2" name="n_4" size="5"></td>
  
<td class=blub align="center"><a href="#" onclick="Go();">Go</a></td>
 
</tr>
            
</table>
 </div>
 
</form>
  
</body>
</html>
    Tags: None
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      you could (use two forms,) query the checkboxes with {checkbox_eleme nt}.checked and then select the forms/form elements to check for valid input.

      regards

      PS: you can omit the href attribute, if you style those anchors with css

        Comment

        • viki1967
          Contributor
          • Oct 2007
          • 263
          #3
          Originally posted by Dormilich
          you could (use two forms,) query the checkboxes with {checkbox_eleme nt}.checked and then select the forms/form elements to check for valid input.

          regards

          PS: you can omit the href attribute, if you style those anchors with css
          mmm sorry but I dont understand....

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              Originally posted by viki1967
              mmm sorry but I dont understand....
              what don't you understand? the checkbox thing? well every checkbox element has a property called 'checked'. you can test if this property is true or false and depending on that you can do the validation.

              regards

                Comment

                • viki1967
                  Contributor
                  • Oct 2007
                  • 263
                  #5
                  Originally posted by Dormilich
                  what don't you understand? the checkbox thing? well every checkbox element has a property called 'checked'. you can test if this property is true or false and depending on that you can do the validation.

                  regards
                  No... I don't understand: "use two forms"....
                  one example please?

                    Comment

                    • Dormilich
                      Recognized Expert Expert
                      • Aug 2008
                      • 8694
                      #6
                      the two forms idea was only to point out that you need something to sort out which elements are checked with the first checkbox and which with the second. I've seen several possibilities
                      - group the elements by a class name (using later the getElementsByCl assName() function)
                      - group the elements inside a wrapper element that is accessible via its id (this can be any, including form, div, span, table,...)
                      * if you use form as wrapper you have access through {form}.elements
                      * if you use generic elements you have access through {element}.child Nodes
                      - assign an id to every input element and access them through a JS array that contains the appropriate ids

                      so, which one you choose depends on what you want to do with the form later and what you like best.

                      the two forms idea occurred to me because so it is possible to send only the required form.

                      regards

                      PS: as for the 'go' link
                      [HTML]// html
                      <span class="go" id="gocheck">Go !</span>

                      // css
                      .go {
                      text-decoration: underline;
                      color: _your_link_colo r_;
                      background-color: _your_link_back ground_color_;
                      }

                      .go:hover {
                      color: _your_link_colo r_on_hover_;
                      background-color: _your_link_back ground_color_on _hover_;
                      }

                      // javascript
                      var link = document.getEle mentById("goche ck");
                      link.addEventLi stener("click", Go, false); // standard
                      link.attachEven t("onclick", Go); // IE[/HTML]

                        Comment

                        • Dormilich
                          Recognized Expert Expert
                          • Aug 2008
                          • 8694
                          #7
                          One more thought. you could also use parseInt() or parseFloat() to check for a number.

                          regards

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032
                              #8
                              If I'm not mistaken, the requirement is that the two fields n_1/n_2 are mandatory if the first checkbox is checked and the other two if the 2nd one is checked which doesn't mean that they shouldn't be sent if they are filled. In other words, I don't think two forms would be a good idea, but, as I said, I may be mistaken.

                                Comment

                                • Dormilich
                                  Recognized Expert Expert
                                  • Aug 2008
                                  • 8694
                                  #9
                                  Originally posted by acoder
                                  If I'm not mistaken, the requirement is that the two fields n_1/n_2 are mandatory if the first checkbox is checked and the other two if the 2nd one is checked which doesn't mean that they shouldn't be sent if they are filled. In other words, I don't think two forms would be a good idea, but, as I said, I may be mistaken.
                                  yea, it all depends on how the form data shall be sent, but it was not specified in the original post, so this idea popped up in my mind.

                                    Comment

                                    • viki1967
                                      Contributor
                                      • Oct 2007
                                      • 263
                                      #10
                                      sorry but I do not know this method....

                                        Comment

                                        • acoder
                                          Recognized Expert MVP
                                          • Nov 2006
                                          • 16032
                                          #11
                                          The basic idea is that when C1 is checked put the validation for the corresponding fields:
                                          [code=javascript]// C1 is checkbox ref.
                                          if (C1.checked) {
                                          // validation of fields...
                                          }[/code]

                                            Comment

                                            • viki1967
                                              Contributor
                                              • Oct 2007
                                              • 263
                                              #12
                                              Originally posted by acoder
                                              The basic idea is that when C1 is checked put the validation for the corresponding fields:
                                              [code=javascript]// C1 is checkbox ref.
                                              if (C1.checked) {
                                              // validation of fields...
                                              }[/code]
                                              Not working... no error but the form is validate until the checkbox no selected

                                              Code:
                                              function Go(){

var f=document.getElementById('id_form')
var s="";
var re = new RegExp("^[0-9]+$");

for(var i=0;i<f.elements.length;i++){

if(f.elements[i].type=="checkbox" && f.elements[i].checked); {

if(f.elements[i].value == ""){
alert("KO!");
f.elements[i].focus();
return false;
}else

if(!f.elements[i].value.match(re)){
alert("Only numbers!");
f.elements[i].focus();
return false;

}else{
  s+=f.elements[i].value+',';
}
}
}

  alert("OK!");


}

                                                Comment

                                                • Dormilich
                                                  Recognized Expert Expert
                                                  • Aug 2008
                                                  • 8694
                                                  #13
                                                  This code looks as if only the selected checkbox is checked (and of cause the checkbox value is not a number). there's no correlation which elements are to be checked if any of the checkboxes is selected. (either you do a second for loop, or you use fixed values for the checkbox if-statement)

                                                    Comment

                                                    • viki1967
                                                      Contributor
                                                      • Oct 2007
                                                      • 263
                                                      #14
                                                      Originally posted by Dormilich
                                                      This code looks as if only the selected checkbox is checked (and of cause the checkbox value is not a number). there's no correlation which elements are to be checked if any of the checkboxes is selected. (either you do a second for loop, or you use fixed values for the checkbox if-statement)
                                                      I'am confused...

                                                      Code:
                                                      
function Go(){

var f=document.getElementById('id_form')
var s="";
var re = new RegExp("^[0-9]+$");

for(var i=0;i<f.elements.length;i++) {

  if (f.elements[i].checked)
    {

if(f.elements[i].value.length <= 0) {
alert("Non va bene!");
f.elements[i].focus();
return false;
}else

  s+=f.elements[i].value+',';
}
}

  alert("OK!");


}

                                                        Comment

                                                        • acoder
                                                          Recognized Expert MVP
                                                          • Nov 2006
                                                          • 16032
                                                          #15
                                                          Don't loop over the elements array. Use fixed names/ids. That will allow you to get the correct elements. You could use the elements array/object if you provide names or set IDs and use document.getEle mentById().

                                                            Comment

                                                            Previous 1 2 3 template Next
                                                            Working...