I would like to modify a JavaScript Code and add an extra field such as:
- The first text box for the user to enter his/her address,
- The second text box for the user to enter a telephone number.
The Code looks like so:
var myForm = document.form1;
function btnCheckFormClick(e) {
var txtName = myForm.txtName;
var txtAge = myForm.txtAge;
if (txtAge.value == "" || txtName.value == "") {
alert("Please complete all of the form");
if (txtName.value == "") {
txtName.focus();
} else {
txtAge.focus();
}
} else {
alert("Thanks for completing the form " + txtName.value);
}
}
function txtAgeBlur(e) {
var target = e.target;
if (isNaN(target.value)) {
alert("Please enter a valid age");
target.focus();
target.select();
}
}
function txtNameChange(e) {
alert("Hi " + e.target.value);
}
myForm.txtName.addEventListener("change", txtNameChange);
myForm.txtAge.addEventListener("blur", txtAgeBlur);
myForm.btnCheckForm.addEventListener("click", btnCheckFormClick);
<form action="" name="form1">
Please enter the following details:
<p>
Name:
<input type="text" name="txtName" />
</p>
<p>
Age:
<input type="text" name="txtAge" size="3" maxlength="3" />
</p>
<p>
<input type="button" value="Check details" name="btnCheckForm">
</p>
</form>
Here is what I tried already BUt it's not working(Not Validation):
var myForm = document.form1;
function btnCheckFormClick(e) {
var txtName = myForm.txtName;
var txtAge = myForm.txtAge;
var txtAddress = myForm.txtAddress;
var txtTelNumber = myForm.txtTelNumber;
if (txtAge.value == "" || txtName.value == "" && txtAddress.value == "" || txtTelNumber.value == "") {
alert("Please complete all of the form");
if (txtName.value == "" && txtAddress.value == "" && txtTelNumber.value == "") {
txtName.focus();
} else {
txtAge.focus();
} else {
txtAddress.focus();
} else {
txtTelNumber.focus();
} else {
alert("Thanks for completing the form " + txtName.value);
}
}
}
function txtAgeBlur(e) {
var target = e.target;
if (isNaN(target.value)) {
alert("Please enter a valid age");
target.focus();
target.select();
}
}
function txtTelNumberBlur(e) {
var target = e.target;
if (isNaN(target.value)) {
alert("Please enter a valid number");
target.focus();
target.select();
}
}
function txtAddressChange(e) {
alert("Your address is: " + e.target.value);
}
function txtNameChange(e) {
alert("Hi " + e.target.value);
}
myForm.txtName.addEventListener("change", txtNameChange);
myForm.txtAge.addEventListener(, txtAgeBlur);
myForm.txtAddress.addEventListener("change", txtAddressChange);
myForm.txtTelNumber.addEventListener("change", txtTelNumberBlur);
myForm.btnCheckForm.addEventListener("click", btnCheckFormClick);
<form action="" name="form1">
Please enter the following details:
<p>
Name:
<input type="text" name="txtName" />
</p>
<p>
Age:
<input type="text" name="txtAge" size="3" maxlength="3" />
</p>
Address:
<input type="text" name="txtAddress" size="40" maxlength="25" />
</p>
Telephone Number:
<input type="text" name="txtTelNumber" size="20" maxlength="10" />
</p>
<p>
<input type="button" value="Check details" name="btnCheckForm">
</p>
</form>
Can anyone tell me what am I doing wrong and point me out to where look at?
Thanks.
Aucun commentaire:
Enregistrer un commentaire