append jquery with forms

Question

Я пытаюсь добавить значение моей формы jQuery в свою таблицу под тегами <td>.

Однако по какой-либо причине он не добавляет и не публикует значение внутри таблицы.

вот мой 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>'); 

    }); 
}); 

Вот JSFIDDLE: https://jsfiddle.net/zbb6fqtc/

Любая идея?

Answer 1

Есть 2 проблемы.

1. В JavaScript для объединения строк, вы должны использовать + оператор не ..

2. Вы не предотвращаете действие по умолчанию для события. Страница отправляется/обновляется, и вы не видите добавленный элемент.

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

$('tr').append('<td>' + fname + '</td>'); - >>>>> эта часть портя таблицы. Любая идея почему?

Ваша разметка недействительна. Вы должны обернуть элементы th элементом tr. Браузеры обычно устанавливают разметку. Таким образом, элемент $('tr') выбирает дочерний элемент tr элемента thead. Вы должны использовать более конкретный селектор для выбора дочернего элемента tr элемента tbody. Что-то вроде $('tbody tr') или $('tr').eq(1).

Есть ли лучший вариант добавить это?

Я бы добавил пустые ячейки в элемент tr и заполнил ячейки, используя значения input.

<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

Изменить тип Button представить кнопку.

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

Написать свой код на JQuery кнопку мыши событие:

$(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>'); 

    }); 

}); 

Примечание: Заменить "" с "+" -> $ ('tr'). append ('' + fname + '');

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

Answer 3

просто небольшие проблемы в ваших JS, фиксированных, протестирована и работает на 100% ...код ниже проблемы

1) проблема конкатенации строки, ее "+" для js и "." для PHP
2) добавил event.preventDefault() для предотвращения дефолта, направляющее

 

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

Ну вы должны предотвратить представить первый.

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

}); 

и, может быть, если вы хотите добавить более одного тр к этой таблице, может быть, вам нужно использовать другой селектор, как этот

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