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: <input id = "age" name = "age" type = "text">
<br><br>
City: <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()">
<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.
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
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:     <input id = "age" name = "age" type = "text">
<br><br>
City:    <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()">   
<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
