Java script checking form elements

3vra · 02-02-2009, 10:05 AM

I am trying to check two form elements with javascript before the form is submitted but I am a bit challenged.

function validate_required (){
for(i=0; i<document.inventory_sys.elements.length; i++){
if (document.inventory_sys.elements[i].type == "checkbox"){
if (document.inventory_sys.elements[i].checked == false){
if (document.inventory_sys.elements[i].type == "text"){
if (document.inventory_sys.elements[i].value == ""){
alert ("Nothing has been entered");
}
}
}
}

}
when the above code is executed nothing happens but when the last two if statements are commented out the alert message pops up.Can someone please help me understand whats happening and possibly some assistance with solving this problem.

gn000we · 02-03-2009, 04:43 AM

You have nested the ifs!

Also it helps to indent the code too, so you can see what it's doing.

(a cutting from your code, indented)

Code:

for(i=0; i<document.inventory_sys.elements.length; i++)
{
   if (document.inventory_sys.elements[i].type == "checkbox")
   {
      if (document.inventory_sys.elements[i].checked == false)
      {
          if (document.inventory_sys.elements[i].type == "text")
          {

etc..

My example code with indenting..

Code:

if (myVar == "123")
{
   alert("Hello, I am 123");

   if (theOtherVar == "456")
   {
       alert("Hello, I am 456");
      
       if (myVar == "789")
       {
           alert("Hello, I am 789");    
       }

   }   

}

You will never see the message "Hello, I am 789" as myVar is already = "123".

I haven't tested this code, but..
I presume this is what you need:

Code:

function validate_required (){
   
   //We are setting a boolean variable to return if empty form
   var blnRetReady = true; //valid, unless made false!

   //Note: Two pipe symbols (SHIFT + \) means 'or', two ampersands mean 'and', and two equals mean 'equal to', etc.

   for(i=0; i<document.inventory_sys.elements.length; i++){
      if ((document.inventory_sys.elements[i].type == "checkbox") &&
(document.inventory_sys.elements[i].checked == false))
      {
          blnRetReady = false;
      }

      if ((document.inventory_sys.elements[i].type == "text") && (document.inventory_sys.elements[i].value == ""))
      {
          blnRetReady = false;
      }

   }
   
   //Alert the user that the form is not valid
    if (!blnRetReady){
       alert ("Nothing has been entered");
    }

   //You may want to return this boolean aswell
   //This stops the form submitting
   //Make sure that the js event on the element has return too e.g. 
   //<INPUT type='submit' value='Send' onClick='return validate_required();'>

   return blnRetReady;

}

There are probably better ways of doing it than this.
Better than nothing mind you!

3vra · 02-03-2009, 02:51 PM

My aim is to compare the text boxes with the check boxes.If a text box has a value then it must have a corresponding checkbox checked and vice versa. If other wise alert an error

gn000we · 02-03-2009, 05:06 PM

Quote:

Originally Posted by 3vra

My aim is to compare the text boxes with the check boxes.If a text box has a value then it must have a corresponding checkbox checked and vice versa. If other wise alert an error

This time I will show you the door, then you can do with it as you please!

I would use document.getElementById("relevantID") to get the id. Remember to ID tag your form elements e.g. make all ids something like "chkbx-1" and "txtbx-1".
I think there's another one called document.getElementByName, but I personally find this function annoying. If you can make it work, without pulling your hair out, by all means, use it.

Look at this site..
http://www.javascriptkit.com/jsref/elements.shtml
It looks like you can use document.inventory_sys.elements[i].name
Give that a shot!

You could:

identify the elements individually using a massive if statement (manual slavery and bad coding practice, but if it's just going to be two boxes always, a quick-win solution might be in order).
identify all boxes from 1 to a static number (e.g. 5) hard coded. Again this is bad coding practice, but still good for a quick win for some.
have another field called "maxids" with the value of the max elements and then loop the elements and their corresponding ids. Coding wise this is better but..
do a for loop in javascript which (before working out any of the values for the elements) loops through and finds the maximum number of elements referenced "chkbx-1" and "txtbx-1", storing the counting in a variable. This is globally better. If you wanted you could also have this as a seperate function and then feed the function the templates for both checkboxes and textboxes (and you could make it global too!).

Make sure the corresponding textbox and checkbox are filled in, then either alert them on the spot, or save the alert in an array, then loop the array of alerts at the end, with a false return variable for the function as per non valid entry.
Another tip: Use variables like I did in the example e.g. if (!(blnChkEnabled && blnTxtEntered))..

There's lots of ways to skin a cat!

3vra · 02-05-2009, 09:04 AM

Okay I have utilized the getElementByname to access the elements and it works but not 100%.

var checkBox = document.getElementsByName("mlis_item["+i+"]")[0];
var textBox = document.getElementsByName("quantity["+i+"]")[0];
for (i=0; i<=6;i++) {
if (checkBox.checked == false && textBox.value.length == 0) {
alert ("Nothing has been entered!");
return false;
}
if (checkBox.checked == true && textBox.value.length == 0) {
alert ("Please enter a corresponding amount!");
return false;
}
if (checkBox.checked == false && textBox.value.length >0) {
alert ("Please select a corresponding item");
return false;
}
if (checkBox.checked == true && textBox.value.length != 0) {
alert ("Click okay to submit form!");
return false;
}

}
It works for the first three block of codes but for the last block it does not 100%.eg. If the condition is true when nothing is checked checked or entered it alerts the message which is okay but if three items are checked they have only two corresponding values the message still pops up which is not okay.

shyamkumar1986 · 02-07-2009, 06:30 AM

Try the following things:

* Put alert messages in each of the if blocks. This will ensure that you know what is going wrong!

* If you are using Firefox as your browser - Use the FireBug plugin (its free to download and install). It makes debuging Javascript issues a breeze!

Hope this helps!