在警報中顯示表單資訊（html和javascript）

我目前有一個表單，用戶可以在其中輸入他的姓名、年齡和訊息，然后我有一個按鈕來提交訊息，它應該顯示帶有表單資訊的警報，但是當我輸入資訊并單擊按鈕時什么都沒有發生（警報不顯示）。這是html表單和javascript函式代碼：

<form action="#" method="get">
        <fieldset>
            <legend>Informa??es do utilizador</legend>
            <label for="nome">Nome:</label>
            <input id="nome" name="nome" type="text" />
            <br />
            <label for="idade">Idade:</label>
            <select id="idade" name="idade">
                <option value="menor">&lt;18</option>
                <option value="jovem">18-21</option>
                <option value="jovemadulto">22-29</option>
                <option value="adulto">30-39</option>
                <option value="adultoavancado">40-49</option>
                <option value="idoso">&gt;=50</option>
            </select>
        </fieldset>
        <fieldset>
            <legend>Ideias para tornar um campus mais sustentável</legend>
            <label for="mensagem">Mensagem:</label><br />
            <textarea id="mensagem" name="mensagem" rows="10" cols="50" placeholder="Introduza a sua ideia">
                </textarea>
            <br />
            <input id="enviar" name="enviar" type="submit" onClick="submitForm()" value="Enviar">
            <script>
                function submitForm() {
                    var n = document.getElementById('nome').value;
                    var i = document.getElementById('idade').value;
                    var m = document.getElementById('mensagem').value;

                    alert("Nome: " s "\n Idade: " i "\n Mensagem: " m);
                }
            </script>

            <input id="limpar" name="limpar" type="reset" value="Limpar" />
        </fieldset>
    </form>

uj5u.com熱心網友回復：

這樣做的正確方法...

const myForm = document.querySelector('#my-form') // use the form parent
                                                 // to refer each form elements 

  // think about how to write your code: 
  // easier to read again = less typing errors
  
myForm.onsubmit = evt =>
  {
  alert( 'Nome: '   myForm.nome.value   // access each element by his name
         '\n Idade: '   myForm.idade.value 
         '\n Mensagem: '    myForm.mensagem.value
       );


  
  evt.preventDefault(); // for testing without page relaod
  }

<form action="#" method="get" id="my-form">  <!-- have an id (or a name) here -->
  <fieldset>
    <legend>Informa??es do utilizador</legend>
    <label for="nome">Nome:</label>
    <input id="nome" name="nome" type="text" />
    <br />
    <label for="idade">Idade:</label>
    <select id="idade" name="idade">
      <option value="menor">&lt;18</option>
      <option value="jovem">18-21</option>
      <option value="jovemadulto">22-29</option>
      <option value="adulto">30-39</option>
      <option value="adultoavancado">40-49</option>
      <option value="idoso">&gt;=50</option>
    </select>
  </fieldset>
  <fieldset>
    <legend>Ideias para tornar um campus mais sustentável</legend>
    <label for="mensagem">Mensagem:</label><br />
    <textarea id="mensagem" name="mensagem" 
         rows="10" cols="50"   placeholder="Introduza a sua ideia"></textarea>
    <br>
    <button type="submit"> Enviar </button>
    <button type="reset"> Limpar </button>
  </fieldset>
</form>

uj5u.com熱心網友回復：

你的函式中沒有var s，應該n在你的alert()：

<script>
    function submitForm() {
        var n = document.getElementById('nome').value;
        var i = document.getElementById('idade').value;
        var m = document.getElementById('mensagem').value;

        alert("Nome: " n "\n Idade: " i "\n Mensagem: " m);
    }
</script>

標籤：javascript html

上一篇：發生某些事件后如何禁用KOJS中的按鈕？

下一篇：輸入值未定義？