当我填写 3 个表单输入时，我的最终结果不显示。但是当我填写 3 个输入中的 2 个时，会显示结果答案

【问题标题】：When i fill in 3 form inputs my end result does not display. But when i fill in 2 of the 3 inputs the results gets displayed当我填写 3 个表单输入时，我的最终结果不显示。但是当我填写 3 个输入中的 2 个时，会显示结果
【发布时间】：2019-01-21 12:22:39
【问题描述】：

我有一个使用 3 个输入的函数。不幸的是，当我填写所有 3 个输入时。结果显示 1 秒然后消失......但是当我只填写 3 个输入中的 2 个时。结果会显示出来，但当然会丢失一些输入。

<!DOCTYPE html>
<html>
  <head lang="en">
      <h1> BMI Calculator</h1>
  <meta charset="UTF-8">
  <script src="js/jquery-3.3.1.js"></script>
  <script src="js/script.js"></script>

  </head>
<body>

  <form>
    <label><b>Lengte</b></label>
        <input type="number" name="message" id="user_lengte" required><span>cm</span><br>
    <label><b>Gewicht</b></label>
        <input type="number" name="message" id="user_gewicht" required><span>kg</span><br>
    <label><b>Leeftijd</b></label>
        <input type="number" name="message" id="user_leeftijd" required><span>jr</span><br>
<button type="submit" onclick="showBMI();" value="Calculate">Berekenen</button><br/>
    <label>&nbsp;</label><br>
    <label>Your BMI: </label>
        <p><span id='display'></span></p>
 </form>

</body>
</html>

    function showBMI() {

        var gewicht = document.getElementById("user_gewicht").value;
        var lengte = document.getElementById("user_lengte").value;
        var leeftijd = document.getElementById("user_leeftijd").value;


        document.getElementById('display').innerHTML = 
        (88.362 + (13.397 * gewicht) + (4.799 * lengte) - (5.677 * leeftijd)).toFixed(2)

        //88.362 + ( 13.397 x weight in kg ) + ( 4.799 x height in cm ) - ( 5.677 x age in years )
};

我希望能够填写所有 3 个输入并显示它。

【问题讨论】：

标签： javascript html forms function

【解决方案1】：

由于你有一个按钮类型作为提交，它的默认行为是提交表单并强制刷新页面，你可以通过将事件传递给showBMI方法并使用event.preventDefault();来禁用它

function showBMI(e) {
        e.preventDefault();
        

        var gewicht = document.getElementById("user_gewicht").value;
        var lengte = document.getElementById("user_lengte").value;
        var leeftijd = document.getElementById("user_leeftijd").value;


        document.getElementById('display').innerHTML = 
        (88.362 + (13.397 * gewicht) + (4.799 * lengte) - (5.677 * leeftijd)).toFixed(2)

        //88.362 + ( 13.397 x weight in kg ) + ( 4.799 x height in cm ) - ( 5.677 x age in years )
};

<!DOCTYPE html>
<html>
  <head lang="en">
      <h1> BMI Calculator</h1>
  <meta charset="UTF-8">
  <script src="js/jquery-3.3.1.js"></script>
  <script src="js/script.js"></script>

  </head>
<body>

  <form>
    <label><b>Lengte</b></label>
        <input type="number" name="message" id="user_lengte" required><span>cm</span><br>
    <label><b>Gewicht</b></label>
        <input type="number" name="message" id="user_gewicht" required><span>kg</span><br>
    <label><b>Leeftijd</b></label>
        <input type="number" name="message" id="user_leeftijd" required><span>jr</span><br>
<button type="submit" onclick="showBMI(event);" value="Calculate">Berekenen</button><br/>
    <label>&nbsp;</label><br>
    <label>Your BMI: </label>
        <p><span id='display'></span></p>
 </form>

</body>
</html>

【讨论】：

谢谢您的好心先生！我刚刚找到了一个解决方法，但这要好得多！

【解决方案2】：

将按钮类型更改为“按钮”

<button type="button" onclick="showBMI();" value="Calculate">Berekenen</button><br/>

【讨论】：

您能解释一下区别吗？ type="button" 会做什么而不是“提交”？
当你点击 type="submit" 时会触发表单提交，为了防止这种情况你可以使用 type="button"。

【解决方案3】：

function showBMI() {

        var gewicht = document.getElementById("user_gewicht").value;
        var lengte = document.getElementById("user_lengte").value;
        var leeftijd = document.getElementById("user_leeftijd").value;


        document.getElementById('display').innerHTML = 
        (88.362 + (13.397 * gewicht) + (4.799 * lengte) - (5.677 * leeftijd)).toFixed(2)

        //88.362 + ( 13.397 x weight in kg ) + ( 4.799 x height in cm ) - ( 5.677 x age in years )
};


$(document).on('click', '#showBMI', function (e) {

showBMI();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head lang="en">
      <h1> BMI Calculator</h1>
  <meta charset="UTF-8">
  </head>
<body>

  <form>
    <label><b>Lengte</b></label>
        <input type="number" name="message" id="user_lengte" required><span>cm</span><br>
    <label><b>Gewicht</b></label>
        <input type="number" name="message" id="user_gewicht" required><span>kg</span><br>
    <label><b>Leeftijd</b></label>
        <input type="number" name="message" id="user_leeftijd" required><span>jr</span><br>
<button id="showBMI" value="Calculate">Berekenen</button><br/>
    <label>&nbsp;</label><br>
    <label>Your BMI: </label>
        <p><span id='display'></span></p>
 </form>

</body>
</html>

function showBMI() {

        var gewicht = document.getElementById("user_gewicht").value;
        var lengte = document.getElementById("user_lengte").value;
        var leeftijd = document.getElementById("user_leeftijd").value;


        document.getElementById('display').innerHTML = 
        (88.362 + (13.397 * gewicht) + (4.799 * lengte) - (5.677 * leeftijd)).toFixed(2)

        //88.362 + ( 13.397 x weight in kg ) + ( 4.799 x height in cm ) - ( 5.677 x age in years )
};


$(document).on('click', '#showBMI', function (e) {

showBMI();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
  <head lang="en">
      <h1> BMI Calculator</h1>
  <meta charset="UTF-8">
  </head>
<body>

  <form>
    <label><b>Lengte</b></label>
        <input type="number" name="message" id="user_lengte" required><span>cm</span><br>
    <label><b>Gewicht</b></label>
        <input type="number" name="message" id="user_gewicht" required><span>kg</span><br>
    <label><b>Leeftijd</b></label>
        <input type="number" name="message" id="user_leeftijd" required><span>jr</span><br>
<button id="showBMI" value="Calculate">Berekenen</button><br/>
    <label>&nbsp;</label><br>
    <label>Your BMI: </label>
        <p><span id='display'></span></p>
 </form>

</body>
</html>

【讨论】：

你能解释一下它有什么变化吗？我看到了一些变化，但我不知道副作用是什么？

【解决方案4】：

你需要在表单标签中添加onsubmit事件

<form onsubmit="return false">

然后最好从提交按钮中删除 onclick 事件并调用 showBMI() 方法来 onsubmit 事件，如下所示：

<form onsubmit="showBMI(); return false">

【讨论】：

谢谢！我会试试这个！