Question

Lets clarify my question,

I want to make an element which the element contains 5 fields so I dont want the user should be able to put in a new element if the old one is null, so I made the alert when looping through the old element and see if there is some strings, if not then dont put a new element and make an alert please fill out all fields

Here again my code

function addEvent() {
      var ni = document.getElementById('discount'); // Takes the a div named discount
      var discountForm = document.getElementById('discountForm'); // Takes the a form named discountForm
      var numi = document.getElementById('theValue'); // Takes the a hidden input field named theValue
      var num = (document.getElementById("theValue").value -1)+ 2; // Start counting to set the new divs form numbers
      numi.value = num;
      var divIdName = "my"+num+"Div"; // the new divs will be named
      var allDivTags = discountForm.getElementsByTagName('div'); // take all div tags
      var numOfDivs = (allDivTags.length -1); // take the number of the old div
      var oldDivIdName = document.getElementById(allDivTags[numOfDivs].id); // old div id
      var newdiv = document.createElement('div'); //the new div
      newdiv.setAttribute("id",divIdName);
      newdiv.innerHTML = "Company <select name=\"company[]\"><option value=\"\"></option><option value=\"ZI\">Avis</option><option value=\"ET\">Enterprise</option><option value=\"ZE\">Hertz</option><option value=\"ZD\">Budget</option><option value=\"ZR\">National</option><option value=\"AL\">Alamo</option></select> Discount Type <select name=\"type[]\"><option value=\"CD\">Discount Number</option><option value=\"PC\">Coupon Number</option></select> Code <input name=\"code[]\" type=\"text\"> Title <input name=\"title[]\" type=\"text\"> <a href=\"javascript:;\" onclick=\"removeElement(\'"+divIdName+"\')\">Remove</a>"; // creating the fileds in the new div
      ni.appendChild(newdiv);
      for(i=0; i<discountForm.elements.length;i++){ // loop through the divs
          if(numOfDivs != i-1){ // if tho old div exist and if the old div fields are empty
            if(oldDivIdName.children[i].value.length == 0){
              removeElement(divIdName); // then dont put the new one
              alert('Please enter all fields');
            }
          }
      }

    }

But my problem is that in IE comes out an error children[...].value.length is null or not an object so I trying to figure how to fix it,

I hope its more clearly for you now.

Answer 1

It’s very hard to tell from the information you’ve given us. But my first guess is the following:

for(i=0; i<discountForm.elements.length;i++){
  if(numOfDivs != i-1){
    if(oldDivIdName.children[i].value.length == 0){
      removeElement(divIdName);
      alert('Please enter all fields');
    }
  }
}

Above you’re doing:

oldDivIdName.children[i]

But i is defined as the number of elements in the form from what I can see… not the number of children of the oldDivIdName. If there are more elements in the form than there are in oldDivIdName then the value of oldDivIdName.children[i] will be null. And “value” is not defined on null.