Simple Javascript Problem; Fields clearing on submit when i don't want them to?
Hi,
I've got a form that asks the user to input his/her laptop value for a insurance quotation and then clicks get quote .... when i return an error though for example the field contains invalid characters, all the fields on the form get emptied!!
a small sniplet of what i have is below:
Code:
function getQuote() {
var authorised = false;
var laptopValue
var regionalAmount
var regionName
var percentage
var cost
var chosenCover
checkInput()
verify()
if(authorised = true){
doCalculations()
}
}
}
function checkInput() {
//checks to ensure fields are not left empty, returns error if they are.
if(isNaN(document.Laptop3.LaptopValue.value)) {
alert("Must be digits only");
document.Laptop3.LaptopValue.focus();
document.Laptop3.LaptopValue.style.background = "yellow";
}
JS functions return the last operation performed,
so in the "getQuote()" function, specify true or false as "return true" or "return false"
the very last operation performed before the } character.
Also appears to have one too many } characters in the function.
I managed to correct that however i am now getting a similar problem from this:
Code:
function confirmPurchase() {
var answer = confirm("Are you sure you wish to purchase insurance from us?")
if (answer){
alert("Information will be sent to server \n Thank you for your custom");
document.CCC.reset();
return false;
} return true;
}
if they click OK i want the form to clear, otherwise i want all the input to remain. Any ideas??
Thanx again!
//Scott Gardiner
//5FHDSDER/F082K
//Client Side Web Scripting
//Assessment
function getQuote(){
//global variables
var authorised;
var laptopValue;
var regionalAmount;
var regionName;
var percentage;
var cost;
var chosenCover;
var orderDetails;
//calls checkInput function
checkInput()
//calls verify function
verify()
//if authorised variable is set to true, calls doCalculations Function
if(authorised = true){
doCalculations()
}
//provides details in the txtYourQuotation box
orderDetails = "Value of laptop is : " + laptopValue + "\nType of Cover us: " + chosenCover +"\nCover Rate is: " + percentage + "%" + "\nRegional Area is : " + regionName + " Cost in GBP: " + regionalAmount + "\nTotal to pay is : " + cost;
document.CCC.txtYourQuotation.value = orderDetails;
return false;
}
function checkInput() {
//checks to see if the Forename field is empty
if (document.CCC.Forename.value == "") {
alert("Please Enter Your Foreame");
document.CCC.Forename.focus();
document.CCC.Forename.style.backgroundColor='yellow';
return false;
} else
document.CCC.Forename.style.backgroundColor='white';
//checks to see if the Surname field is empty
if (document.CCC.Surname.value == "") {
alert("Please Enter Your Surname");
document.CCC.Surname.focus();
document.CCC.Surname.style.backgroundColor='yellow';
return false;
} else
document.CCC.Surname.style.backgroundColor='white';
//checks to see if the LaptopValue field is empty or contains characters
if(document.CCC.LaptopValue.value =="") {
alert("Please Enter Your Laptop Value");
document.CCC.LaptopValue.focus();
document.CCC.LaptopValue.style.backgroundColor='yellow';
return false;
} else if (isNaN(document.CCC.LaptopValue.value)) {
alert("Laptop Value must only be digits!");
document.CCC.LaptopValue.focus();
document.CCC.LaptopValue.style.backgroundColor='yellow';
return false;
} else
document.CCC.LaptopValue.style.backgroundColor='white';
//alert("All successfull!");
return false;
}
function verify() {
var pwd1 = document.CCC.pwd1.value;
var pwd2 = document.CCC.pwd2.value;
// check for a value in both fields.
if (pwd1 == '') {
alert('Please enter your password');
authorised = false;
document.CCC.pwd1.focus();
document.CCC.pwd1.style.backgroundColor='yellow';
return false;
} else
document.CCC.pwd1.style.backgroundColor='white';
if (pwd2 == '') {
alert('Please enter your password again to verify');
authorised = false;
document.CCC.pwd2.focus();
document.CCC.pwd2.style.backgroundColor='yellow';
return false;
} else
document.CCC.pwd2.style.backgroundColor='white';
if (pwd1 != pwd2) {
alert ("Passwords did not match.");
authorised = false;
document.CCC.pwd2.focus();
authorised = false;
document.CCC.pwd1.style.backgroundColor='yellow';
document.CCC.pwd2.style.backgroundColor='yellow';
return false;
} else
document.CCC.pwd1.style.backgroundColor='white';
document.CCC.pwd2.style.backgroundColor='white';
authorised = true;
return false;
}
function doCalculations() {
laptopValue = document.CCC.LaptopValue.value;
alert("your laptop has a value of :" + laptopValue + " GBP")
index = document.CCC.Region.selectedIndex;
selectedRegion = document.CCC.Region.options[index].text;
switch (selectedRegion)
{
case "Borders":
regionalAmount = 10;
regionName = "Borders";
alert("The region you selected was : " + regionName + " " + "The insurance rate for this region is : " + regionalAmount);
break;
case "Central":
regionalAmount = 20;
regionName = "Central";
alert("The region you selected was : " + regionName + " " + "The insurance rate for this region is : " + regionalAmount);
break;
case "Highlands":
regionalAmount = 15;
regionName = "Highlands";
alert("The region you selected was : " + regionName + " " + "The insurance rate for this region is : " + regionalAmount);
break;
case "Lothian":
regionalAmount = 25;
regionName = "Lothian";
alert("The region you selected was : " + regionName + " " + "The insurance rate for this region is : " + regionalAmount);
break;
case "Strathclyde":
regionalAmount = 30;
regionName = "Strathclyde";
alert("The region you selected was : " + regionName + " " + "The insurance rate for this region is : " + regionalAmount);
break;
default:
alert("Please Select an Region");
document.CCC.Region.focus();
}
var coverType = new Array();
coverType[0]="Breakdown";
coverType[1]="Breakdown & Accident";
coverType[2]="Breakdown, Accident & Theft";
radioCheck = -1;
for (i=document.CCC.coverType.length-1; i > -1; i--) {
if (document.CCC.coverType[i].checked) {
radioCheck = i;
percentage = document.CCC.coverType[i].value;
coverType = coverType[i];
alert("The value of the percentage variable is : " + percentage + "%");
alert("The contents of the coverType variable is : " +coverType);
i = -1;
}
}
if (radioCheck == -1) {
alert("Please select a covertype!");
return false;
}
cost = (laptopValue * percentage/100) + regionalAmount;
document.CCC.YourQuotation.value = cost;
return true;
}
function confirmPurchase() {
var answer = confirm("Are you sure you wish to purchase insurance from us?")
if (answer){
alert("Information will be sent to server \n Thank you for your custom");
document.CCC.reset();
return false;
} return true;
}
Okay, As i am posting the whole ammount, i am also having problems with my authorised variable, the doCalculations is only suppose to be executed when authorised is set as TRUE... it always runs no matter what & when you click on purchase the confirmPurchase function is called yet when you cancel it the whole form is reset... i dont wish for this to happen!
onclick and onsubmit are different events and they act independently because they are applied upon different elements. The way you have coded,the return false will prevent the click action of the button, but not the submit action of the form. In order to control the submit action, you must use the onsubmit event, which is a native property of the form element:
Simple Javascript Problem; Fields clearing on submit when i don't want them to?
Reply With Quote
Try this ...
Question ...
Bookmarks