Добавление данных из текстовых полей в таблицу Javascript, HTML

Question

Я хочу добавить данные в таблицу, которая создана динамически с помощью javascript. Я создал форму с именем, фамилией, возрастом и т. Д. Я должен заполнить текстовые поля, и когда я нажимаю кнопку «Отправить», таблица должна иметь поле с данными из текстовых полей.

форма выглядит следующим образом:

 <form name='registration' onSubmit="return formValidation();"> 
     <table align="center"> 
     <tr> 
      <td style="text-align:left">Nume</td> 
      <td><input type="text" name="name" size="20"> 
     </tr> 
     <tr> 
      <td style="text-align:left">Prenume</td> 
      <td><input type="text" name="surname" size="20"> 
     </tr> 

     <tr> 
      <td style="text-align:left">CNP</td> 
      <td><input type="text" name="cnp" size="20"> 
     </tr> 

     <tr> 
      <td style="text-align:left">Varsta</td> 
      <td><input type="text" name="age" size="20"> 
     </tr> 

     <tr> 
      <td style="text-align:left">Ocupatia</td> 
      <td> 
       <select> 
        <option>Angajat</option> 
        <option>Neangajat</option> 
       </select> 
     </tr> 
     </table> 
     <br/> 
     <div class="buttonHolder"> 
      <INPUT type="submit" name="submit" value="Adauga" onClick="insertData()" id="btn_s" /> 
      <INPUT type="button" value="Goleste" type="reset" id="btn_i" /> 
     </div> 
     </form> 

Я использовал таблицу без рамки, так что моя форма выглядит лучше. Таблица из формы не имеет ничего общего с моей просьбой.

Спасибо!

Answer 1

Вот FIDDLE

$(function() { 
    $('form[name="registration"]').submit(function(e) { 
    e.preventDefault(); 
    var name = $('input[name="name"]').val(), 
     sName = $('input[name="surname"]').val(), 
     cnp = $('input[name="cnp"]').val(), 
     age = $('input[name="age"]').val(), 
     ocu = $('select[name="ocupatia"]').val(); 

    if($('.results').length < 1) { 
     $('body').append('<table class="results">' 
         +'<tr>' 
          +'<th>Nume</th>' 
          +'<th>Prenume</th>' 
          +'<th>CNP</th>' 
          +'<th>Varsta</th>' 
          +'<th>Ocupatia</th>' 
         +'</tr>' 
         +'<tr>' 
          +'<td>'+name+'</td>' 
          +'<td>'+sName+'</td>' 
          +'<td>'+cnp+'</td>' 
          +'<td>'+age+'</td>' 
          +'<td>'+ocu+'</td>' 
         +'</tr>' 
        + '</table>'); 
    } 

    }); 

}); 

Я надеюсь, что это то, что вы хотите достичь.

Answer 2

Если вы хотите отобразить данные на той же странице, как только ваша кнопка нажата, я не думаю, что вы должны использовать кнопку отправки.

Попробуйте это:

function insertData() { 
    var data = $('table tr td input, table tr td select'); 
    var table = $('#dataTable td'); 
    for (var i = 0; i < table.length; i++) { 
     table[i].innerText = (data[i].value); 
    } 
} 

FIDDLE