Question

154

Adding data from textboxes into a table Javascript, HTML

rated 0 times [ 157] [ 3] / answers: 1 / hits: 7339 / 11 Years ago, tue, december 10, 2013, 12:00:00

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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

karolinab

Add To Favorites

Follow

Total Points: 644

Total Questions: 98

Total Answers: 117

Location: Vanuatu

Member since Mon, Dec 7, 2020

4 Years ago

answered 11 Years ago ellisw · Accepted Answer

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.