At one point in the last 24 hours, I had a working function called get_contact_info which returned the contents of a series of text inputs. Suddenly the code stopped returning the values and began returning "undefined" as the element values, though noting had been changed in the code or html.
custom.js contains the following
var first_name, last_name, email, phone_number;
var contact_info = [];
function get_contact_info(){
alert("This is the function called by the button");
}
/* contact_info[0] = document.getElementsByName('fname').value;
contact_info[1] = document.getElementsByName('lname').value;
contact_info[2] = document.getElementsByName('email').value;
contact_info[3] = document.getElementsByName('phone').value;
alert("Name = " + contact_info[0] + " " + contact_info[1]);
alert("Email = " + contact_info[2] + ", Phone Number " + contact_info[3]);
};*/
}());
My html is the following:
<form>
<table>
<tbody>
<tr><div class="custom text" style="color: red"><strong>Please enter your contact info to create a quote</strong></div></tr>
<tr><td></td></tr>
<tr>
<td><strong>First Name:</strong></td>
<td><input type="text" id="fname" value="Joe"/></td>
</tr>
<tr>
<td><strong>Last Name:</strong></td>
<td><input type="text" id="lname" value="Johnson"/></td>
</tr>
<tr>
<td><strong>Email:</strong></td>
<td><input type="text" id="email" value="[email protected]"/></td>
</tr>
<tr>
<td><strong>Phone Number:</strong></td>
<td><input type="text" id="phone" size="15" value="555-1212"/></td>
</tr>
<tr>
<td><input id="contact_info" type="submit" value="Set My Contact Info" onClick="get_contact_info()" /></td>
</tr>
</tbody>
</table>
</form>
Am I implementing this incorretly? I am attempting to teach myself basic javascript but I seem to be failing on this piece and don't see where.
Using Firebug in Firefox v30.0, a console call to document.getElementsByName('fname').value; returns "undefined" document.getElementsByName('fname'); returns a NodeList, but no elements.
sigh
The code you posted has syntax errors, and the part that seems to be throwing an error is commented out. As others have said, you have a problem with getElementsByName and getElementById. But your issues go further than that.
A form can be submitted without clicking the submit button, so it's usual to attach listeners that should run when the form is submitted to the form's submit handler. It also helps to pass a reference to the form using this (the reason will become clear later):
<form onsubmit="get_contact_info(this)" ...>
Form controls are only submitted if they have a name, giving them an ID is usually unnecessary, so change the IDs to names:
<td><input type="text" name="fname" value="Joe"></td>
And the submit button becomes:
<input type="submit" value="Set My Contact Info">
Now you also have a very convenient way to access the form controls using their name as properties of the form. Since a reference to the form was passed in the call (see above), the function can be:
var contact_info = [];
function get_contact_info(form) {
contact_info[0] = form.fname.value;
contact_info[1] = form.lname.value;
contact_info[2] = form.email.value;
contact_info[3] = form.phone.value;
alert("Name = " + contact_info[0] + " " + contact_info[1]);
alert("Email = " + contact_info[2] + ", Phone Number " + contact_info[3]);
}
Also note that getElementsByName returns a live NodeList that doesn't have a value property, so if you were going to use it, you'd use it like:
document.getElementsByName('email')[0].value
You could also create the array using an array literal:
contact_info = [form.fname.value, form.lname.value, form.email.value, form.phone.value];
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다