How to call a function in an HTML form?

Asked

Viewed 362 times

0

Hello, I need help, I am creating a javascript program that should receive input data (Height and width) via form HTML and then call a function that uses this data to calculate and display the total area on the screen. However it does not return anything, and I do not know if my error is time to call the function or write the data on the screen Follow my Code Below:

Note: I am using two files HTML, one with the form and the other with the function. This is the code with the form.

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="Teste-Simulador.css">
    <title>Teste Simulador de Área</title>
</head>
<body>
                
        <h1>Teste Simulador de Área</h1>
                <form name="simulador" method="post" action="Retorno-teste.html" onsubmit="simular();">
                        
                        <p>Altura (em Metros): <input type="number" name="Altura" class="altura" min="0" step="0.5" placeholder="Digite a altura de sua área" /></p>
                        <p>Largura (em Metros): <input type="number" name="Largura" class="largura" min="0" step="0.5" placeholder="Digite a largura de sua área" /></p>
                
                        <h2>Produto</h2>
                          <select name="Produto">
                            <option value="">Selecione o Produto</option>
                            <option value="Tatame50">Tatame 50cm x 50cm</option>
                            <option value="Tatame1">Tatame 1m x 1m</option>
                            <option value="Piso50">Piso Crossfit/Playground 50cm x 50cm</option>
                            <option value="Piso1">Piso Crossfit/Playground 1m x 1m</option>
                         </select>
                        <p><label><input type="submit" name="sbt" value="Simular Área" /></label></p>
                </form>
                
    
</body>
</html>

And Below the Code with the function

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="Teste-Simulador.css">
    <title>Retorno Teste Simulador de Área</title>
    
</head>
<body>
        <script>
                function simular(){
                   let altura =  document.getElementById("altura").innerHTML;
                   let largura = document.getElementById("largura").innerHTML;
                   parseFloat area = altura * largura;
                   document.write(area);
    
    
                } 
               
           </script>   
    
</body>
</html>

javascript function web-application form
  • 3

    Hello, why are you using two HTML and not using everything in one?

  • Because when I use it simply wipes the form data.Anyway I can’t get the function return, what I would change in the code if I only use one?

1 answer

1


In a very simple way, I united your two Htmls. I didn’t imagine it, I just changed the mistakes that were in it. I left the result as Alert for you to see how it works.
There were some mistakes:
* In the innerHTML, the correct is to use the value to take the amount.
* Using only the name in the inputs, your function uses ID 

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="Teste-Simulador.css">
    <title>Teste Simulador de Área</title>
</head>
        <script>
                function simular(){
                   let altura =  document.getElementById("Altura").value;
                   let largura = document.getElementById("Largura").value;
                   let area = altura * largura;
                   alert(area);
                }

           </script>
<body>

        <h1>Teste Simulador de Área</h1>
                <form name="simulador">

                        <p>Altura (em Metros): <input type="number" name="Altura" id="Altura" class="altura" min="0" step="0.5" placeholder="Digite a altura de sua área" /></p>
                        <p>Largura (em Metros): <input type="number" name="Largura" id="Largura" class="largura" min="0" step="0.5" placeholder="Digite a largura de sua área" /></p>
                        <p><input type="number" name="area"> </p>

                        <h2>Produto</h2>
                          <select name="Produto">
                            <option value="">Selecione o Produto</option>
                            <option value="Tatame50">Tatame 50cm x 50cm</option>
                            <option value="Tatame1">Tatame 1m x 1m</option>
                            <option value="Piso50">Piso Crossfit/Playground 50cm x 50cm</option>
                            <option value="Piso1">Piso Crossfit/Playground 1m x 1m</option>
                         </select>
                        <p><label><input type="button" name="sbt" onclick="simular()" value="Simular Área" /></label></p>
                </form>


</body>
</html>
  • 1

    It worked right! Thanks Friend.

Browser other questions tagged javascript function web-application form

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