How to calculate and display the result of an operation, taking the data from a form, and sending the answer on the same page below the form?

Asked

Viewed 400 times

1

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title>Calc PHP</title>
</head>
<body>
    <div>
        <form method="post" action="index.php" id="form">
            Valor 1: <input type="number" name="num1" id="v1"><br><br>
            Valor 2: <input type="number" name="num2" id="v2"><br><br>
            <select name="cal" id="campo">
                <option value="add">Somar</option>
                <option value="sub">Subtrair</option>
                <option value="mult">Multiplicar</option>
                <option value="div">Dividir</option>
            </select>
            <button type="button" value="submit"     onclick="mostraResultado()">Calcular</button> 
        </form>  
        <script type="text/javascript">


        function mostraResultado(){
            var form = document.getElementById("form");
            var valor1 = document.getElementById("v1");
            var valor2 = document.getElementById("v2");
            var opcao = document.getElementById("campo");



            switch(opcao){
                case "add":
                    var resultado = valor1.value + valor2.value;
                    document.write("O resultado é " + resultado.value);
                    break;
                case "sub":
                    var resultado = valor1.value - valor2.value;
                    document.write("O resultado é " + resultado.value);
                    break;
                case "mult":
                    var resultado = valor1.value * valor2.value;
                    document.write("O resultado é " + resultado.value);
                    break;
                case "div":
                    var resultado = valor1.value / valor2.value;
                    document.write("O resultado é " + resultado.value);
                    break;
            }
        }
        </script>
    </div>
</body>
</html>
javascript html form

  • What’s the mistake buddy?

  • Post the html tbm.

  • So, it’s a very simple thing that I want, the form takes both values and chooses which operation it wants to perform, then presses the send button. So far so good, but the problem is that I want to show you the result of the calculation below the button, like "The result gave such". And I can’t do that. It doesn’t show up when I press send

  • It will not appear because your button is a Ubmit. Change the type of your button to the same button... <button type="button"...

  • I fixed it, but nothing comes up anyway

  • valor1 and valor2 are the elements of the GIFT, you do not need to take their values, no? Something like valor1.value + valor2.value?

  • I’ve already changed it, and yet there’s nothing appearing

  • Then update your question with the current code.

  • I’ve updated the code

  • Why resultado.value? Please pay more attention to what you are doing and especially understand what you are doing. Trial and error will lead to nothing.

  • The following is an example: https://jsfiddle.net/r6kjsbmv/5/

Show 6 more comments

1 answer

0


Your code lacked some things like taking the value of what is being typed and turning the value into number type. 

function mostraResultado(){
    var form = document.getElementById("form"); // acho que não precisa
    var valor1 = document.getElementById("v1").value;  // pega os valores
    var valor2 = document.getElementById("v2").value;
    var opcao = document.getElementById("campo").value;
    var divMostrar = document.getElementById("mostrarResultado");

    switch(opcao){
        case "add":
          var resultado = Number(valor1) + Number(valor2); // altera para number
          divMostrar.textContent = "O resultado é " + resultado; 
        break;
        case "sub":
          var resultado = Number(valor1) - Number(valor2); 
          divMostrar.textContent = "O resultado é " + resultado;
        break;
        case "mult":
          var resultado = Number(valor1) * Number(valor2); 
          divMostrar.textContent = "O resultado é " + resultado;
        break;
        case "div":
          var resultado = Number(valor1) / Number(valor2); 
          divMostrar.textContent = "O resultado é " + resultado;
        break;
     }
         
}
<div>
   <form method="post" id="form">
       Valor 1: <input type="number" name="num1" id="v1"><br><br>
       Valor 2: <input type="number" name="num2" id="v2"><br><br>
       <div id="mostrarResultado"></div>
       <select name="cal" id="campo">
          <option value="add">Somar</option>
          <option value="sub">Subtrair</option>
          <option value="mult">Multiplicar</option>
          <option value="div">Dividir</option>
       </select>
       <button type="button" value="submit"     onclick="mostraResultado()">Calcular</button>
    </form> 
        
</div>

  • Ok, but it’s still not the result I wanted. Because I want the result on the same page and not on another. The result would have to appear under the form on the same page, understand?

  • But how do you want to show the result in a div in the form itself, if the function is in the form’s Submit button? When you press the Calculate button it will send the form, you will not have time to show anything.

  • What is happening is that the script clears the screen before showing the result. That is, it deletes the form. I want you to not delete the form, and the result will appear under the form

  • But of course it will clear, because as said the function is associated with the button that sends the form.

  • So how could I make sure that doesn’t happen?

  • This index.php that is where the form is submitted to is the same page as the form? What is the page that has the form?

  • The form ta na index.php

  • I edited the answer, see if it’s Istoy.

  • It would have to be after the button, but that’s it. I also got it here. Thanks really guy ;)

Show 4 more comments

Browser other questions tagged javascript html form

You are not signed in. Login or sign up in order to post.