admin管理员组文章数量:1326447
I am extremely new to javascript and so I apologize in advance for any problems with the way I am asking my quesion. I am trying to post data and have a warning pop up if all fields are not filled out. And one of the fields is a radio type. Here is a link to a jsfiddle with my script /
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);
}
}
I am extremely new to javascript and so I apologize in advance for any problems with the way I am asking my quesion. I am trying to post data and have a warning pop up if all fields are not filled out. And one of the fields is a radio type. Here is a link to a jsfiddle with my script http://jsfiddle/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);
}
}
Share
Improve this question
edited Oct 24, 2012 at 12:50
Daniel A. White
191k49 gold badges379 silver badges465 bronze badges
asked Oct 24, 2012 at 12:47
CTVikingCTViking
971 silver badge5 bronze badges
5
- 1 what line does the error happen? – Daniel A. White Commented Oct 24, 2012 at 12:49
- Where do you declare the logX Elements? – nja Commented Oct 24, 2012 at 12:51
- It doesn't say which line. The "catch" is catching it because I am getting the text ' An error occurred in inert: ...' – CTViking Commented Oct 24, 2012 at 12:51
- @nja - those are the IDs in spans that are hidden and bee shown (or should) when a field is left blank. – CTViking Commented Oct 24, 2012 at 12:52
- It happens here:function addProp(id) { Unhandled Error: Cannot convert 'document.getElementById(id)' to object var value = encodeURIComponent(document.getElementById(id).value); myProps.push(id + "=" + value); – nja Commented Oct 24, 2012 at 12:55
4 Answers
Reset to default 2The problem is easily catched when addProp
body is changed to this:
function addProp(id) {
var el = document.getElementById(id);
if (el) {
myProps.push(id + "=" + encodeURIComponent(el.value));
}
else {
alert('Not found: ' + id);
}
}
Both boy_girl
and email
IDs are not present 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 with 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, it's only the beginning of the story. myProps
are local to insert
function yet referenced in postData
function; you show validation error signs for all the fields no matter what fields were actually filled... Besides, your code is a bit WET - for example, all these
var log = document.getElementById("log");
log.className = 'show';
var log1 = document.getElementById("log1");
log.className = 'show';
...
... can be easily transformed 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 do understand that you're quite fresh with JS; but it's not about freshness, it's about organizing your code.
I am betting one of the addProp lines is not correct.
Debug this, see what is the last id before the error is thrown.
function addProp(id) {
console.log(id);
var value = encodeURIComponent(document.getElementById(id).value);
myProps.push(id + "=" + value);
}
And when you do that, you will find out that the line
addProp('boy_girl');
will fail since there is no id
<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 let us change the function to check for id, and than check for the name if the 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 myProps is outside of 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');
if you get such error:
always check all your document.getElementById if they don't return null
var node = document.getElementById('someid');
if(node){
do something;
}
but mark that
var node = document.getElementById('someid').value;
or
var node = document.getElementById('someid');
if(node.value){
do something;
}
can still throw the error "can't read property of null", as you don't check if node really exists
Make sure that you're designed IDs are existing on the page!
For example boy_girl
does not exist! Only boy_girl_b
and boy_girl_g
The same applies for the mail. This one has the id check
instead of mail.
Use Opera dragonfly or anything alike for basic troubleshooting
本文标签: javascriptError Cannot read property 39value39 of nullStack Overflow
版权声明:本文标题:javascript - Error: Cannot read property 'value' of null - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742213140a2434083.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论