Display form info on alert (html and javascript)-CodePudding

I currently have a form in which a user can put his name, age and the message and then I have a button to submit the message and it is supposed to show an alert with the form information but when I put the information and click the button nothing is happening (the alert doesn't show). Here is the html form and javascript function code:

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

CodePudding user response：

the correct way to do that...

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>

CodePudding user response：

There is no var s in your function, should be n in your 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>