append jquery with forms

Question

I am trying to append my jQuery form value to my table under ‍‍‍‍<td> tags.

However for some reason it wont append or post the value inside the table.

here's my jQuery:

$(document).ready(function(){

  $('form').submit(function(){

    var fname= $('input#form_fname').val(),
        lname = $('input#form_lname').val(),
        email = $('input#form_email').val(),
        phone = $('input#form_phone').val();

    $('tr').append('<td>'.fname.'</td>');

   });
});

Here's the JSFIDDLE: https://jsfiddle.net/zbb6fqtc/

Any idea?

Answer 1

There are 2 problems.

1. In JavaScript for string concatenation you should use the + operator not ..

2. You don't prevent the default action of the event. The page is submitted/refreshed and you don't see the appended element.

   $('form').submit(function(event) {
       event.preventDefault();
       var fname= $('input#form_fname').val();
       // ...
       $('tr').append('<td>' + fname + '</td>');
   });
   

$('tr').append('<td>' + fname + '</td>'); ->>>>>this part is messing up the table. Any idea why?

Your markup is invalid. You should wrap the th elements with a tr element. Browsers usually fix the markup. So the $('tr') element selects the tr child of the thead element. You should use a more specific selector for selecting the tr child of the tbody element. Something like $('tbody tr') or $('tr').eq(1).

Is there a better option to append this?

I would add empty cells to the tr element and populate the cells using the input values.

<table border="1">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Email Address</th>
            <th>Contact #</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

JavaScript:

$('form').submit(function (event) {
    event.preventDefault();
    var $td = $('tbody tr td');
    $('input', this).each(function (i) {
        $td.eq(i).text(this.value);
    });
});

https://jsfiddle.net/zbb6fqtc/9/

Answer 2

just small problems in your js, fixed,tested and works 100%...code below problems

1) string concatenation problem, its "+" for js and "." for php
2)added event.preventdefault() for preventing default submitting

    <script>
        $(document).ready(function(event){

            $('form').submit(function(event){
                event.preventDefault();
                var fname= $('input#form_fname').val(),
                    lname = $('input#form_lname').val(),
                    email = $('input#form_email').val(),
                    phone = $('input#form_phone').val();

                $('tr').append('<td>'+fname+'</td>');

            });
        });

    </script>

Answer 3

Change Button type submit to button.

        <p>
            <input type="button" id="bnSubmit" value="Add User" />
        </p>

Write your code on jQuery button click event:

$(document).ready(function(){

   $("#bnSubmit").click(function(){

  var fname= $('input#form_fname').val(),
        lname = $('input#form_lname').val(),
        email = $('input#form_email').val(),
        phone = $('input#form_phone').val();

    $('tr').append('<td>'+fname+'</td>');

    });

});

Note: Replace "." with "+" --> $('tr').append(''+fname+'');

https://jsfiddle.net/zbb6fqtc/5/

Answer 4

Well you must to prevent submit first.

 $('form').submit(function(e){
     e.preventDefault(); //Prevent submit

 });

and maybe if you want add more than one tr to that table maybe you need use another selector like this

$('table tbody').append('<tr><td>'+fname+'</td>  <td>'+lname+' </tr>');