Error: cannot read the value of the 'null' property

Question

I am extremely new to javascript, so I apologize in advance for any problems with the way I ask my question. I try to publish the data and a warning appears if all the fields are empty. And one of the fields is the radio. Here is the jsfiddle link with my script http://jsfiddle.net/J2yWQ/64/

Here is what I have at the moment

function emailWarning() { var check = document.getElementById("check"); check.className = 'show'; } function validateEmail(xem) { var re = /\ S+@ \S+\.\S+/; return re.test(xem); } function postData() { email = 'email'+document.getElementById('email').value; var tt = validateEmail(email); if (tt == true) { xmlhttp.open('POST', 'payment.php', true); xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xmlhttp.send(myProps.join("&")); } else { emailWarning(); } } function insert() { try { if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } var myProps = []; function addProp(id) { var value = encodeURIComponent(document.getElementById(id).value); myProps.push(id + "=" + value); } addProp('child_name'); addProp('age'); addProp('hometown'); addProp('boy_girl'); addProp('first_name'); addProp('last_name'); addProp('email'); addProp('address1'); addProp('address2'); addProp('city'); addProp('state'); addProp('zip'); addProp('country'); var flagInvalid = false; var tempArray = document.getElementsByClassName("required"); for (var i = 0; i < tempArray.length; i++) { if (tempArray[i].value == "") { flagInvalid = true; break; } } if (flagInvalid == false) { postData(); } else { var log = document.getElementById("log"); log.className = 'show'; var log1 = document.getElementById("log1"); log1.className = 'show'; var log2 = document.getElementById("log2"); log2.className = 'show'; var log3 = document.getElementById("log3"); log3.className = 'show'; var log4 = document.getElementById("log4"); log4.className = 'show'; var log5 = document.getElementById("log5"); log5.className = 'show'; var log6 = document.getElementById("log6"); log6.className = 'show'; var log7 = document.getElementById("log7"); log7.className = 'show'; var log8 = document.getElementById("log8"); log8.className = 'show'; var log9 = document.getElementById("log9"); log9.className = 'show'; var log0 = document.getElementById("log0"); log0.className = 'show'; var logA = document.getElementById("logA"); logA.className = 'show'; } } catch (e) { alert('An error occured in inert: ' + e); } } 

Answer 1

The problem breaks easily when the body of addProp changes to this:

 function addProp(id) { var el = document.getElementById(id); if (el) { myProps.push(id + "=" + encodeURIComponent(el.value)); } else { alert('Not found: ' + id); } } 

boy_girl and email not in this HTML:

 Boy: <input type="radio" name="boy_girl" id="boy_girl_b" value="boy"/> Girl:<input type="radio" name="boy_girl" id="boy_girl_g" value="girl"/></li> ... <input type="text" name="email" id="check" maxlength="64" class="required" /> 

You can fix it something like this:

 function addProp(name) { var els = document.getElementsByName(name); if (els.length) { myProps.push(name + "=" + encodeURIComponent(els[0].value)); } else { alert('Not found: ' + name); } } 

---

But in fact, this is only the beginning of the story. myProps are local to the insert function, but referenced by the postData function; you show validation error signs for all fields no matter what fields were actually filled ... Also, your code is a bit WET - for example, all of these

  var log = document.getElementById("log"); log.className = 'show'; var log1 = document.getElementById("log1"); log.className = 'show'; ... 

... easily transforms into this:

 var showValidationError = function(id) { var el = document.getElementById(id); if (el) { el.className = 'show'; } else { alert('Missing element #' + id); } } ... showValidationError('log'); for (var i = 1; i < 10; i++) { showValidationError('log' + i); } 

I understand that you are completely fresh with JS; but it’s not about freshness, but about the organization of your code.

Answer 2

I am sure that one of the addProp lines is incorrect.

Debug this, see what is the last id before the error is reset.

 function addProp(id) { console.log(id); var value = encodeURIComponent(document.getElementById(id).value); myProps.push(id + "=" + value); } 

And when you do, you will know that the line

 addProp('boy_girl'); 

will fail because id is missing

  <span id="log4" class="hidden" style="color:red"><b>*</b></span> Boy: <input type="radio" name="boy_girl" id="boy_girl_b" value="boy"/> Girl:<input type="radio" name="boy_girl" id="boy_girl_g" value="girl"/></li> 

So, replace the function with an id check, and then check the name if id does not exist.

 function addProp(id) { var input = document.getElementById(id); if (!input) { input = document.forms[0][id]; } var value = encodeURIComponent(input.value); myProps.push(id + "=" + value); } 

Change it so that myProps are outside the function.

 var myProps = []; //<--- Added this line function insert() { try { if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } myProps = []; //<---- Changed this line function addProp(id) { var input = document.getElementById(id); if(!input) { input = document.forms[0][id]; } console.log(input); var value = encodeURIComponent(input.value); myProps.push(id + "=" + value); } addProp('child_name'); 

Answer 3

if you get this error:

always check all documents document.getElementById if they don't return null

 var node = document.getElementById('someid'); if(node){ do something; } 

but note that

 var node = document.getElementById('someid').value; 

or

 var node = document.getElementById('someid'); if(node.value){ do something; } 

may still throw a "cannot read null property" error, since you are not checking if the node is really

Answer 4

Make sure you design the identifiers that exist on the page! For example, boy_girl does not exist! Only boy_girl_b and boy_girl_g The same goes for mail. It has id check instead of mail.

Use the dragonfly Opera or something similar to fix the underlying problems.