Add data to table using onclick function in JavaScript

Question

Here is my Code:

<body>
<h2>Add/Update Person Form</h2>
<div id = "data">
    <form id = "person">    
        <br><br>
        Name: <input id = "name" name = "name" type = "text">
        <br><br>
        Gender: <input name = "gender" type = "radio" value = "Male"> Male
                <input name = "gender" type = "radio" value = "Female"> Female
        <br><br>
        Age: &nbsp;&nbsp;&nbsp; <input id = "age" name = "age" type = "text">
        <br><br>
        City: &nbsp;&nbsp;&nbsp;<select id = "city" name = "city">
                <option>Lahore</option>
                <option>Islamabad</option>
                <option>Karachi</option>
            </select>
        <br><br>
        <input id = "button" type = "button" value = " Reset " onclick = "ResetForm()">&nbsp;&nbsp;&nbsp;
        <input id = "button" type = "button" value = " Add " onclick = "AddData()">
        <input id = "button" type = "button" value = " Update ">
    </form>
</div>

<h3>List Of Persons</h3>
<div id = "tab">
        <table id = "list" cellspacing = "0px" cellpadding = "20px" text-align = "center">
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Gender</td>
                    <td>Age</td>
                    <td>City</td>
                    <td>Action</td>
                </tr>
            </thead>

            <tbody>

            </tbody>
        </table>
</div>

Here is the code for JAVASCRIPT:

<script>
    function AddData(){
        var x = document.getElementById("age").value;
        var y = document.getElementById("name").value;
        var letters = '/^[a-zA-Z]+$/'; 
        if((parseInt(x)!=(x))&&(y==parseInt(y))){
            alert("Wrong Value Entered");
        }
        else{
            var rows = "";
            var name = document.getElementById("gender").value;
            var gender = document.getElementById("gender").value;
            var age = document.getElementById("age").value;
            var city = document.getElementById("city").value;   

            rows += "<tr><td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + city + "</td></tr>";
            $(rows).appendTo("#list tbody");
        }   
    }

    function ResetForm(){
        document.getElementById("person").reset();
    }
</script>

Now what I want to do is that there are three buttons in this code. Add, reset, update. Im working on Add right now Reset works. I've written the above code to add data but when ever I click Add the data is not added to the table body. I am using onclick function to add data. All this work is done on a single HTML page. I think the problem is because of single page but I have to do this on one page. Need help with this.

just as a side note - the "&nbsp" in your html need to be " " (with a semi-colon at the end) — royse41
– royse41, Commented Dec 13, 2013 at 9:12

Sergio · Accepted Answer · 2013-12-13 09:43:29Z

2

Try this:

function AddData() {
    var x = document.getElementById("age").value;
    var y = document.getElementById("name").value;
    var letters = '/^[a-zA-Z]+$/';
    if ((parseInt(x) != (x)) && (y == parseInt(y))) {
        alert("Wrong Value Entered");
    } else {
        var rows = "";
        var name = "sadcsad";
        var gender = $('input[name="gender"]:checked').val();
        var age = document.getElementById("age").value;
        var city = document.getElementById("city").value;

        rows += "<tr><td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + city + "</td></tr>";
        $(rows).appendTo("#list tbody");
    }
}

What I corrected:

to retrieve a <input> value you need javascript's .value or jQuery's .val()
in your function you were looking for var gender = document.getElementById("gender").innerHTML;, but there is no input with that ID, you should use name
Note that you must have unique ID's, so in my fiddle I corrected your buttons to class="button" instead.

Fiddle

Solution with plain javascript:

function AddData() {
    var x = document.getElementById("age").value;
    var y = document.getElementById("name").value;
    var letters = '/^[a-zA-Z]+$/';
    if ((parseInt(x) != (x)) && (y == parseInt(y))) {
        alert("Wrong Value Entered");
    } else {
        var rows = "";
        var name = "sadcsad";
        var gender = document.querySelector('input[name="gender"]:checked');
        gender = gender ? gender.value : '';
        var age = document.getElementById("age").value;
        var city = document.getElementById("city").value;

        rows += "<td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + city + "</td>";
        var tbody = document.querySelector("#list tbody");
        var tr = document.createElement("tr");

        tr.innerHTML = rows;
        tbody.appendChild(tr)

        //
    }
}

function ResetForm() {
    document.getElementById("person").reset();
}

Fiddle

edited Dec 13, 2013 at 9:43

answered Dec 13, 2013 at 9:15

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sergio Over a year ago

OP did use jQuery already... $(rows).appendTo("#list tbody");

user2631892 Over a year ago

Hey I tried this It works on fiddle but not working at my end. Can it be a problem in my css?

Sergio Over a year ago

@user2631892, do you get any error in the console? and also: do you have the jQuery library loaded?

user2631892 Over a year ago

No I have not loaded it. Can I do this without using JQuery?

Sergio Over a year ago

@user2631892, sure, but you did already have jQuery in your posted code. 1 minute and I will update.

|

Sridhar R · Accepted Answer · 2013-12-13 09:15:40Z

Try this

HTML

<body>
<h2>Add/Update Person Form</h2>
<div id = "data">
    <form id = "person">    
        <br><br>
        Name: <input id = "name" name = "name" type = "text">
        <br><br>
        Gender: <input class="gender" name = "gender" type = "radio" value = "Male"> Male
                <input class="gender" name = "gender" type = "radio" value = "Female"> Female
        <br><br>
        Age: &nbsp&nbsp&nbsp <input id = "age" name = "age" type = "text">
        <br><br>
        City: &nbsp&nbsp&nbsp<select id = "city" name = "city">
                <option>Lahore</option>
                <option>Islamabad</option>
                <option>Karachi</option>
            </select>
        <br><br>
        <input id = "button" type = "button" value = " Reset " onclick = "ResetForm()">&nbsp&nbsp&nbsp
        <input id = "button" type = "button" value = " Add " onclick = "AddData()">
        <input id = "button" type = "button" value = " Update ">
    </form>
</div>

<h3>List Of Persons</h3>
<div id = "tab">
        <table id = "list" cellspacing = "0px" cellpadding = "20px" text-align = "center">
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Gender</td>
                    <td>Age</td>
                    <td>City</td>
                    <td>Action</td>
                </tr>
            </thead>

            <tbody>

            </tbody>
        </table>
</div>

Script

function AddData(){
        var x = document.getElementById("age").value;
        var y = document.getElementById("name").value;
        var letters = '/^[a-zA-Z]+$/'; 
        if((parseInt(x)!=(x))&&(y==parseInt(y))){
            alert("Wrong Value Entered");
        }
        else{
            var rows = "";
            var name = document.getElementById("name").value;
            var gender =document.querySelector('.gender:checked').value;
            var age = document.getElementById("age").value;
            var city = document.getElementById("city").value;   

            rows += "<tr><td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + city + "</td></tr>";
            $(rows).appendTo("#list tbody");
        }   
    }

    function ResetForm(){
        document.getElementById("person").reset();
    }

DEMO

Collectives™ on Stack Overflow

Add data to table using onclick function in JavaScript

2 Answers 2

Fiddle

Fiddle

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related