表单正在重置页面而不是显示文本答案

【问题标题】：Form is resetting page rather than displaying text表单正在重置页面而不是显示文本
【发布时间】：2017-03-16 01:30:21
【问题描述】：

好的。所以我正在为英制和公制制作一个 BMI 计算器。该公式有效，当它不是表单时，会显示文本，但我需要将其放入要验证的表单中 - 这就是我的问题所在。提交按钮似乎只是刷新页面而不是显示文本。我不确定我应该添加什么，所以它只显示文本而不是刷新整个页面。

我的 JS -

$(function(calculateBMI) {

    // when the text field gets focus it gets ride of the default value
    //:text makes the browser check for ALL text fields
    $(':text').focus(function() {
        console.log('got focus');
        var field = $(this);
        //basically asks - is it blank? if not, put default value in
        if (field.val()==field.prop('defaultValue')) { 
            field.val(''); 
        } 
    }); 

    $(':text').blur(function() {
        console.log('lost focus');
        var field = $(this);

        //basically asks - is it blank? if not, put default value in
        if (field.val()=='') { 
            field.val(field.prop('defaultValue'));              
        } 

}); 


    $('#imperialunits').validate();
    $('#metricunits').validate();
 }); // end ready       


function bmiCalcI(){
    var iHeightFeet=Number(document.getElementById("iHeightFeet").value);
    var iHeightInch=Number(document.getElementById("iHeightInch").value);
    var iHeight=(iHeightFeet * 12)+iHeightInch;
    var iWeight=Number(document.getElementById("iWeight").value);

    var calcI_1=iWeight * 703;
    var calcI_2=iHeight * iHeight;
    var calcI_3=Math.round(calcI_1 / calcI_2);
    $("#outputI").text("Your BMI is: " + calcI_3);
}

function bmiCalcM(){
    var mHeight=Number(document.getElementById("mHeight").value);
    var mWeight=Number(document.getElementById("mWeight").value);

    var calcM_1=mHeight / 100
    var calcM_2=calcM_1 * calcM_1;
    var calcM_3=Math.round(mWeight / calcM_2);

    $("#outputM").text("Your BMI is: " + calcM_3);

}

</script>

还有我的 HTML

<div class="results">
<div id="imperialunits tabs-1" class="calc">
    <h3>Imperial Units</h3>
    <p>Height:</p>
    <form id="imperial">
     <input type="text" id="iHeightFeet" value="ft" class="required digits">
     <input type="text" id="iHeightInch" value="in" class="required digits">
     <p>Weight:</p> 
     <input type="text" id="iWeight" value="lbs" class="required digits">
    <input type="submit" value="bmiCalcI" onclick="bmiCalcI();">
    <div id="outputI"></div>
    </form>
</div>

<div id="metricunits tabs-2" class="calc">
    <h3>Metric Units</h3>
    <form id="metric">
     <input type="text" id="mHeight" value="cm" class="required digits">
     <p>Weight:</p> 
     <input type="text" id="mWeight" value="kg" class="required digits">
    <input type="submit" value="bmiCalcM" onclick="bmiCalcM();">
    <div id="outputM"></div>
    </form>
</div>
</div>

【问题讨论】：

标签： javascript jquery forms validation

【解决方案1】：

发生的情况是您将按钮定义为type="submit"，这意味着当单击它们时，它们将提交表单。当表单未定义任何操作时，它只会刷新页面 - 当这种情况发生时，页面会恢复到其初始状态。

这里有几个选项。

最简单的选择是将按钮从 input 更改为 button 元素

<button type="button" onclick="bmiCalcM();">Calculate</button>

您还可以将 onsubmit 添加到 form 元素以防止刷新

<form id="metric" onsubmit="return false;">

您也可以使用 event.preventDefault() 函数 - jQuery 解决方案可能看起来像

$('#metric').submit(function (e) {
    e.preventDefault();

    var mHeight=Number(document.getElementById("mHeight").value);
    var mWeight=Number(document.getElementById("mWeight").value);

    var calcM_1=mHeight / 100
    var calcM_2=calcM_1 * calcM_1;
    var calcM_3=Math.round(mWeight / calcM_2);

    $("#outputM").text("Your BMI is: " + calcM_3);

});

这些将替换您的计算功能，因此如果您想选择此解决方案，您还需要删除提交按钮中的 onclick。

【讨论】：

onsubmit="return false;"工作得很好！谢谢！

【解决方案2】：

如果你不需要刷新页面，你应该在函数中调用“return false”。试试这个

<input type="submit" value="bmiCalcM" onclick="return bmiCalcM();">

并将您的函数 bmiCalcM() 更改如下：

function bmiCalcM(){
var mHeight=Number(document.getElementById("mHeight").value);
var mWeight=Number(document.getElementById("mWeight").value);

var calcM_1=mHeight / 100
var calcM_2=calcM_1 * calcM_1;
var calcM_3=Math.round(mWeight / calcM_2);

$("#outputM").text("Your BMI is: " + calcM_3);

 return false;
}

添加“return false;”最后。

希望对你有帮助

【讨论】：