I am a beginner in javascript and was just trying to implement a simple form. However, I am unable to submit it since the values that are entered in the textbox are not getting passed further to the function that I call on clicking the submit button.
I have seen similar questions and even followed the answers still for some reason I only get undefined instead of the data passed.
Below is the code:
Html:
<form >
First Name:
<input
type="text"
id="txtfirstName"
/>
Second Name:
<input
type="text"
id="txtsecondName"
/>
User Name:
<input
type="text"
id="txtuserName"
/>
Email:
<input
type="text"
id="txtemail"
/>
Password:
<input
type="password"
id="txtpassword"
/>
<input
type="button"
id= "btnsubmit"
value="SUBMIT"
onclick="submit("name","surname","user","mail","word")"
/>
</form>
<script>
var fname = "";
var sname = "";
var uname = "";
var email = "";
var password = "";
var submitButton = document.getElementById("btnsubmit");
submitButton.onclick = function submit(fname,sname,uname,email,password) {
confirm("Are you sure you want to submit the form?");
if(confirm) {
alert("Below is the data entered by you:" + "\n" + fname + "\n" + sname + "\n" + uname + "\n"
+ email + "\n" + password )
}
}
</script>
The function called at the onclick attribute for the input does not exist and it will never work.
What you did was almost correct. You added the click event for the submit button that calls a function. That function will always (i think so) have one parameter (Event type) and not those added by you.
In order to retrieve the values for the inputs, you need to retrieve them in that function.
Check the snippet below.
var submitButton = document.getElementById("btnsubmit");
submitButton.onclick = function submit() {
confirm("Are you sure you want to submit the form?");
if(confirm) {
var fname = document.getElementById('txtfirstName').value;
var sname = document.getElementById('txtsecondName').value;
var uname = document.getElementById('txtuserName').value;
var email = document.getElementById('txtemail').value;
var password = document.getElementById('txtpassword').value;
alert("Below is the data entered by you:" + "\n" + fname + "\n" + sname + "\n" + uname + "\n"
+ email + "\n" + password )
}
}
<form >
First Name:
<input
type="text"
id="txtfirstName"
/>
Second Name:
<input
type="text"
id="txtsecondName"
/>
User Name:
<input
type="text"
id="txtuserName"
/>
Email:
<input
type="text"
id="txtemail"
/>
Password:
<input
type="password"
id="txtpassword"
/>
<input
type="button"
id= "btnsubmit"
value="SUBMIT"
/>
</form>
Here I fixed that:
<form >
First Name:
<input
type="text"
id="txtfirstName"
/>
Second Name:
<input
type="text"
id="txtsecondName"
/>
User Name:
<input
type="text"
id="txtuserName"
/>
Email:
<input
type="text"
id="txtemail"
/>
Password:
<input
type="password"
id="txtpassword"
/>
<input
type="button"
id= "btnsubmit"
value="SUBMIT"
/>
</form>
<script>
var submitButton = document.getElementById("btnsubmit");
submitButton.onclick = function () {
var fname = document.getElementById("txtfirstname").value;
var sname = document.getElementById("txtsecondname").value;
var uname = document.getElementById("txtusername").value;
var email = document.getElementById("txtemail").value;
var password = document.getElementById("password").value;
confirm("Are you sure you want to submit the form?");
if(confirm) {
alert("Below is the data entered by you:" + "\n" + fname + "\n" + sname + "\n" + uname + "\n"
+ email + "\n" + password )
}
}
</script>
Here is a fiddle working:
https://jsfiddle.net/Lk9t0bxj/
<form>
First Name:
<input
type="text"
id="txtfirstName"
/>
Second Name:1
<input
type="text"
id="txtsecondName"
/>
User Name:
<input
type="text"
id="txtuserName"
/>
Email:
<input
type="text"
id="txtemail"
/>
Password:
<input
type="password"
id="txtpassword"
/>
<input
type="button"
id= "btnsubmit"
value="SUBMIT"
onclick="submit()"
/>
</form>
Javascript:
var fname = "";
var sname = "";
var uname = "";
var email = "";
var password = "";
var submitButton = document.getElementById("btnsubmit");
submitButton.onclick = function submit() {
confirm("Are you sure you want to submit the form?");
if(confirm) {
fname = document.getElementById('txtfirstName').value;
sname = document.getElementById('txtsecondName').value;
uname = document.getElementById('txtuserName').value;
email = document.getElementById('txtemail').value;
password = document.getElementById('txtpassword').value;
alert("Below is the data entered by you:" + "\n" + fname + "\n" + sname + "\n" + uname + "\n"
+ email + "\n" + password )
}
}
There were some errors:
Confusion with quotation marks:
onclick="submit("name","surname","user","mail","word")"
There is no need to pass the name fields:
onclick="submit()"
You should get the field values and put it in the variables defined:
fname = document.getElementById('txtfirstName').value;
Another way of doing this is by adding onsubmit callback to your <form> element, and changing your <input> type to submit. You don't have to add in individual ids for all of your input, instead you can use event.target[INPUT_NAME] to get your input element, and get the value of that element with INPUT.value.
Working sample code :
const handleOnSubmit = event => {
event.preventDefault();
const { fname, sname, uname, email, password } = event.target;
confirm("Are you sure you want to submit the form?");
if (confirm) {
alert(
"Below is the data entered by you:" +
"\n" +
fname.value +
"\n" +
sname.value +
"\n" +
uname.value +
"\n" +
email.value +
"\n" +
password.value
);
}
};
<form onsubmit="handleOnSubmit(event)">
First Name:
<input type="text" name="fname" />
Second Name:
<input type="text" name="sname" />
User Name:
<input type="text" name="uname" />
Email:
<input type="text" name="email" />
Password:
<input type="password" name="password" />
<input type="submit" />
</form>
Other way to do this is use add.event.listener and template literals.
var submitButton = document.getElementById("btnsubmit");
submitButton.addEventListener("click", function(e){
e.preventDefault()
var fname = document.getElementById("txtfirstName").value;
var sname = document.getElementById("txtsecondName").value;
var uname = document.getElementById("txtuserName").value;
var email = document.getElementById("txtemail").value;
var password = document.getElementById("txtpassword").value;
confirm("Are you sure you want to submit the form?");
if(confirm) {
alert(`Below is the data entered by you: \n ${fname} \n ${sname} \n ${uname} \n ${email} \n ${password}`)
}
})
Related
I want to copy & combine values of lname, fname & mname into fullname automatically when I click the fullname field.
Here's the HTML:
<input type="text" class="form-control" id="lname">
<input type="text" class="form-control" id="fname">
<input type="text" class="form-control" id="mname">
<input type="text" class="form-control" id="fullname" onclick="namefunc()">
Javascript:
<script type="text/javascript">
$(document).ready(function () {
function namefunc() {
var n1 = $('#fname');
var n2 = $('#mname');
var n3 = $('#lname');
var fn = $('#fullname');
fn.val(n1.val() + " " + n2.val() + " " + n3.val());
}
});
</script>
Its not working. Please help!
As #Nicolay said in the comment, my function doesn't need to be in the doc ready handler, it can go directly inside the script tags. I tried this:
<script type="text/javascript">
function namefunc() {
var n1 = $('#fname');
var n2 = $('#mname');
var n3 = $('#lname');
var fn = $('#fullname');
fn.val(n1.val() + " " + n2.val() + " " + n3.val());
};
</script>
And it worked! :)
I am generating a form using javascript and then providing some form validation. Here is the code
generates the form after clicking registration button
register() {
//console.log('show me a registration form here!');
this.nevermind('LoginForm');
this.nevermind('RegistrationForm');
const regform = document.createElement('div');
regform.className = 'RegistrationForm';
regform.innerHTML = '<h2 style="margin:0px;padding:4px;font-
size:1.2em;text-
align:center;background:#eee;">PATRIC User Registration</h2>' +
'<form class=""><div style="padding:2px; margin:10px;"><table><tbody>' +
//'<tr><th>USERNAME</th></tr><tr><td><input type="text" name="username"
style="width:150px;"></td></tr>' +
'<tr><th>First Name <span style="color:red">*</span></th><th>Last Name
<span
style="color:red">*</span></th></tr><tr><td>' +
'<input class="firstname" type="text" name="first_name"
style="width:300px;"
onchange="registerClass.validateReg()">' +
'</td><td><input class="lastname" type="text" name="last_name"
style="width:300px;" onchange="registerClass.validateReg()">' +
'</td></tr><tr><th colspan="1">Email Address <span style="color:red">*
</span></th></tr><tr><td colspan="1">' +
'<input class="email" type="email" name="email" style="width:100%;"
onchange="registerClass.validateReg()" required>' +
'</td></tr><tr><th colspan="1">Password <span style="color:red">*</span>
</th></tr><tr><td colspan="1">' +
'<input class="password" pattern=".{8,}" title="8 characters minimum"
type="password" name="password" style="width:100%;"
onchange="registerClass.validateReg()"
onfocus="registerClass.validateReg()"
onkeydown="registerClass.validateReg()"
onkeyup="registerClass.validateReg()"required>' +
'</td></tr><tr><th colspan="2">Organization</th></tr><tr><td
colspan="2">
<div style="width:100%"><input class="organization" type="text"
name="affiliation" value=""></div></td></tr>' +
'<tr><th colspan="2">Organisms</th></tr><tr><td colspan="2"><div><input
class="organisms" type="text" name="organisms" value=""></div></td>
</tr>' +
'<tr><th colspan="2">Interests</th></tr><tr><td colspan="2"><div>
<textarea
class="interests" rows="5" cols="50" name="interests"
style="height:75px;"
value=""></textarea></div></td></tr>' +
'</tbody></table><p><span style="color:red">*</span> <i>Indicates
required
field</i></p></div><div style="text-
align:center;padding:2px;margin:10px;">'
+
'<div><button type="button" class="registerbutton"
onclick="registerClass.createUser()" style="display:none; margin-
bottom:-22px">Register New User</button>' +
'<button type="button"
onclick="registerClass.nevermind('RegistrationForm')">Cancel'+'
</button>
</div></div></form>' +
'<div class="registererror" style="color:red"></div>';
const home = document.getElementsByClassName('home');
home[0].insertBefore(regform, home[0].childNodes[0]);
//console.log(home[0].firstChild);
}
validates the form as the user enters into the above registration form
validateReg() {
//console.log('validating reg');
let fname = document.getElementsByClassName('firstname')[0].value;
let lname = document.getElementsByClassName('lastname')[0].value;
let email = document.getElementsByClassName('email')[0].value;
let validemail = document.getElementsByClassName('email')[0];
let password = document.getElementsByClassName('password')[0].value;
let validpass = document.getElementsByClassName('password')[0];
let registbutton = document.getElementsByClassName('registerbutton')[0];
if (fname !== '' && lname !== '' && email !== '' && password !== '') {
if (validemail.checkValidity() && validpass.checkValidity()) {
registbutton.style.display = 'block';
} else {
registbutton.style.display = 'none';
}
} else {
registbutton.style.display = 'none';
}
}
This is the failing test, that is not able to checkValitidy() of the email in the unit test (works fine in the form itself)
test('shows the submit butten when registration form is valid', () => {
document.body.innerHTML = '<div class="home"></div>';
reg.register();
document.getElementsByClassName('firstname')[0].value = 'Joe';
document.getElementsByClassName('lastname')[0].value = 'Smith';
document.getElementsByClassName('email')[0].value = 'joe#smith.com';
document.getElementsByClassName('password')[0].value = '123456789';
reg.validateReg();
let registbutton = document.getElementsByClassName('registerbutton')[0];
expect(registbutton.style.display).toBe('block');
});
This is all I did, but still kinda wondering why we can't call checkValidity()
const mockvalidity = function() {
return true;
};
document.getElementsByClassName('password')[0].checkValidity = mockvalidity;
document.getElementsByClassName('email')[0].checkValidity = mockvalidity;
I have a tiny problem with this college assignment. When the user inputs their data, an account id number is created. I've worked on that and it works like it should. But here's the problem: after the user clicks the submit button and the account id number is created, what they entered needs to be displayed below it. The assignment says I need to create a function called displayNewAccount and put in into one of the other functions. I put in inside the createEventListeners function. The text needs to be displayed in a custom ID (account) on the HTML page. The data entered into the first name input (fnameinput) should display after "First Name" (fname) and the last name input (lnameinput) should display after "Last Name" (lname) and so on. If the displayNewAccount function has to be moved inside another function then that is totally fine. I've looked online and found several examples, but I couldn't get them to work for me. What am I doing wrong? Thanks for the help.
HTML
<article>
<h2>New Account Information</h2>
<form>
<fieldset id="deliveryinfo">
<label>First Name</label><input type="text" id="fnameinput" name="fname">
<label>Last Name</label><input type="text" id="lnameinput" name="lname">
<label>Street Address</label><input type="text" id="addrinput" name="address">
<label>City</label><input type="text" id="cityinput" name="city">
<label>State</label><input type="text" id="stateinput" name="state">
<label>Zip</label><input type="text" id="zipinput" name="zip">
<label>Account ID</label><input type="text" id="accountidbox" name="accountid">
<input type="button" id="submitBtn" value="Create Account">
</fieldset>
<!-- New section -->
<fieldset>
<div id="account">
<!-- Data is displayed in here. -->
</div>
</fieldset>
</form>
</article>
JavaScript
var newAccountObject = {};
var newAccountSubmission;
function createID() {
var fname = document.getElementById("fnameinput");
var lname = document.getElementById("lnameinput");
var zip = document.getElementById("zipinput");
var account = document.getElementById("accountidbox");
var fields = document.getElementsByTagName("input");
var acctid;
var firstInit;
var lastInit;
if (fname !== "" || lname !== "" || zip !== "") {
firstInit = fname.value.charAt(0).toUpperCase();
lastInit = lname.value.charAt(0).toUpperCase();
acctid = firstInit + lastInit + zip.value;
account.value = acctid;
newAccountObject = {};
for(var i = 0; i < fields.length - 1; i++) {
newAccountObject[fields[i].name] = fields[1].value;
}
}
}
function createString() {
newAccountSubmission = JSON.stringify(newAccountObject);
}
function createEventListeners() {
var fname = document.getElementById("fnameinput");
var lname = document.getElementById("lnameinput");
var zip = document.getElementById("zipinput");
if (fname.addEventListener) {
fname.addEventListener("change", createID, false);
lname.addEventListener("change", createID, false);
zip.addEventListener("change", createID, false);
}
else if (fname.attachEvent) {
fname.attachEvent("onchange", createID);
lname.attachEvent("onchange", createID);
zip.attachEvent("onchange", createID);
}
if (button.addEventListener) {
button.addEventListener("click", createString, false);
}
else if (button.attachEvent) {
button.attachEvent("onclick", createString);
}
// Displays an account summary section when the "Create Account" button is clicked.
function displayNewAccount() {
document.getElementById("account").innerHTML = "First Name: " + fname + "<br>" + "Last Name: " + lname + "<br>" + "Address: " + addrinput + "<br>" + "City: " + cityinput + "<br>" + "State: " + stateinput + "<br>" + "Zip: " + zipinput + "<br>" + "Account ID: " + accountidbox;
}
if (window.addEventListener) {
window.addEventListener("click", displayNewAccount, false);
}
else if (window.attachEvent) {
window.attachEvent("onclick", displayNewAccount);
}
}
if (window.addEventListener) {
window.addEventListener("load", createEventListeners, false);
}
else if (window.attachEvent) {
window.attachEvent("onload", createEventListeners);
}
I am making a contact list in which I will be saving the contacts, but when I save one or more contact and refresh the page it doesn't save. I tried to put it in the local storage but it doesn't work. Can anyone help me with this?
HTML:
<br><br>
Name: <input id = "name" name = "name" type = "text">
<br><br>
Gender: <input name = "gender" type = "radio" value = "Male"> Male
<input name = "gender" type = "radio" value = "Female"> Female
<br><br>
Age: <input id = "age" name = "age" type = "text">
<br><br>
Number: <input id = "number" name = "number" type = "text">
<br><br>
Contact Type: <select id = "Contact_Type" name = "Contact_Type">
<option>none</option>
<option>Friend</option>
<option>Business</option>
<option>Educational</option>
</select>
<br><br>
Address: <input id = "Address" name = "Address" type = "text">
<br><br>
Post Code: <input id = "Post_Code" name = "Post_Code" type = "text">
<br><br>
Marital Status: <select id = "Marital_Status" name = "Marital_Status">
<option>none</option>
<option>Single</option>
<option>in relationship</option>
<option>Engaged</option>
<option>Married</option>
</select>
<br><br>
<input type = "button" value = " Reset " onclick = "ResetForm()">
<input type = "button" value = " Add " onclick = "AddData(), saveList()">
<input type = "button" value = "Remove contact" onclick = "Remove()">
</form>
JS:
function AddData() {
var x = document.getElementById("age").value;
var y = document.getElementById("name").value;
var letters = '/^[a-zA-Z]+$/';
if ((parseInt(x) != (x)) && (y == parseInt(y))) {
alert("Wrong Value Entered");
} else {
var rows = "";
var name = document.getElementById("name").value;
var gender = document.querySelector('input[name="gender"]:checked');
gender = gender ? gender.value : '';
var age = document.getElementById("age").value;
var number = document.getElementById("number").value;
var Contact_Type = document.getElementById("Contact_Type").value;
var Address = document.getElementById("Address").value;
var Post_Code = document.getElementById("Post_Code").value;
var Marital_Status = document.getElementById("Marital_Status").value;
rows += "<td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + number +"</td><td>" + Contact_Type + "</td><td>"+ Address + "</td><td>" + Post_Code+ "</td><td>" + Marital_Status +" </td>";
var tbody = document.querySelector("#list tbody");
var tr = document.createElement("tr");
tr.innerHTML = rows;
tbody.appendChild(tr)
saveList();
}
}
var saveList = function () {
"use strict";
var appts = JSON.stringify(contact);
if (appts !== "") {
localStorage.contact = appts;
} else {
window.alert("Could not save appointments at this time");
}
};
function ResetForm() {
document.getElementById("contact").reset();
}
Your code has several errors.
HTML table is not found.
You're invoking saveList function two times (in button event and at the end of AddData function).
You aren't passing the contact parameter to the saveList function.
You should read Clean Code Book for improve your coding =).
The code should be the next (you could check the key "contact" in your browser).
HTML:
<br>
<br> Name:
<input id="name" name="name" type="text">
<br>
<br> Gender:
<input name="gender" type="radio" value="Male"> Male
<input name="gender" type="radio" value="Female"> Female
<br>
<br> Age:
<input id="age" name="age" type="text">
<br>
<br> Number:
<input id="number" name="number" type="text">
<br>
<br> Contact Type:
<select id="Contact_Type" name="Contact_Type">
<option>none</option>
<option>Friend</option>
<option>Business</option>
<option>Educational</option>
</select>
<br>
<br> Address:
<input id="Address" name="Address" type="text">
<br>
<br> Post Code:
<input id="Post_Code" name="Post_Code" type="text">
<br>
<br> Marital Status:
<select id="Marital_Status" name="Marital_Status">
<option>none</option>
<option>Single</option>
<option>in relationship</option>
<option>Engaged</option>
<option>Married</option>
</select>
<br>
<br>
<table id="list">
<tbody>
</tbody>
</table>
<input type="button" value=" Reset " onclick="ResetForm()">
<input type="button" value=" Add " onclick="AddData()">
<input type="button" value="Remove contact" onclick="Remove()">
JS:
<script>
function AddData() {
var x = document.getElementById("age").value;
var y = document.getElementById("name").value;
var letters = '/^[a-zA-Z]+$/';
if ((parseInt(x) != (x)) && (y == parseInt(y))) {
alert("Wrong Value Entered");
} else {
var rows = "";
var name = document.getElementById("name").value;
var gender = document.querySelector('input[name="gender"]:checked');
gender = gender ? gender.value : '';
var age = document.getElementById("age").value;
var number = document.getElementById("number").value;
var Contact_Type = document.getElementById("Contact_Type").value;
var Address = document.getElementById("Address").value;
var Post_Code = document.getElementById("Post_Code").value;
var Marital_Status = document.getElementById("Marital_Status").value;
rows += "<td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + number + "</td><td>" + Contact_Type + "</td><td>" + Address + "</td><td>" + Post_Code + "</td><td>" + Marital_Status + " </td>";
var tbody = document.querySelector("#list tbody");
var tr = document.createElement("tr");
tr.innerHTML = rows;
tbody.appendChild(tr)
contact = {name:name, gender:gender, age:age, number:number, type:Contact_Type, address: Address, zip: Post_Code, marital: Marital_Status};
saveList(contact);
}
}
var saveList = function(contact) {
"use strict";
var appts = JSON.stringify(contact);
if (appts !== "") {
localStorage.contact = appts;
} else {
window.alert("Could not save appointments at this time");
}
};
function ResetForm() {
document.getElementById("contact").reset();
}
</script>
Now you should program the function to read the localStorage.
UPDATE
Ok, after trying ".value" for god knows x amount of time again, it some how worked..... Problem solved. Thanks a lot for those who has responded.
UPDATE
How can I obtain the text(strings) from my form on my HTML page with Javascript?
I just want to take whatever was inputted into the text box and write into my XML file.
For example, if I type "HELLO" into the text box, I want "HELLO" written in the XML file.
I have tried both ".value" and ".text", they don't work. Also tried ".textcontent", no good too. I'm thinking that I need to use a different code.
Here's an image of what I'm trying to do:
http://img94.imageshack.us/img94/5677/sdfsdfsdfs.jpg
Here are the files if you want to mess with them personally:
http://www.mediafire.com/?e29t6ipatsqun70
Here's my HTML file:
<html>
<!--onSubmit="SaveXML(person);"-->
<head>
<title>Registration</title>
<link rel="stylesheet" type="text/css" href="CSS_LABs.css" />
</head>
<body>
<script type="text/javaScript" src="LoginJS.js"> </script>
<script type="text/javaScript" src="writeXML.js"> </script>
<div class="form">
<form id="Registration" name="reg" action="" method="get" onSubmit="initialize_array()">
Username:<input type="text" name="Usrname" id="Usrname" maxlength="10"/> <br/>
Password:<input type="password" name="Pswd" id="Pswd" maxlength="20"/> <br/>
<hr>
PersonID:<input type="text" name="PersonID" id="PersonID"/> <br>
<hr>
First Name:<input type="text" name="FirstName" id="FirstName"/> <br>
Last Name:<input type="text" name="LastName" id="LastName"/>
<hr>
DOB:<input type="text" name="DOB" id="DOB"/> <br>
<hr>
Gender:<input type="text" name="Gender" id="Gender"/> <br>
<hr>
Title:<input type="text" name="Title" id="Title"/> <br>
<hr>
<!--Secret Question:<br>
<select name="secret?">
</select> <br>
Answer:<input type="text" name="answer" /> <br> <br>-->
<input type="submit" value="submit" />
</form>
</div>
</body>
</html>
Here's my Javascript file:
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var fso = new ActiveXObject("Scripting.FileSystemObject");
var FILENAME = 'G:\\CST2309 - Web Programming 1\\Copy of Take Home Exam - Copy\\PersonXML2.xml';
function SaveXML(UserData)
{
var usrn = document.getElementById("Username").text;
var pswd = document.getElementById("Pswd").text;
var pid = document.getElementById("PersonID").text;
var fname = document.getElementById("FirstName").text; //This is where I'm having trouble with
var lname = document.getElementById("LastName").text;
var gender = document.getElementById("Gender").text;
var dob = document.getElementById("DOB").text;
var title = document.getElementById("Title").text;
var file = fso.CreateTextFile(FILENAME, true);
file.WriteLine('<?xml version="1.0" encoding="utf-8"?>\n');
file.WriteLine('<PersonInfo>\n');
for (countr = 0; countr < UserData.length; countr++) {
file.Write(' <Person ');
file.Write('Usrname="' + UserData[countr][0] + '" ');
file.Write('Pswd="' + UserData[countr][1] + '" ');
file.Write('PersonID="' + UserData[countr][2] + '" ');
file.Write('FirstName="' + UserData[countr][3] + '" ');
file.Write('LastName="' + UserData[countr][4] + '" ');
file.Write('Gender="' + UserData[countr][5] + '" ');
file.Write('DOB="' + UserData[countr][6] + '" ');
file.Write('Title="' + UserData[countr][7] + '"');
file.WriteLine('></Person>\n');
} // end for countr
file.Write(' <Person ');
file.Write('Usrname="' + usrn + '" ');
file.Write('Pswd="' + pswd + '" ');
file.Write('PersonID="' + pid + '" ');
file.Write('FirstName="' + fname + '" ');
file.Write('LastName="' + lname + '" ');
file.Write('Gender="' + gender + '" ');
file.Write('DOB="' + dob + '" ');
file.Write('Title="' + title + '" ');
file.WriteLine('></Person>\n');
file.WriteLine('</PersonInfo>\n');
file.Close();
} // end SaveXML function --------------------
function LoadXML(xmlFile)
{
xmlDoc.load(xmlFile);
return xmlDoc.documentElement;
} //end function LoadXML()
function initialize_array()
{
var person = new Array();
var noFile = true;
var xmlObj;
if (fso.FileExists(FILENAME))
{
xmlObj = LoadXML(FILENAME);
noFile = false;
} // if
else
{
xmlObj = LoadXML("PersonXML.xml");
//alert("local" + xmlObj);
} // end if
var usrCount = 0;
while (usrCount < xmlObj.childNodes.length)
{
var tmpUsrs = new Array(xmlObj.childNodes(usrCount).getAttribute("Usrname"),
xmlObj.childNodes(usrCount).getAttribute("Pswd"),
xmlObj.childNodes(usrCount).getAttribute("PersonID"),
xmlObj.childNodes(usrCount).getAttribute("FirstName"),
xmlObj.childNodes(usrCount).getAttribute("LastName"),
xmlObj.childNodes(usrCount).getAttribute("Gender"),
xmlObj.childNodes(usrCount).getAttribute("DOB"),
xmlObj.childNodes(usrCount).getAttribute("Title"));
person.push(tmpUsrs);
usrCount++;
} //end while
if (noFile == false)
fso.DeleteFile(FILENAME);
SaveXML(person);
} // end function initialize_array()
You can use document.getElementById("UsrName").value to get tha value of a field in your form. Due to you use id for every field, so there is no problem using this code.
Something around: http://www.tek-tips.com/viewthread.cfm?qid=1143011&page=1
Here is an example of it working. I changed some functionality around just to show that the function was seeing the values correctly:
http://jsfiddle.net/73gbH/1
But like everyone said change .text to .value