Develop Reference

How to add rows to jquery datatable inside a form?

I hope everyone had good holidays.
I need to add rows to my datatable inside a modal window(partial view). This modal window basically has a form for various fields and a datatable, together with two inputs and a button.
My idea was to fill the two input fields and when the button is pressed a new row is created in the table, with the values inserted in the two input fields. But for some reason, when I click the button the values in the input fields are empty.
The information on the table would very likely be stringified and sent, for example, to the field asp-for="test". So far this was what I thought.
Is this logic possible within a partial view? Do I need an additional form to receive data from my two inputs? I'm already inside another form and I know HTML5 doesn't allow for form nesting, but I get the nagging feeling that I would need an additional form for this logic.
Here is the code:
(js)
$(document).ready(function () {
$('#AddProdBtn').click(function () {
$('#returnLinesGrid').dataTable().fnAddData( [
$('#prodId').val(), $('#prodQty').val()] );
});
});
(cshtml)
<div id="return-edition-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content white-box white-box--lblreset">
<div class="modal-header">
<h5 class="modal-title create" style="display:none;">#TitleResource.ReturnCreate</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form asp-controller="Returns" asp-action="Create" method="post" autocomplete="off">
<div asp-validation-summary="ModelOnly"></div>
<a hidden id="create-url" asp-action="Create" asp-controller="Returns"></a>
<input type="hidden" value="#Guid.NewGuid()" asp-for="Id" />
<div class="modal-body row">
<div class="md-form col-6 create-only row">
<select asp-for="ReturnType" asp-items="Html.GetEnumSelectList<OrderReturnTypeEnum>()" required class="form-control" selectpicker>
<option value="">#LabelResource.SelectReturnType</option>
</select>
<span asp-validation-for="ReturnType"></span>
</div>
<div class="md-form col-6 create-only" id="ReturnMotivePlaceholder" style="margin-top: 6px">
<select disabled selectpicker>
<option value="">#LabelResource.SelectReturnMotive</option>
</select>
</div>
<div class="md-form col-6 create-only" data-dependency="#((int)OrderReturnTypeEnum.Recall)" style="margin-top:6px">
<select asp-for="ReturnMotive" asp-items="Html.GetEnumSelectList<OrderReturnMotiveEnumRecall>()" required class="form-control" selectpicker>
<option value="">#LabelResource.SelectReturnMotive</option>
</select>
<span asp-validation-for="ReturnMotive"></span>
</div>
<div class="md-form col-6 create-only" data-dependency="#((int)OrderReturnTypeEnum.Daily)" style="margin-top:6px">
<select asp-for="ReturnMotiveAux" asp-items="Html.GetEnumSelectList<OrderReturnMotiveEnumDaily>()" required class="form-control" selectpicker>
<option value="">#LabelResource.SelectReturnMotive</option>
</select>
<span asp-validation-for="ReturnMotiveAux"></span>
</div>
</div>
<div class="modal-body row">
<div class="md-form col-6 create-only" data-dependency="#((int)OrderReturnTypeEnum.Daily)">
<input type="number" value="" asp-for="InvoiceNumber" class="form-control" required placeholder="#LabelResource.SelectReturnInvoiceNumber" />
</div>
<div class="md-form col-6 create-only">
<input type="text" value="" asp-for="ClientReturnNumber" placeholder="#LabelResource.SelectClientReturnNumber" class="form-control" />
</div>
</div>
<div class="md-form col-3 create-only">
<input type="number" value="" id="prodId" placeholder="#LabelResource.SelectProdId" />
</div>
<div class="md-form col-3 create-only">
<input type="text" value="" id="prodQty" placeholder="#LabelResource.SelectProdQuantity" />
</div>
<div class="col-6>
<button type="button" id="AddProdBtn">#ButtonResource.AddProduct</button>
</div>
<div class="row">
<div class="col-12">
<div class="row">
<table class="dataTable" id="returnLinesGrid" asp-for="ReturnLines">
<thead>
<tr>
<th>#Html.Raw(LabelResource.ProductId)</th>
<th>#Html.Raw(LabelResource.Quantity)</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="row modal-footer message-footer pr-5">
<div class=" mr-md-0">
<a data-dismiss="modal" class="btn btn-danger w-100">#ButtonResource.Cancel</a>
</div>
<div class=" ml-3">
<button type="submit" class="btn btn-primary w-100">#ButtonResource.Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
But the value of "prodId" and "prodQty" is always empty when I click the "AddProdBtn" button. Almost as if it never. I have no idea what to do..
Thank you for any and all help.
Pictures
Modal window
Main window, modal is called by pressing "Nova devolução" button

