www.webdeveloper.com
Results 1 to 10 of 10

Thread: Simple Javascript Problem; Fields clearing on submit when i don't want them to?

  1. #1
    Join Date
    Mar 2009
    Posts
    6

    Exclamation 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";
    }
    Code:
    <form name="Laptop3" onsubmit="return getQuote()" action="" id="Laptop3">
    <label for="LaptopValue">Laptop Value:</label>
    <input name="LaptopValue" type="text" id="LaptopValue" />
    <input name="Submit" value="Get Quote" type="submit" />
    </form>
    Any Ideas?

    Thanx in advance!!
    Last edited by ScottGardiner20; 03-30-2009 at 08:29 AM. Reason: To add [CODE][/CODE] =]

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,380

    Lightbulb Try this ...

    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.

  3. #3
    Join Date
    Mar 2009
    Posts
    6

    Exclamation

    Thank you!

    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!

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,380

    Question Question ...

    In the following:
    Code:
    		document.CCC.reset();
    What does CCC represent?

    In your original post the form name was "Laptop3".
    Has that been changed to CCC?

  5. #5
    Join Date
    Mar 2009
    Posts
    6

    Exclamation

    Yeah sorry, the form is called CCC now.

    Any ideas?

    Thank you!

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,380
    What does your <form> tag look like now?
    Or better yet, post entire code or link to test code.
    Any error messages?

  7. #7
    Join Date
    Mar 2009
    Posts
    6

    Exclamation

    HTML Code
    Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en-GB" xml:lang="en-GB" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Scott Gardiner - 5FHDSDER/F082K</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/Laptop6.js" type="text/javascript">
    </script>
    </head>
    <body>
    <h1>CCC Insurance</h1>
    <h2>Laptop Insurance Specialist</h2>
    <div id="CCCInsurance" lang="en-GB" xml:lang="no">
    <form name="CCC" method="post" action="" onsubmit="" id="CCC">
    <table width="650" border="2" id="Laptop">
    <tr>
    <td colspan="2">
    <h3>Please complete the form below:</h3>
    </td>
    </tr>
    <tr>
    <td width="138"><label>Forename:</label></td>
    <td width="494"><input type="text" name="Forename" id="Forename" /></td>
    </tr>
    <tr>
    <td><label for="Surname">Surname:</label></td>
    <td><input type="text" name="Surname" id="Surname" /></td>
    </tr>
    <tr>
    <td><label for="LaptopValue">Laptop Value:</label></td>
    <td><input type="text" name="LaptopValue" id="LaptopValue" /></td>
    </tr>
    <tr>
    <td><label for="Region">Region:</label></td>
    <td><select name="Region" size="1" id="Region">
    <option value="" selected="selected">Please Select:</option>
    <option value="Borders">Borders</option>
    <option value="Central">Central</option>
    <option value="Highlands">Highlands</option>
    <option value="Lothian">Lothian</option>
    <option value="Strathclyde">Strathclyde</option>
    </select></td>
    </tr>
    <tr>
    <td><label for="coverType">Cover Type:</label></td>
    <td><input type="radio" name="coverType" value="1" />Breakdown<br />
    <input type="radio" name="coverType" value="2" />Breakdown &amp; Accidental<br />
    <input type="radio" name="coverType" value="3" />Breakdown, Accidental &amp; Theft<br /></td>
    </tr>
    <tr>
    <td colspan="2"><input type="submit" value="Get Quote" name="btnGetQuote" onclick="return getQuote();" /> <input type="button" name="CurrentRates" id="Current Rates" value="Current Rates" onclick="window.open('rates.html','CurrentRates','width=300,height=250,toolbar=no,location=no,resizable=no,scrollbars=no,status=no,menubar=no')" /></td>
    </tr>
    <tr>
    <td>Your Quotation:</td>
    <td><input type="text" name="YourQuotation" id="YourQuotation" readonly="readonly" /></td>
    </tr>
    <tr>
    <td> </td>
    <td>
    <textarea name="txtYourQuotation" cols="55" rows="5" readonly="readonly" id="txtYourQuotation">
    </textarea></td>
    </tr>
    <tr>
    <td><label for="pwd1">Password:</label></td>
    <td><input type="password" name="pwd1" id="pwd1" /></td>
    </tr>
    <tr>
    <td><label for="pwd2">Verify Password:</label></td>
    <td><input type="password" name="pwd2" id="pwd2" /></td>
    </tr>
    <tr>
    <td colspan="2"><input type="submit" value="Purchase" name="btnPurchase" onclick="confirmPurchase()" /></td>
    </tr>
    </table>
    </form>
    </div>
    </body>
    </html>
    Laptop6.js
    Code:
    //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!

    thank you for your help:

  8. #8
    Join Date
    Mar 2009
    Posts
    6
    Any ideas anyone?

  9. #9
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    <input type="submit" value="Get Quote" name="btnGetQuote" onclick="return getQuote();" />
    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:
    Code:
    ...
    <form name="CCC" method="post" action="" onsubmit="return getQuote();" id="CCC">
    ...
    ...
    <input type="submit" value="Get Quote" name="btnGetQuote" /> 
    ...
    Last edited by Kor; 04-01-2009 at 06:54 AM.

  10. #10
    Join Date
    Mar 2009
    Posts
    6

    Exclamation

    Haha, so simple! thank you!

    Any idea about the authorised variable?

    Thanx again!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles