2
votes

Lorsque je remplis 3 entrées de formulaire, mon résultat final ne s'affiche pas. Mais lorsque je remplis 2 des 3 entrées, les résultats s'affichent

J'ai une fonction qui utilise 3 entrées. Malheureusement, lorsque je remplis les 3 entrées. Le résultat apparaît pendant 1 seconde et disparaît ... Mais quand je remplis seulement 2 des 3 entrées. Le résultat apparaîtra, mais il manque bien sûr une partie de l'entrée.

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

Je voudrais pouvoir remplir les 3 entrées et les afficher.

javascript html function forms

0 commentaires

4 Réponses :

1
votes

Puisque vous avez un type de bouton comme soumettre, le comportement par défaut de celui-ci est de soumettre le formulaire et de forcer l'actualisation de la page, que vous pouvez désactiver en passant l'événement à la méthode showBMI et en utilisant event.preventDefault ();

<!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>

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

1 commentaires

Merci Monsieur! Je venais de trouver un travail, mais c'est beaucoup mieux!

0
votes

Changer le type de bouton en "bouton"

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

2 commentaires

Seriez-vous si gentil d'expliquer la différence? Que ferait type = "button" au lieu de "soumettre"?

Lorsque vous cliquez sur type = "soumettre", cela déclenchera l'envoi du formulaire. Pour éviter cela, vous pouvez utiliser type = "button".

0
votes

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

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();

});

1 commentaires

Pouvez-vous expliquer ce que cela change? Je vois des changements mais je ne sais pas quels sont les effets secondaires?

0
votes

Vous devez ajouter l'événement onsubmit à la balise de formulaire

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

Ensuite, il sera bon de supprimer l'événement onclick du bouton d'envoi et d'appeler la méthode showBMI () pour l'événement onsubmit comme ceci: p>

<form onsubmit="return false">

1 commentaires

Je vous remercie! Je vais essayer ça!