Add data to table using onclick function in JavaScript

javascript html css html-table add

49,644

Solution 1

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();
}

Solution 2

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

49,644

Author by

Comments

user2631892 over 3 years

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.