Javascript 表单正在重置页面，而不是显示文本

好的。所以我在做一个英制和公制的体重指数计算器。公式是有效的，当它不是表单时，文本会显示出来，但我需要将它放在一个表单中进行验证——这就是我的问题所在。提交按钮似乎只是刷新页面，而不是显示文本。我不确定我应该添加什么，所以它只是显示文本，而不是刷新整个页面

我的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>

$（函数（calculateBMI）{
//当文本字段获得焦点时，它将获得默认值
//：text使浏览器检查所有文本字段
$（':text'）.focus（函数（）{
log（'got focus'）；
变量字段=$（此字段）；
//基本上是问-它是空的吗？如果不是，请输入默认值
如果（field.val（）==field.prop（'defaultValue'））{
field.val（“”）；
} 
}); 
$（'：text'）.blur（函数（）{
console.log（“失去焦点”）；
变量字段=$（此字段）；
//基本上是问-它是空的吗？如果不是，请输入默认值
如果（field.val（）=''）{
field.val（field.prop（'defaultValue'））；
} 
}); 
$（“#帝国单位”）.validate（）；
$（“#度量单位”）.validate（）；
}); // 准备就绪
函数bmicaci（）{
var iHeightFeet=Number（document.getElementById（“iHeightFeet”）.value）；
var iHeightInch=编号（document.getElementById（“iHeightInch”）.value）；
变量iHeight=（iHeightFeet*12）+iHeightInch；
var iWeight=编号（document.getElementById（“iWeight”）.value）；
var calcI_1=IWweight*703；
var calcI_2=体重*体重；
变量calcI_3=数学圆（calcI_1/calcI_2）；
$（“#outputI”）.text（“您的体重指数为：”+calcI_3）；
}
函数bmiCalcM（）{
var mHeight=编号（document.getElementById（“mHeight”）.value）；
var mWeight=Number（document.getElementById（“mWeight”）.value）；
var calcM_1=mHweight/100
var calcM_2=calcM_1*calcM_1；
var calcM_3=数学整数（MWweight/calcM_2）；
$（“#outputM”）.text（“您的BMI为：”+calcM_3）；
}

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

英制单位
高度：

重量：

公制单位
重量：

发生的事情是，您已将按钮定义为

type=“submit”

，这意味着单击按钮时，它们将提交表单。当一个表单没有定义任何操作时，它只是刷新页面——当这种情况发生时，页面将恢复到其初始状态

你有几个选择

最简单的选择是将按钮从

输入

更改为

按钮

元素

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

您还可以使用

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

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

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

在末尾添加“return false；”

希望这有帮助

onsubmit=“return false；”效果很好！非常感谢。

<input type="submit" value="bmiCalcM" onclick="return 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;
}