窗体正在重置页面而不是显示文字

Question

好的。所以我正在为英制和公制制造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> 

Answer 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。

Answer 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; 
} 

添加 “返回false;”最后。

希望它可以帮助