stop button click refeshing page

Hi,
My javascript code seems to work apart from refreshing the field input every time I click the button.
How do I stop this?

I just want to enter in the data and also have the result display the answer in the textbox but I cant see anything as all textboxes go blank when i click the button.

I am just testing so no need to submit the data to php for now.


<script type='text/javascript'>

function formValidator(){
	// Make quick references to our fields
	var firstname = document.getElementById('firstname');
	
	var age = document.getElementById('age');
	var gend = document.getElementById('gender');
	
	
       
          calc();
        //  alert("correct");
     
	// Check each input in the order that it appears in the form!
	if(isAlphabet(firstname, "Please enter only letters for your name")){
		
			if(isNumeric(age, "Please enter a valid age")){
				if(madeSelection(gend, "Please Choose a Gender")){
					
						
							//return true;
				
			}
		}
	}
	
	//alert("correct");
	//return false;
	
}

function calc()
{   
   // alert("correct");
    var qty1 = document.getElementById("qty").value;
    var amount1 = document.getElementById("amount").value;
      
      
    var days;
    var result = 0;
    
    result=qty1*amount1;
    

         document.getElementById("total").value =result;
    alert(result);
}


function notEmpty(elem, helperMsg){
	if(elem.value.length == 0){
		alert(helperMsg);
		elem.focus(); // set the focus to this input
		return false;
	}
	return true;
}

function isNumeric(elem, helperMsg){
	var numericExpression = /^[0-9]+$/;
	if(elem.value.match(numericExpression)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}



function isAlphanumeric(elem, helperMsg){
	var alphaExp = /^[0-9a-zA-Z]+$/;
	if(elem.value.match(alphaExp)){
		return true;
	}else{
		alert(helperMsg);
		elem.focus();
		return false;
	}
}



function madeSelection(elem, helperMsg){
	if(elem.value == "Please Choose"){
		alert(helperMsg);
		elem.focus();
		return false;
	}else{
		return true;
	}
}


</script>

<form>
First Name: <input type='text' id='firstname' /><br />
Age: <input type='text' id='age' /><br />

Gender: <select id='gender'>
	<option>Please Choose</option>
	<option>Male</option>
	<option>Female</option>
	
</select><br />


<br><br>

amount:<input type="text" id="amount" />
<br>
Qty<input type="text" id="qty"  />
<br>
Result<input type="text" id="total" />
<p>
  <button onclick="formValidator()">Check Form</button>  
</p>
</form>

Open in new window

jagguyAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Mukesh YadavFull Stack DeveloperCommented:
You need to bind the JavaScript function to the form's onSubmit event handler.

<form onSubmit="javascript:return formValidator();">
<!-- Form fields goes here -->
</form>

And in formValidator() function you need a minor modification.
You have to return false when there is an error and true if all data validated successfully.
Brian TaoSenior Business Solutions ConsultantCommented:
2 modifications needed:
- in line#16 you're calling a non-existing function isAlphabet, which I guess is a typo and should be isAlphanumeric
- in line#119 you need to add type="button" to your button tag.

Then you should be good.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.