You should add the js to the main view. Below is a working demo:
Main View:
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#return-edition-modal">
Create
</button>
#await Html.PartialAsync("_ProductPartial")
#section scripts{
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<script>
$(document).ready(function () {
var datatable = $('#returnLinesGrid').dataTable();
$('#AddProdBtn').click(function () {
datatable.fnAddData([
$('#prodId').val(), $('#prodQty').val()]);
});
});
</script>
}
Partial View:
<div id="return-edition-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Create</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-controller="Returns" asp-action="Create" method="post" autocomplete="off">
<div asp-validation-summary="ModelOnly"></div>
<div class="md-form col-3 create-only">
<input type="number" value="" id="prodId" placeholder="SelectProdId" />
</div>
<div class="md-form col-3 create-only">
<input type="text" value="" id="prodQty" placeholder="SelectProdQuantity" />
</div>
<div class="col-6">
<button type="button" id="AddProdBtn">AddProduct</button>
</div>
<table id="returnLinesGrid">
<thead>
<tr>
<th>#Html.Raw("ProductId")</th>
<th>#Html.Raw("Quantity")</th>
</tr>
</thead>
</table>
<div class="modal-footer">
<div class="mr-md-0">
<a data-dismiss="modal" class="btn btn-danger">Cancel</a>
</div>
<div class=" ml-3">
<button type="submit" class="btn btn-primary">Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
Result:

I finally got it! There is a typescript part of the code, which I had no idea would have a completely different behaviour than the javascript code, in the modal window, for some reason. I basically just had to put my jquery code in the .ts file associated(in this case Return.Index.ts) and then it finally recognized the values in my inputs!
Thank you so much, everyone, and early happy new year!

Problem getting JQuery data-id value after clicking datatable navigation

