将文本框中的数据添加到表Javascript，HTML

Question

I want to add data into a table that it is created dynamic using javascript. I have created a form with Name, Surname, Age and so on. I have to complete the textboxes and when I click on the Submit button the table should e field with the data's from the textboxes.

The form looks like this:

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

I used table with no border so that my form looks better. The table from the form has nothing to do with my request.

Thank you!

Answer 1

If you want to show the data in the same page, just as your button is clicked, I don't think you should use a submit button.

Try this:

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

Answer 2

Here's a 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>');
   }

  });

});

I hope this is what you wanted to achieve.