Technical Solutions: May 2017

<html>
<title>interview</title>
<head>
table {
border: 1px solid #666;
width: 100%;
}
th {
background: #f8f8f8;
font-weight: bold;
padding: 2px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"></link>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form id="profile" name="profile" action="" method="POST">
<div class="form-group">
<label for="inputdefault">First Name</label>
<input id="fname" class="form-control"type="text"name="fname"value=""/>
</div>
<div class="form-group">
<label for="inputdefault">Last Name</label>
<input id="lname"class="form-control" type="text"name="lname"value=""/>
</div>
<div class="form-group">
<label for="inputdefault">Email</label>
<input id="email" class="form-control" type="email"name="email"value=""/>
</div>
<div class="form-group">
<label for="inputdefault">Mobile no</label>
<input id="mobileno"class="form-control" type="text"name="mobileno"value=""/>
</div>
<input type="Button" class="btn-primary"name="mobileno"value="submit"/>

</form>
<table id="personDataTable">
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
</tr>

</table>
</div>
</body>

</html>
<script type="text/javascript">
$(document).ready(function(){
$(".btn-primary").click(function(){
alert("hi");
var fname=$("#fname").val();
var lname=$("#lname").val();
var email=$("#email").val();
var mobileno=$("#mobileno").val();
var dataString="fname="+fname+"&lname="+lname+"&email="+email+"&mobileno="+mobileno;
//var dataString={'fname':fname,'lname':lname,'email':email,'mobileno':mobileno};
alert(dataString);
$.ajax({
url:'http://localhost/interview/index.php',
type:'POST',

data:dataString,
success:function(response){
var data=JSON.parse(response);
debugger;
alert(response);
for (var i = 0;i< Object.length;i++)
{
var row = $("<tr />");
$("#personDataTable").append(row); //this will append tr element to table... keep its reference for a while since we will add cels into it
row.append($("<td>" + data.fname+ "</td>"));
row.append($("<td>" + data.lname+ "</td>"));
row.append($("<td>" + data.email+ "</td>"));

}

}

});

});

});
</script>

Technical Solutions

Friday, 5 May 2017

jquery load more

create dynemic table and append data to table