I got bug when I use JQuery data-id in jQuery Datatables. For the first 10 (Ten) record working well. But when I click navigation table to enter to the second page, the data-id value not shown. Please see my code below :
<i class="icon-plus2 pr-2"></i> Tambah Data
<table class="table datatable-basic table-striped table-hover">
<thead>
<tr>
<th class="text-center">#</th>
<th>Nama Jenis Obat</th>
<th class="text-center">Aksi</th>
</tr>
</thead>
<tbody>
<?php
$x = 1;
$sdata = mysqli_query($konek, "SELECT * FROM e_jnsobat ORDER BY nm_jnsobat ASC");
while($ddata = mysqli_fetch_array($sdata)) {
echo "
<tr>
<td class='text-center'>" . $x . ".</td>
<td>" . $ddata['nm_jnsobat'] . "</td>
<td class='text-center'>
<div class='btn-group'>
<a href='#' class='breadcrumb-elements-item dropdown-toggle' data-toggle='dropdown' aria-expanded='false'>
<i class='icon-grid3'></i>
</a>
<div class='dropdown-menu dropdown-menu-right' x-placement='bottom-end' style='position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(310px, 40px, 0px);'>
<a href='#' data-toggle='modal' data-target='#modalEdit' data-id='".$ddata['id_jnsobat']."' class='dropdown-item btedit'><i class='icon-pencil7'></i> Edit Data</a>
<div class='dropdown-divider'></div>
<a href='#' data-toggle='modal' data-target='#modalHapus' data-id='".$ddata['id_jnsobat']."' data-nama='".$ddata['nm_jnsobat']."' class='dropdown-item bthapus'><i class='icon-trash'></i> Hapus Data</a>
</div>
</div>
</td>
</tr>
";
$x++;
}
?>
</tbody>
</table>
<div id="modal_theme_custom" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form method="post">
<div class="modal-header bg-brown">
<h6 class="modal-title">Tambah Data</h6>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Nama Jenis Obat :</label>
<input type="text" class="form-control" name="nm_jnsobat" placeholder="Nama Jenis Obat" required>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="tambahin" class="btn bg-brown">Tambah Data</button>
</div>
</form>
</div>
</div>
</div>
<div id="modalEdit" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-teal-600">
<h4 class="modal-title">Edit Data</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body pb-0">
<form method="post">
<input type="hidden" name="id_jnsobat" id="id_jnsobat_edit">
<div class="form-group">
<label>Nama Jenis Obat :</label>
<input type="text" name="nm_jnsobat" class="form-control" placeholder="Nama Jenis Obat" id="nm_jnsobat" required>
</div>
<div class="form-group">
<div class="alert alert-warning">Pastikan data yang anda tambahkan adalah benar.</div>
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="editin" class="btn bg-teal-800">Edit Data</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="modalHapus" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form method="post">
<input type="hidden" name="id_jnsobat" id="id_jnsobat_hapus">
<div class="modal-header bg-danger">
<h5 class="modal-title">Konfirmasi Hapus Data</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="alert alert-danger">Anda yakin akan menghapus data <b id="nm_jnsobat_hapus"></b>? Data yang sudah dihapus tidak bisa dikembalikan lagi.</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-link" data-dismiss="modal">Batal</button>
<button type="submit" name="hapusin" class="btn bg-danger">Ya! Hapus permanen data</button>
</div>
</form>
</div>
</div>
</div>
And this is the javascript code:
<script type="text/javascript">
$(document).ready(function() {
$('.btedit').on('click', function() {
const id = $(this).data('id');
$('#id_jnsobat_edit').val(id);
console.log("Datanya : "+id);
$.ajax({
type: 'get',
url: "<?php echo docroot('ajax/jnsobat/'); ?>"+id,
async: false,
dataType: 'json',
success: function(data) {
//console.log("Datanya : "+data);
$('#nm_jnsobat').val(data[0].nm_jnsobat);
}
});
});
$('.bthapus').on('click', function() {
const id = $(this).data('id');
const nama = $(this).data('nama');
$('#id_jnsobat_hapus').val(id);
//$('#nm_userxx').val(nama);
document.getElementById("nm_jnsobat_hapus").innerHTML = nama;
//console.log("data : " + nama);
});
});
</script>
on the first 10 recode its work well, but when I click button to go to the second page of datatable navigation the data-id dosen't work... I dont know where is the problem... sory about my English...

