it-swarm-pt.tech

Passando dados do formulário HTML para a função Javascript

Criei um formulário com um menu suspenso para escolher e outros três campos de texto para os usuários inserirem dados.

Preciso executar cálculos nos dados inseridos pelo usuário e exibir os resultados.

Por enquanto, eu só quero poder passar os resultados para a função e imprimi-los. A partir daí, vou descobrir como exibir essas saídas em uma tabela.

No momento, estou tendo problemas para identificar o valor do elemento específico. Com o menu suspenso, sou capaz de identificar o valor escolhido escrevendo document.getElementById("activity_level").value. O restante dos valores não aparecerá quando eu executar a função. Estou assumindo que não estou identificando o tipo de valor para que o navegador saiba qual é a exibição.

Aqui está o meu HTML:

<form>
        Activity Level: <select id="activity_level">
                        <option value="null">Please Choose One...</option>
                        <option value="1.25">Practically a Vegetable</option>
                        <option value="1.35">Mostly Desk Work and Light Walking</option>
                        <option value="1.55">Moderate Exercise 2-3 Times Per Week</option>
                        <option value="1.75">Heavy Exercise 3-4 Times Per Week</option>
                        <option value="1.95">Committed Hardcore Athlete</option>
                        </select></br>
        BodyFat Percentage <input type="text" id="bfp" /> </br>
        Total Weight <input type="text" id="tw" /></br>
        Target Bodyfat Percentage <input type="text" id="target_bodyfat_pct" /></br>
        <input type="button" value="Calculate" onclick="Calculate()" />
    </form>

Aqui está o meu javascript:

 <script type="text/javascript">

    function Calculate(){
        //document.write(bfp + "</br>");
        document.write(document.getElementById("activity_level").value + "</br>");
        //document.write(document.getElementById("tw") + "</br>");
        //document.write(document.getElementById("target_bodyfat_pct"));
    }

    </script>
12
Nick Res

Você precisa fazer referência à propriedade value em suas entradas, assim como fez com o seu select

document.write(document.getElementById("target_bodyfat_pct"));
document.write(document.getElementById("tw") + "</br>");

deveria estar

document.write(document.getElementById("target_bodyfat_pct").value);
document.write(document.getElementById("tw").value + "</br>");

Além disso, considere criar uma div para toda a saída e escrevê-la lá.

<div id="yourOutputDiv"></div>

var results = document.getElementById("activity_level").value + "</br>" +
              document.getElementById("target_bodyfat_pct").value + 
              document.getElementById("tw").value + "</br>";

document.getElementById("yourOutputDiv").innerHTML = results;
9
Adam Rackis