html - append jquery with forms -

i trying append jquery form value table under ‍‍‍‍<td> tags.

however reason wont append or post value inside table.

here's 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 jsfiddle: https://jsfiddle.net/zbb6fqtc/

any idea?

there 2 problems.

1. in javascript string concatenation should use + operator not ..

2. you don't prevent default action of event. page submitted/refreshed , don't see 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 messing table. idea why?

your markup invalid. should wrap th elements tr element. browsers fix markup. $('tr') element selects tr child of thead element. should use more specific selector selecting tr child of tbody element. $('tbody tr') or $('tr').eq(1).

is there better option append this?

i add empty cells tr element , populate cells using 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/