As per the comments above here is the answer...
The below only listens to click events that are rendered before the code is executed.
$('.bthapus').on('click', function() { ... });
Replacing that with the below listens to the click event on the entire document, so dynamically created elements (such as your table pagination) will be included.
$(document).on('click', '.btedit', function() {

How to open new form on dynamic button click event in php

I have created dynamic button in php. i need to to open new form in same homepage on that dyanamic button click event and when i am clicking on button it refresh the page. how to solve this problem
here is my code that i have tried
<?php
function dash() {
include 'config.php';
$sql = "SELECT roomno FROM roombook";
if($result = mysqli_query($db, $sql)){
$str = '';
while($row = mysqli_fetch_array($result)){
// generate array from comma delimited list
$rooms = explode(',', $row['roomno']);
//create the dynamic button and set the value
foreach ( $rooms as $k=>$v ){
$str .= '<input type="submit" class="Click" onClick="showDiv()" name="btn_'.$k.'" value="'.$v.'" id="btn_'.$k.'"/>';
}
//return $str;
}
return $str;
}else {
echo "ERROR: Could not able to execute $sql. " . mysqli_error($db);
}
mysqli_close($db);
}
?>
<!Doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>room boking</title>
<link href="css/bootstrap1.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/front.css">
</head>
<body>
<form mathod="post" action="">
<div class =" row box col-md-4" >
<div style="color:black"><?php echo dash();?></div>
</div>
<script>
function showDiv() {
document.getElementById('link').style.display = "block";
}
</script>
</form>

You can you bootstrap form so it will look effective
http://jsfiddle.net/KyleMit/0fscmf3L/
Try this one
It has html and css both code so you just need to integrate it and you can open you form on same page and in popup
HTML code
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalHorizontal">
Launch Horizontal Form
</button>
<!-- Modal -->
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Modal title
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label"
for="inputEmail3">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control"
id="inputEmail3" placeholder="Email"/>
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label"
for="inputPassword3" >Password</label>
<div class="col-sm-10">
<input type="password" class="form-control"
id="inputPassword3" placeholder="Password"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"/> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModalNorm">
Launch Normal Form
</button>
<!-- Modal -->
<div class="modal fade" id="myModalNorm" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close"
data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title" id="myModalLabel">
Modal title
</h4>
</div>
<!-- Modal Body -->
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control"
id="exampleInputEmail1" placeholder="Enter email"/>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control"
id="exampleInputPassword1" placeholder="Password"/>
</div>
<div class="checkbox">
<label>
<input type="checkbox"/> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">
Save changes
</button>
</div>
</div>
</div>
</div>
<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0; background:lightgray;width:100%;'>
About this SO Question:
<a href='http://stackoverflow.com/q/26562900/1366033'>
Twitter Bootstap - form in Modal fomatting
</a><br/>
Fork This Skeleton Here:
<a href='http://jsfiddle.net/KyleMit/kcpma/'>
Bootstrap 3 Skeleton
</a><br/>
</div>
css code
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Hope this might help you

Use input type button instead of submit
$str .= '<input type="button" class="Click" onClick="showDiv()" name="btn_'.$k.'" value="'.$v.'" id="btn_'.$k.'"/>';

How Do I sove this "Cannot read property 'reset' of null" in AngularJS?

we have to clear the data of the form after the user is click on the submit button.i will be provided the id to the clear the form but form is not not reset.i am using javaScript reset() function to clear the data.how to solve this.
//here we crate the module for the CRUD application here
var app= angular.module("myApp",[]);
app.controller("myCont", function($scope,myService){
//here we create the myService function for show the Dmmt array
$scope.user = myService.show();
console.log($scope.user);
//here we create the saveUser function for push the item into the list
$scope.saveUser = function(){
var data =
{
eid:$scope.user.eid,
email:$scope.user.email,
city:$scope.user.city,
salary:$scope.user.salary,
date:$scope.user.date,
}
//here we create will pass the user data to the myService of the show2
$scope.user =myService.show2(data);
//Here we clear the form data
document.getElementById("clearData").reset();
//Here we clear the form data without function
// $scope.user.eid ="";
// $scope.user.email ="";
// $scope.user.city ="";
// $scope.user.salary ="";
// $scope.user.date ="";*/
}
//Calling setParam function for the particular userDetails.
$scope.setParam = function(index){
$scope.one = $scope.user[index];
console.log($scope.one);
}
//here we delete the deleteUser function for remove the item into the lsit
$scope.deleteUser = function(index){
$scope.result3 =myService.show3(index);
console.log($scope.result3);
}//close contrller here
$scope.editeUser = function(x){
$scope.ok= myService.editeUsers(x);
}
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- include the angularjs files here-->
<script src="angular.min.js"></script>
<script src="jquery-1.12.4.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap.min.js"></script>
<script src="app/controller.js"></script>
<script src="app/service.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
</head>
<body ng-controller="myCont">
<div class="jumbotron">
<div class="container">
<button type="button" class="btn btn-info btn-lg pull-right" data-toggle="modal" data-target="#myModal">Add New User</button>
<input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'Bhopal'" data-ng-false-value=''/>Bhopal
<br>
<input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'Australia'" data-ng-false-value=''/> Australia<br>
<input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'Playboy'" data-ng-false-value=''/>Playboy
<br>
<input type="checkbox" data-ng-model='ok.type1' data-ng-true-value="'London'" data-ng-false-value=''/>London<br>
<a href="#"><i class="fa fa-heart" aria-hidden="true"></i>
<div class="input-group">
<input type="text" class="form-control" ng-model="search" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
<div class="alert alert-info" ng-if="message">
Info ×.
</div>
<table class="w3-table w3-bordered">
<thead>
<tr>
<th>User</th>
<th>EmployeenName</th>
<th>Email</th>
<th>Salary</th>
<th>City</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in filtered =(user | filter:search) | filter:ok.type1 | orderBy:'salary' "
onclick="document.getElementById('id01').style.display='block'"
ng-click ="setParam($index)" >
<td style="max-height:61px;"><img src={{x.img}}></img></td>
<td>{{x.eid}}</td>
<td>{{x.email}} </td>
<td>{{x.salary| currency}}</td>
<td>{{x.city}}</td>
<td>{{x.date | date:'dd/mm/yy'}}</td>
<div style="float:right; margin-top:8px;"><p class="bg-primary">
Total Count after Filtered-{{filtered.length}}</p>
</div>
<td>
<button type="button" class="btn btn-info" ng-click="isEditForm=true;">edit</button>
</td>
<td ng-show="isEditForm">
<lable>Name</label><input ng-model="x.eid"/><br>
<lable>Email</label><input ng-model="x.email"/><br>
<lable>salary</label><input ng-model="x.salary"/><br>
<lable>city</label><input ng-model="x.city"/><br>
<lable>date</label><input ng-model="x.date"/><br>
<button ng-click="isEditForm=false;">SAVE HERE</button>
</td>
<td>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModalDelete">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal -->
//here we will provide the id for clear data
<form id="clearData">
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">New User Registration</h4>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="eid" ng-model="user.eid" placeholder="Enter Name">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Email</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="email" ng-model="user.email" placeholder="Enter Email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">City</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="city" ng-model="user.city" placeholder="Enter city">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Salary</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="salary" ng-model="user.salary" placeholder="Enter salary">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2">Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" name="date" ng-model="user.date" placeholder="Enter date">
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" data-dismiss="modal"
ng-click="saveUser()" >Submit</button>
</div>
</div>
<div class="modal-footer">
</div>
</div>
</form>
</div> <!-- here model body is closed-->
</div> <!-- here model content is clo sed-->
</div>
</div>
<!-- Declare another model is declare for edit Modal -->
<!--Here we creat the delete user model for dlete the user -->
<div class="modal fade" id="myModalDelete" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Are R Want to Delete </h4>
</div>
<div class="modal-body">
<strong style="color:blue;">
You re going to delete the {{one.eid}}</strong>
</h4>
</div>
<style type="text/css"></style>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="deleteUser($index)">Yes
</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div> <!-- here model body is closed-->
</div> <!-- here model content is closed-->
</div>
</div>
</div>
</div>
<div class="w3-container">
<div id="id01" class="w3-modal">
<div class="w3-modal-content w3-card-8 w3-animate-left" style="max-width:600px">
<div class="w3-center"><br>
<span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn w3-hover-red w3-container w3-padding-8 w3-display-topright" title="Close Modal">×</span>
<img src="{{one.img}}" alt="Avatar" class="w3-circle w3-margin-top">
</div>
<form class="w3-container" action="form.asp">
<table class="table table-striped">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th>City</th>
<th>Date</th>
</tr>
<tr>
<td>{{one.eid}}</td>
<td>{{one.email}}</td>
<td>{{one.salary}}</td>
<td>{{one.city}}</td>
<td>{{one.date}}</td>
<span class="btn btn-info">Follow Here</span>
</table>
</form>
</div>
</div>
</div>
</body>
</form>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>

AngularJs has ngModel to handle forms.
Use that instead.
Then, to clear the form, you simply set the form data object to new empty object and call $scope.$apply() *if calling outside of angular digest cycle * This will clear the form for you.

Extra </body> and </form> tags in the bottom, Remove them first.
Do not use document APi in Angular controller.
This should work
$scope.user.eid ="";
$scope.user.email ="";
$scope.user.city ="";
$scope.user.salary ="";
$scope.user.date ="";
for cleaner code you can wrap it in a function clear and call.

Bootstrap Modal pop up displays only the first record.

I want to edit the records for that i am using twitter bootstrap modal pop up. I have a view-product page which contains a button to open a modal pop up but at present time the code i am using displays only one record on view-product page, but my database contains more records and further more if i click the edit icon it displays only the first record and also i want to know how to get the id on the next page i.e. editproducts.php I have spend much of the on this topic but did not solve it please help by giving suggestions. Thanks....
view-product.php
<tbody role="alert" aria-live="polite" aria-relevant="all">
<?php
$query="SELECT * FROM tbl_product";
$sql_q=mysql_query($query) or die(mysql_error());
while($row = mysql_fetch_array($sql_q))
{
$productid=$row['pid'];
$prodName= $row['product_name'];
$prodPrice= $row['product_price'];
$prodtype= $row['product_type'];
$prodQty= $row['product_qty'];
$description=$row['product_desc'];
?>
<tr class="odd">
<td class=" sorting_1"><?=$prodName?></td>
<td class="center "><?=$prodPrice?></td>
<td class="center "><?=$prodtype?></td>
<td class="center "><?=$prodQty ?></td>
<td class="center "><a class="btn btn-success" href="http://bootstrapmaster.com/live/simpliq2/table.html#"> <i class="fa fa-search-plus "></i> </a> <a class="btn btn-info" data-toggle="modal" data-target="#myModalDetail-<?=$productid?>" href="#myModalDetail"> <i class="fa fa-edit"></i> </a> <a class="btn btn-danger" href="http://bootstrapmaster.com/live/simpliq2/table.html#"> <i class="fa fa-trash-o "></i> </a></td>
</tr>
<div class="modal fade" id="myModalDetail-<?=$productid?>">
<?php require "edit_products.php"; ?>
</div>
<? } ?>
</tbody>
edit_products.php
<?php
$productid=$_REQUEST[$productid];
$query="SELECT * FROM tbl_product WHERE pid='".$productid."'";
$sql_q=mysql_query($query);
while($row = mysql_fetch_array($sql_q))
{
$productid=$row['pid'];
$prodName= $row['product_name'];
$prodPrice= $row['product_price'];
$prodtype= $row['product_type'];
$prodQty= $row['product_qty'];
$description=$row['product_desc'];
}
?>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Edit Products Details</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-lg-12">
<form role="form" name="Insertdb" method="post" action="Insert_code/edit-products.php">
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Name</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodName" value="<?=$prodName ?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Price</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="prodPrice" placeholder="Enter product price" value="<?=$prodPrice?>">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Type</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productType" placeholder="Enter product type">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Quanity</label>
</div>
</div>
<div class="col-lg-6">
<input class="form-control" name="productQty" placeholder="Enter product Quantity">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Upload Product Image</label>
</div>
</div>
<div class="col-lg-6">
<input type="file" name="productImg">
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="form-group">
<label>Product Description</label>
</div>
</div>
<div class="col-lg-6">
<textarea class="form-control" name="productDesc" rows="3"></textarea>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input name="button1" type="submit" class="btn btn-primary">
</form>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>