I'm trying to populate from fields from table data but I really have no idea how to do it. I'm newbie in Java script. Kindly help me through this. Here is my code snapshot which shows add and delete record functionality through js. Thanks in advance!
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.css">
<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css">
<link type="text/css" rel="stylesheet" href="fonts/glyphicons-halflings-regular.eot">
<link type="text/css" rel="stylesheet" href="js/bootstrap.js">
<link type="text/css" rel="stylesheet" href="js/bootstrap.min.js">
<script>
localStorage.setVisit = "";
function first_visit(){
if(typeof (localStorage.setVisit) == "undefined" || localStorage.setVisit == ""){
localStorage.setVisit = "Yes";
document.getElementById("up_btn").disabled = true;
document.getElementById("add_btn").disabled = false;
}
}
function add_data(){
var name_tb = document.getElementById("name").value;
if(document.getElementById("Male").checked){
var gender = document.getElementById("Male").value;
}else if(document.getElementById("Female").checked){
gender = document.getElementById("Female").value;
}else{
gender = "";
}
var age_tb = document.getElementById("age").value;
var city = document.getElementById("city");
var city_selected = city.options[city.selectedIndex].value;
var table = document.getElementById("table_person");
var row = table.insertRow(-1);
var par1 = row.insertCell(0);
var par2 = row.insertCell(1);
var par3 = row.insertCell(2);
var par4 = row.insertCell(3);
var par5 = row.insertCell(4);
var par6 = row.insertCell(5);
par1.innerHTML = name_tb;
par2.innerHTML = gender;
par3.innerHTML = age_tb;
par4.innerHTML = city_selected;
par5.innerHTML = '<a href="#" onclick="update_rec();">Update</a>';
par6.innerHTML = '<a href="#" onclick="delete_rec(this)">Delete</a>';
document.getElementById("up_btn").disabled = false;
document.getElementById("add_btn").disabled = false;
}
function delete_rec(record){
var del = record.parentNode.parentNode;
del.parentNode.removeChild(del);
document.getElementById("add_btn").disabled = false;
}
function update_rec(record){
document.getElementById("up_btn").disabled = false;
document.getElementById("add_btn").disabled = true;
}
</script>
</head>
<body onload="first_visit()">
<div class="container">
<div class="row" style="margin-top:2%;">
<div class="col-lg-8">
<h3>List of Persons</h3>
<table class="table table-striped" id="table_person" style="border: 2px solid black;">
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>City</th>
<th class="text-right">Action</th>
<th></th>
</tr>
</table>
</div>
<div class="col-lg-4">
<h3>Add / Update Person Form</h3>
<div style="border: 2px solid darkgrey; height: 55%;">
<form class="form-horizontal" style="margin-top: 8%;">
<div class="form-group">
<label class="control-label col-lg-3">Name:</label>
<div class="col-lg-8">
<input id="name" type="text" name="name" class="form-control" placeholder="Name"
style="border: 2px solid black;">
</div>
</div>
<div class="form-group" style="padding-top: 2%;">
<label class="control-label col-lg-3">Gender:</label>
<div class="col-lg-8" style="margin-top: 2%;">
<input type="radio" name="gender" value="Male" id="Male">Male
<input type="radio" name="gender" value="Female" id="Female">Female
</div>
</div>
<div class="form-group" style="padding-top: 2%;">
<label class="control-label col-lg-3">Age:</label>
<div class="col-lg-8">
<input id= "age" type="text" name="age" class="form-control" placeholder="Age"
style="border: 2px solid black;">
</div>
</div>
<div class="form-group" style="padding-top: 3%;">
<label class="control-label col-lg-3">City:</label>
<div class="col-lg-8">
<select id = "city" class="col-lg-12" style="margin-top: 1%; height: 10%; border: 2px solid black;">
<option>Lahore</option>
<option>Karachi</option>
<option>Islamabad</option>
<option>Faisalabad</option>
<option>Multan</option>
</select>
</div>
</div>
<div class="form-group" style="padding-top: 3%;">
<div class="col-lg-offset-2">
<input type="reset" class="btn btn-default" value="Reset"
style="border:2px solid black;padding:1% 8% 1% 8%;">
<input type="button" id="add_btn" onclick="add_data()" class="btn btn-default" value="Add"
style="border: 2px solid black;padding:1% 8% 1% 8%;">
<input type="button" id="up_btn" class="btn btn-default" value="Update"
style="border: 2px solid black;padding:1% 8% 1% 8%;">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>