No refresh on submit - html

Question

I've got a site with a form.
The value of the input should be a specific value. This works:
$('button').on('click', function () {
var val1 = $("#teller").val();
var val2 = $("#noemer").val();
if (val1 == 3 && val2 == 10)
alert("Goed gedaan! je hebt de vraag goed beantwoord. Je kunt verder met je avontuur!");
else
alert("Helaas... Dit is niet het goede antwoord. Probeer het nog eens!");
});
But when I submit the page will refresh, change my url and refresh the page so the page starts at the beginning again... This is the site: http://stilld.nl/brrreuk/
I don't want this to happen. I want the code to check if the value's given are correct, but then I want the site to stay where it is.
Hope you can help.
this is the html:
<form id="form_1">
<fieldset>
<p>
<input type="text" class="input_required" id="teller" name="teller" maxlength="2" class="valid" aria-invalid="false" onkeydown="return isNumber(event);" placeholder="?" onfocus="this.placeholder = ''" onblur="this.placeholder = '?'">
<label for="teller"></label>
</p>
<hr noshade size=3>
<p>
<input type="text" class="input_required" id="noemer" name="noemer" maxlength="2" class="valid" aria-invalid="false" onkeydown="return isNumber(event);" placeholder="?" onfocus="this.placeholder = ''" onblur="this.placeholder = '?'">
<label for="noemer"></label>
</p>
<p>
<button class="submit" type="submit" value="controleer">Controleer</button>
</p>
</fieldset>
</form>

Answer 1

Here you go. Simply change the submit to a button.
The JavaScript:
$('button').on('click', function(){
var val1 = $("#teller").val();
var val2 = $("#noemer").val();
if(val1 == 3 && val2 == 10)
alert("Goed gedaan! je hebt de vraag goed beantwoord. Je kunt verder met je avontuur!");
else
alert("Helaas... Dit is niet het goede antwoord. Probeer het nog eens!");
});
And the HTML
<p>
<input type="text" class="input_required" id="teller" name="teller" maxlength="2" class="valid" aria-invalid="false" onkeydown="return isNumber(event);" placeholder="?" onfocus="this.placeholder = ''" onblur="this.placeholder = '?'">
<label for="teller"> </label>
</p>
<hr noshade size=3>
<p>
<input type="text" class="input_required" id="noemer" name="noemer" maxlength="2" class="valid" aria-invalid="false" onkeydown="return isNumber(event);" placeholder="?" onfocus="this.placeholder = ''" onblur="this.placeholder = '?'">
<label for="noemer"> </label>
</p>
<p>
<button type="button" value="controleer"> Controleer </button>
</p>

Answer 2

List to the form's submit event instead of the button's click event:
$('form').on('submit', function(e) {
e.preventDefault();
// do stuff
// $(this).trigger('submit') if everything's ok
});
NOTE: The e.preventDefault(); line is important!