How do I append an element with form data? (Jquery)

Question

 <script>

      $(document).ready(function(){
        $('form').submit(function(){
          return false;
        $('table').append(
            `<tr>
              <td>$('#first').val();</td>
              <td>$('#last').val();</td>
             <td>$('#email').val();</td>
              <td>$('#phone').val();</td>
             </tr>`);
          });
   });
 </script>

The console is not showing any errors, but when I click the submit button, nothing happens. The Jquery file loaded is Google's hosted library. Using Chrome.

Answer 1

When you return false , the code after this is ignored, use e.preventDefault() to avoid the page reload, and at the time of displaying, you need to concatenate your strings and your variables (which in this case is $(input).val() ) to display the correct value, for example:

$(document).ready(function(){
    $('form').submit(function(e){
        e.preventDefault();
        $('table').append("<tr><td>"+$('#first').val()+"</td><td>"
                            +$('#last').val()+"</td><td>"
                            +$('#email').val()+"</td><td>"
                            +$('#phone').val()+"</td></tr>");
    });
});