Html 提交时不刷新

我有一个带表单的网站

输入值应为特定值。这项工作：

$('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!");
});

但是当我提交页面时，页面将刷新，更改我的url并刷新页面，使页面重新开始。。。这是网站：

我不想发生这种事。我想让代码检查给定的值是否正确，但我想让站点保持原样

希望你能帮忙

这是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>

控制者

给你。只需将

submit

更改为

按钮

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!");
});

还有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>

控制者

列表到表单的

提交

事件，而不是按钮的

单击

事件：

$('form').on('submit', function(e) {
    e.preventDefault();

    // do stuff
    // $(this).trigger('submit') if everything's ok
});

注意：

e.preventDefault（）行很重要

将类型更改为button。提交意味着您想提交表单，但您没有提交表单。相反，您正在处理一个按钮点击。你可以完全去掉表单标签。简单，但是很棒。把它作为答案贴出来，我接受你的答案！我不建议没有
submit
控件（无论是
输入
还是
按钮
。没有它，您的表单将无法提交输入。您不应该让表单依靠JavaScript简单地提交。@AymanSafadi我摆脱了表单。他没有尝试提交。这就是问题所在。他只是希望调用他的
onClick
处理程序。