Develop Reference

How can I pass the values of the relevant row into the modal when a click event occurs on a table?

When a click event occurs on a table, I want to pass the values of the relevant row into the modal. I wrote a code like this, but the values of the top row are always passed into the modal. What I want to do is to show the values in the row I clicked in the modal. How can I provide this?
my table codes here:
<table class="table align-middle" id="customerTable">
<thead class="table-light">
<tr>
<th class="sort" data-sort="name">Name Surname</th>
<th class="sort" data-sort="company_name">Phone Number</th>
<th class="sort" data-sort="leads_score">Note</th>
<th class="sort" data-sort="phone">Status</th>
<th class="sort" data-sort="location">Personal Name</th>
<th class="sort" data-sort="tags">Data Name</th>
<th class="sort" data-sort="action">Edit</th>
</tr>
</thead>
<tbody class="list form-check-all">
{% for x in model %}
<tr>
<td class="table-namesurname">{{x.name}}</td>
<td class="table-phonenumber">{{x.phonenumber}}</td>
<td class="table-note">{{x.note}}</td>
<td class="table-status">{{x.status}}</td>
<td class="table-callname">{{x.callname}}</td>
<td class="table-dataname">{{x.dataname}}</td>
<td>
<ul class="list-inline hstack gap-2 mb-0">
<li class="list-inline-item" data-bs-toggle="tooltip" data-bs-trigger="hover" data-bs-placement="top" title="Edit">
<a class="edit-item-btn" id="call-button" href="#showModal" data-bs-toggle="modal" data-id="{{x.id}}"><i class="ri-phone-line fs-16"></i></a> <!-- Here is the edit button -->
</li>
</ul>
</td>
</tr>
{% endfor %}
</tbody>
</table>
my modal here
<div class="modal fade" id="showModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header bg-light p-3">
<h5 class="modal-title" id="exampleModalLabel"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close-modal"></button>
</div>
<form action="">
<div class="modal-body">
<input type="hidden" id="id-field" />
<div class="row g-3">
<div class="col-lg-12">
<div>
<label for="company_name-field" class="form-label">Name Surname</label>
<input type="text" id="call-name-surname" class="form-control" placeholder="Enter company name" value="" required />
</div>
</div>
<div class="col-lg-12">
<div>
<label for="company_name-field" class="form-label">Phone Number</label>
<input type="email" id="call-phone-number" class="form-control" placeholder="Enter company name" value="" required />
</div>
</div>
<!--end col-->
<div class="col-lg-12">
<div>
<label for="leads_score-field" class="form-label">Note</label>
<input type="text" id="call-note-field" class="form-control" placeholder="Enter lead score" value="" required />
</div>
</div>
<!--end col-->
<div class="col-lg-12">
<div>
<label for="phone-field" class="form-label">Status</label>
<input type="text" id="call-status-field" class="form-control" placeholder="Enter phone no" value="" required />
</div>
</div>
<div class="col-lg-12">
<div>
<label for="phone-field" class="form-label">Personal Name</label>
<input type="text" id="call-persnoel-name" class="form-control" placeholder="Enter phone no" value="" required />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="hstack gap-2 justify-content-end">
<button type="button" class="btn btn-light" data-bs-dismiss="modal">Kapat</button>
<button type="submit" class="btn btn-success" id="add-btn">Kaydet</button>
</div>
</div>
</form>
</div>
</div>
</div>
and the my script codes
<script type="text/javascript">
$(document).ready(function () {
$("#call-button").click(function() {
var nameSurname = $(this).closest('tr').find('.table-namesurname').text();
var phoneNumber = $(this).closest('tr').find('.table-phonenumber').text();
var note = $(this).closest('tr').find('.table-note').text();
var status = $(this).closest('tr').find('.table-status').text();
var callName = $(this).closest('tr').find('.table-callname').text();
var dataName = $(this).closest('tr').find('.table-dataname').text();
$("#call-name-surname").val(nameSurname)
$("#call-phone-number").val(phoneNumber)
$("#call-note-field").val(note)
$("#call-status-field").val(status)
$("call-persnoel-name").val(callName)
});
});
</script>
console output
Gökan 905387532589 <empty string> Aranmadı ece datatest
The problem here is that the values of the clicked element in the table are not coming. Whichever I click, the values of the element at the top of the table are displayed. How can I solve this problem?

HTML id attribute should be unique, adding multiple elements with the same id, when you select, you will only get the first element that has this id, you need to select the rows by class, you have edit-item-btn class for the button.
<script type="text/javascript">
$(document).ready(function () {
$(".edit-item-btn").click(function() {
var nameSurname = $(this).closest('tr').find('.table-namesurname').text();
var phoneNumber = $(this).closest('tr').find('.table-phonenumber').text();
var note = $(this).closest('tr').find('.table-note').text();
var status = $(this).closest('tr').find('.table-status').text();
var callName = $(this).closest('tr').find('.table-callname').text();
var dataName = $(this).closest('tr').find('.table-dataname').text();
$("#call-name-surname").val(nameSurname)
$("#call-phone-number").val(phoneNumber)
$("#call-note-field").val(note)
$("#call-status-field").val(status)
$("call-persnoel-name").val(callName)
});
});

How to fetch and edit/update all the data comes from Database in Bootstrap Modal Popup, even my Fetch Data Table is CONCATENATED?

I have a problem in Fetching all the Data by its ID coming from Database in Bootstrap Modal Popup.
I have a Fetch Table in my Program. This is my code:
<div class="table-responsive">
<?php
require_once("include/connect.php"); //To connect Database
try{
$sql="SELECT patient_id, CONCAT(patient_lname, ', ', patient_fname, ' ', patient_mi) AS Fullname, age, gender, status, address FROM tbl_patientinfo ORDER BY patient_lname"; //Patient Name is CONCATENATED (Fullname)
$result=$con->prepare($sql);
$result->execute();
?>
<table class="table table-hover" id="table-1">
<thead>
<tr>
<th class="text-center">
#
</th>
<th>Patient Name</th>
<th>Age</th>
<th>Gender</th>
<th>Status</th>
<th>Address</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php while($row=$result->fetch()){ ?>
<tr>
<td><?php echo $row['patient_id']; ?></td>
<td><?php echo $row['Fullname']; ?></td> //Concatenated Last Name, First Name, and MI
<td><?php echo $row['age']; ?></td>
<td><?php echo $row['gender']; ?></td>
<td><?php echo $row['status']; ?></td>
<td><?php echo $row['address']; ?></td>
<td>
<button type="button" class="btn btn-icon btn-primary" data-toggle="modal" data-target="#editpatient"><i class="far fa-edit"></i></button> //Modal Button
</td>
</tr>
<?php } ?>
</tbody>
</table>
<?php
} catch (PDOException $th){
echo "Error: ".$th->getMessage();
}
$con=null;
?>
</div>
I want to fetch all the data from the Database (written in my $sql on the codes above) in Bootstrap Modal Popup using Javascript or JQuery code. This is my code in Javascript or JQuery:
<!-- SCRIPT FOR FETCH RECORD IN MODAL -->
<script>
$(document).ready(function () {
$('.edit-btn').on('click', function () {
$('#editpatient').modal('show');
$tr = $(this).closest('tr');
var data = $tr.children("td").map(function () {
return $(this).text();
}).get();
console.log(data);
$('#patient_id').val(data[0]);
$('#patient_lname').val(data[1]);
$('#patient_fname').val(data[2]);
$('#patient_mi').val(data[3]);
$('#dob').val(data[4]);
$('#age').val(data[5]);
$('#gender').val(data[6]);
$('#status').val(data[7]);
$('#address').val(data[8]);
$('#cnum').val(data[9]);
$('#company').val(data[10]);
}); });
</script>
<!-- END OF SCRIPT FOR FETCH RECORD IN MODAL -->
And this is my Codes in Modal:
<!-- EDIT MODAL PATIENT -->
<div class="modal fade" id="editpatient" tabindex="-1" role="dialog" aria-labelledby="formModal"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="formModal">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form class="">
<div class="form-group">
<form method="POST" action="save-patient.php">
<input type="text" class="form-control" name="txt-patient_id" id="patient_id" placeholder="ID">
<div class="form-group">
<label>Last Name</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-user"></i>
</div>
</div>
<input type="text" class="form-control" name="txt-patient_lname" id="patient_lname" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label>First Name</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-user"></i>
</div>
</div>
<input type="text" class="form-control" name="txt-patient_fname" id="patient_fname" placeholder="First Name" required="true">
</div>
</div>
<div class="form-group">
<label>Middle Name</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-user"></i>
</div>
</div>
<input type="text" class="form-control" name="txt-patient_mi" id="patient_mi" placeholder="Middle Name">
</div>
</div>
<div class="form-group">
<label>Date Picker</label>
<input type="text" class="form-control datepicker" name="txt-dob" id="dob" placeholder="Date of Birth" required="true">
</div>
<div class="form-group">
<label>Age</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-plus"></i>
</div>
</div>
<input type="text" class="form-control" name="txt-age" id="age" placeholder="Age" required="true">
</div>
</div>
<div class="form-group">
<label>Gender</label>
<select class="form-control" name="txt-gender" id="gender" required="true">
<option value="" readonly>--- Please Select ---</option>
<option value="Male">MALE</option>
<option value="Female">FEMALE</option>
</select>
</div>
<div class="form-group">
<label>Civil Status</label>
<select class="form-control" name="txt-status" id="status" required="true">
<option value="" readonly>--- Please Select ---</option>
<option>Single</option>
<option>Married</option>
<option>Widowed</option>
<option>Separated</option>
<option>Divorced</option>
</select>
</div>
<div class="form-group">
<label>Address</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-home"></i>
</div>
</div>
<input type="text" class="form-control" name="txt-address" id="address" required="true">
</div>
</div>
<div class="form-group">
<label>Contact Number</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-phone"></i>
</div>
</div>
<input type="text" class="form-control" name="txt-cnum" id="cnum" required="true">
</div>
</div>
<div class="form-group">
<label>Company(Optional)</label>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">
<i class="fas fa-building"></i>
</div>
</div>
<input type="text" class="form-control" name="txt-company" id="company">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- End of EDIT MODAL PATIENT -->
My Problem is I want to fetch all data coming from database (means, not concatenated) by its ID but when the Modal shows, the data shows a concatenated data coming from the FETCH DATA TABLE.
This is my sample FETCH DATA TABLE
And this is my Problem
Please help me to fix my problem. I already do this a month ago and until now, I can't solve this problem. I'm still new in this Programming Languages. I need help from others like you Guys. I hope you everybody can help me to fix this. Thank you so much <3

How to update values for each columns of row from modal?

I have an HTML code like this:
<body>
<div class="container">
<div style="margin-top: 50px;">
<table class="table table-hover" style="width: 100%;">
<tbody>
<tr>
<th>0</th>
<td class="cTenSanPham">Samsung Galaxy Note 8</td>
<td class="cGiaSanPham">23.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal" onclick="editProductModal()">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
In modal code
<div class="modal-body">
<form>
<div class="form-group">
<label>
<h5 class="">Mã sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly>
</div>
<div class="form-group">
<label>
<h5 class="">Tên sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham">
</div>
<div class="form-group">
<label>
<h5 class="">Giá sản phẩm</h5>
</label>
<input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham"
name="nGiaSanPham">
</div>
</form>
</div>
And an Javascript code like this:
function editProductModal() {
$(document).on("click", ".edit", function () {
$(this).parents("tr").find("th").each(function () {
document.getElementById("iMaSanPham").value = $(this).text();
});
$(this).parents("tr").find(".cTenSanPham").each(function () {
document.getElementById("iTenSanPham").value = $(this).text();
});
$(this).parents("tr").find(".cGiaSanPham").each(function () {
document.getElementById("iGiaSanPham").value = parseInt($(this).text().replace(/\D/g, ''));
});
});
}
I want when I click the button 'Chỉnh sửa' on any row, a modal will open and fill data from this row into this modal (the modal of bootstrap 4). I can edit on this modal, then I press a button to pass updated data to table. How to do it in function editProductModal() in file JS. Thank you so much

var $currentEditRow;
$(document).on("click", ".edit", function() {
$currentEditRow = $(this).parents("tr");
editProductModal($(this).parents("tr"));
});
function editProductModal(row) {
document.getElementById("iMaSanPham").value = $(row).find("th").text();
document.getElementById("iTenSanPham").value = $(row).find(".cTenSanPham").text();
document.getElementById("iGiaSanPham").value = parseInt($(row).find(".cGiaSanPham").text().replace(/\D/g, ''));
}
function update() {
$currentEditRow.find("th").text(document.getElementById("iMaSanPham").value);
$currentEditRow.find(".cTenSanPham").text(document.getElementById("iTenSanPham").value);
$currentEditRow.find(".cGiaSanPham").text(document.getElementById("iGiaSanPham").value);
$('#exampleModal').modal('hide');
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="container">
<div style="margin-top: 50px;">
<table class="table table-hover" style="width: 100%;">
<tbody>
<tr>
<th>0</th>
<td class="cTenSanPham">Samsung Galaxy Note 8</td>
<td class="cGiaSanPham">23.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal" onclick="editProductModal()">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>
<h5 class="">Mã sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly>
</div>
<div class="form-group">
<label>
<h5 class="">Tên sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham">
</div>
<div class="form-group">
<label>
<h5 class="">Giá sản phẩm</h5>
</label>
<input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham" name="nGiaSanPham">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="update()">Save</button>
</div>
</div>
</div>
</div>
When editing the current tr row, store the dom of the current row, so you can determine which line to update to in the modal.
You can try to update the row data in my code snippet.

You are improperly mixing inline onclick and jQuery click event listeners together.
Remove the function and the onclick and just use the jQuery code inside the function by itself to manage the event
You also don't need an each loop to access the elements within the row.
Simplified version:
$(document).on("click", ".edit", function() {
var $row = $(this).closest('tr'),
thText = $row.find('th').text(),
cTenSanPham = $row.find('.cTenSanPham').text(),
cGiaSanPham = $('.cGiaSanPham').text().replace(/\D/g, '');
$('#iMaSanPham').val(thText);
$('#iTenSanPham').val(cTenSanPham);
$('#iGiaSanPham').val(cGiaSanPham);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div style="margin-top: 50px;">
<table class="table table-hover" style="width: 100%;">
<tbody>
<tr>
<th>0</th>
<td class="cTenSanPham">Samsung Galaxy Note 8</td>
<td class="cGiaSanPham">23.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
<tr>
<th>66</th>
<td class="cTenSanPham">Another Item</td>
<td class="cGiaSanPham">99.000.000 VND</td>
<td>
<button type="button" class="btn btn-primary edit" data-toggle="modal" data-target="#exampleModal">Chỉnh sửa</button>
<button type="button" class="btn btn-danger delete-row-tb">Xóa</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<h3>Modal</h3>
<div class="modal-body">
<form>
<div class="form-group">
<label>
<h5 class="">Mã sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iMaSanPham" name="nMaSanPham" readonly>
</div>
<div class="form-group">
<label>
<h5 class="">Tên sản phẩm</h5>
</label>
<input type="text" class="form-control" id="iTenSanPham" name="nTenSanPham">
</div>
<div class="form-group">
<label>
<h5 class="">Giá sản phẩm</h5>
</label>
<input type="number" min="500" max="999999999" class="form-control" id="iGiaSanPham" name="nGiaSanPham">
</div>
</form>
</div>

I cannot figure out how to make the edit button work

This is something I've been working on for a while now, and it's about to be released I just cannot figure out for the life of me on how to make the edit button work. If you can find a way for it to work just leave the java down below and the changes that you've done it would be greatly appreciated.
<div class="container-fluid text-center">
<div class="panel panel-default">
<div class="panel-heading">Vehicle Management</div>
<h2>List of your characters' vehicles</h2>
<table class="table table-responsive table-striped">
<thead>
<th>Vehicle Make</th>
<th>Vehicle Model</th>
<th>Vehicle Color</th>
<th>Vehicle Owner</th>
<th>License Plate</th>
<th>Details</th>
<th>Actions</th>
</thead>
<tr ng-show="vehList.length > 0" class="text-left" ng-repeat="veh in vehList">
<td>{{veh.vehmake}}</td>
<td>{{veh.vehmodel}}</td>
<td>{{veh.vehcolor}}</td>
<td>{{veh.vehowner}}</td>
<td>{{veh.vehplate}}</td>
<td>
<span ng-show="veh.details.stolen" class="text-danger"><i class="glyphicon glyphicon-warning-sign"></i> Stolen<br /></span>
<span ng-show="veh.details.registrationExpired" class="text-warning">Expired Registration<br /></span>
<span ng-show="veh.details.noRegistration" class="text-warning">No Registration<br /></span>
<span ng-show="veh.details.insuranceExpired" class="text-warning">Expired Insurance<br /></span>
<span ng-show="veh.details.noInsurance" class="text-warning">No Insurance<br /></span>
</td>
<td>
<span ng-show="veh.details.active" class="btn btn-primary glyphicon glyphicon-star"><br/></span>
<span ng-show="veh.details.nonactive" class="btn btn-default glyphicon glyphicon-star-empty"><br/></span>
<button ng-click="edit=true" class="btn btn-primary glyphicon glyphicon-edit"></button>
<button ng-click="deleteVehicle($index)" class="btn btn-danger glyphicon glyphicon-trash"></button>
</td>
</tr>
<!-- Only shown when there's no vehicule already created -->
<tr ng-show="vehList.length == 0">
<td colspan="7" class="text-center">
<h4>No Vehicle Found, Please Create One.</h4>
</td>
<tr>
<td colspan="7" class="text-center">
<button class="btn btn-success" data-toggle="modal" data-target="#modalAdNewVehicle"><i class="glyphicon glyphicon-plus"></i></button>
</td>
</tr>
</table>
<div class="panel-body">
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="modalAdNewVehicle" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4>Vehicle Information
</h4>
</div>
<div class="modal-body">
<div class="container-fluid text-center">
<div class="panel panel-default">
<div class="panel-body">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Make</span>
<input ng-model="newveh.vehmake" autofocus type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Model</span>
<input ng-model="newveh.vehmodel" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Color</span>
<input ng-model="newveh.vehcolor" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Owner</span>
<input ng-model="newveh.vehowner" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Vehicle Plate</span>
<input ng-model="newveh.vehplate" type="text" class="form-control" placeholder="" aria-describedby="basic-addon1">
</div>
<div class="container-fluid text-left">
<div class="checkbox">
<label><input ng-click-"!newveh.details.active" ng-model="newveh.details.active" type="checkbox" value"">Active</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.nonactive" ng-model="newveh.details.nonactive" type="checkbox" value="">Not Active</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.stolen" ng-model="newveh.details.stolen" type="checkbox" value="">Stolen</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.registrationExpired" ng-model="newveh.details.registrationExpired" type="checkbox" value="">Expired Registration</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.noRegistration" ng-model="newveh.details.noRegistration" type="checkbox" value="">No Registration</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.insuranceExpired" ng-model="newveh.details.insuranceExpired" type="checkbox" value="">Expired Insurance</label>
</div>
<div class="checkbox">
<label><input ng-click="!newveh.details.noInsurance" ng-model="newveh.details.noInsurance" type="checkbox" value="">No Insurance</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer text-center">
<button ng-click="addNewVehicle()" class="btn btn-primary" data-dismiss="modal">Submit</button>
</div>
</div>
</div>
</div>
<script>
$('.modal').on('shown.bs.modal', function() {
$(this).find('[autofocus]').focus();
});
</script>
There is java script for everything else to work, i just cannot figure out how to make the edit button work

Reset form and close in angularJS

I'm creating a simple form to add a new object to an array; however, when I hot submit I want my form to reset and close automatically. If I close the form and reopen it, the values are still there. Can someone please tell me what I'm doing wrong? Thanks.
HTML CODE
<body>
<div id="wrapper">
<!-- Navigation -->
<div id="page-wrapper">
<div class="row">
<div class="col-lg-8">
<h1 class="page-header">Inventario</h1>
</div>
</div>
<div class="row">
<div ng-controller="InventoryCtrl">
<div class="container">
<!-- Trigger the modal with a button -->
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#newItemModal">Add New Product</button>
</div>
</div>
<div class="row">
<div class="col-sm-1"></div>
<div class="col-sm-9"><br>
<div class="panel panel-default">
<div class="panel-heading"></div>
<!-- /.panel-heading -->
<div class="panel-body">
<div id="dataTables-example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div class="row">
<div class="col-sm-8">
<div class="dataTables_length" id="dataTables-example_length">
<label>Show
<select ng-model="rowLimit" name="dataTables-example_length" aria-controls="dataTables-example" class="form-control input-sm">
<option value="1">1</option>
<option value="3">3</option>
<option value="5">5</option>
<option value="10">10</option>
<option value="20">20</option>
</select> entries
</label>
</div>
</div>
<div class="col-sm-4">
<div id="dataTables-example_filter" class="dataTables_filter">
<label>Search:
<input ng-model="search" type="search" class="form-control input-sm" placeholder="" aria-controls="dataTables-example">
</label>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<table width="100%" class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline" id="dataTables-example" role="grid" aria-describedby="dataTables-example_info" style="width: 100%;">
<thead>
<tr role="row">
<th style="width: 50px;" ng-click="sortData('index')">Item Number</th>
<th style="width: 50px;" ng-click="sortData('code')">Code</th>
<th style="width: 250px;" ng-click="sortData('description')">Description</th>
<th style="width: 50px;" ng-click="sortData('in')">In</th>
<th style="width: 50px;" ng-click="sortData('out')">Out</th>
<th style="width: 50px;" ng-click="sortData('total')">Total</th>
</tr>
</thead>
<tbody>
<tr class="gradeA odd" role="row" ng-repeat="product in items | limitTo: rowLimit | filter: search">
<td class="text-center">
<i class="fa fa-pencil-square-o" aria-hidden="true" ng-click="edit(product)"
data-toggle="modal" data-target="#editItemModal"></i>
<i class="fa fa-trash-o" aria-hidden="true" ng-click="delete(product)"></i>{{1+$index}}</td>
<td class="text-center">{{product.code}}</td>
<td class="text-left">{{product.description}}</td>
<td class="text-center">{{product.in}}</td>
<td class="text-center">{{product.out}}</td>
<td class="text-center">{{product.total}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- /.table-responsive -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="editItemModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">{{1+$index}}</h4>
</div>
<div class="modal-body">
<form name="myForm" novalidate>
<div class="form-group">
<label for="code">Code:</label>
<input type="text" size="5" maxlength="5" class="form-control" name="code" id="code"
ng-model="inventoryCtrl.item.code" required>
<span ng-show="myForm.code.$touched && myForm.code.$invalid">The code is required.</span>
</div>
<div class="form-group">
<label for="description">Description:</label>
<input type="text" class="form-control" id="description" ng-model="inventoryCtrl.item.description" required>
<span ng-show="myForm.description.$touched && myForm.description.$invalid">The description is required.</span>
</div>
<div class="form-group">
<label for="amount">Amount:</label>
<input type="text" size="5" maxlength="5" class="form-control" name="amount" id="amount"
ng-model="inventoryCtrl.item.amount" required>
<span ng-show="myForm.amount.$touched && myForm.amount.$invalid">The amount is required.</span>
</div>
<div class="form-group">
<label for="date">Date:</label>
<input type="date" class="form-control" name="date" id="date" required>
<span ng-show="myForm.date.$touched && myForm.date.$invalid">The date is required.</span>
</div>
<div class="form-group">
<label for="radio">Type:</label>
<div class="radio">
<label><input type="radio" name="optradio" ng-model="type" value="in">In</label>
<label><input type="radio" name="optradio" ng-model="type" value="out">Out</label>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="newItemModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add New Product</h4>
</div>
<div class="modal-body">
<form name="myForm" ng-submit="addProduct(item)">
<div class="form-group">
<label for="code">Code:</label>
<input type="text" size="5" maxlength="5" class="form-control" name="code" id="code"
ng-model="item.code" required>
<span ng-show="myForm.code.$touched && myForm.code.$invalid">The code is required.</span>
</div>
<div class="form-group">
<label for="description">Description:</label>
<input type="text" class="form-control" id="description" ng-model="item.description" required>
<span ng-show="myForm.description.$touched && myForm.description.$invalid">The description is required.</span>
</div>
<div class="form-group">
<label for="amount">Amount:</label>
<input type="text" size="5" maxlength="5" class="form-control" name="amount" id="amount"
ng-model="item.amount" required>
<span ng-show="myForm.amount.$touched && myForm.amount.$invalid">The amount is required.</span>
</div>
<!-- <div class="form-group">
<label for="date">Date:</label>
<input type="date" class="form-control" name="date" id="date" required>
<span ng-show="myForm.date.$touched && myForm.date.$invalid">The date is required.</span>
</div>-->
<div class="modal-footer">
<input type="button" class="btn btn-default" data-dismiss="modal" value="Close" />
<input type="submit" class="btn btn-primary pull-right" value="Submit" />
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /#page-wrapper -->
</div>
<!-- /#wrapper -->
<!-- jQuery -->
<script src="../vendor/jquery/jquery.min.js"></script>
<!-- jQuery -->
<script src="../vendor/angular/angular.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="../vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="../vendor/metisMenu/metisMenu.min.js"></script>
<!-- Morris Charts JavaScript -->
<script src="../vendor/raphael/raphael.min.js"></script>
<script src="../vendor/morrisjs/morris.min.js"></script>
<script src="../data/morris-data.js"></script>
<!-- Custom Theme JavaScript -->
<script src="../dist/js/sb-admin-2.js"></script>
<!-- My AngularJS App -->
<script src="../js/app.js"></script>
</body>
</html>
ANGULAR CODE
(function(){
var app = angular.module("inventory", []);
app.controller("InventoryCtrl", function($scope){
$scope.product = {};
$scope.addProduct = function(product){
$scope.product.createdOn = Date.now();
$scope.product.code = product.code;
$scope.product.description = product.description;
$scope.product.total = product.amount;
$scope.items.push($scope.product);
$scope.product = {};
};
$scope.items = [
{
code:"FD1",
description: "Happy valentines",
in: 50,
out: 20,
total: 30,
createdOn: 1397490980837
},
{
code:"FD2",
description: "Happy Mothers Day",
in: 70,
out: 20,
total: 50,
createdOn: 1397490980837
},
{
code:"FD3",
description: "I Love You",
in: 100,
out: 30,
total: 70,
createdOn: 1397490980837
},
{
code:"FD4",
description: "Get Well",
in: 20,
out: 5,
total: 15,
createdOn: 1397490980837
},
{
code:"FD5",
description: "Happy Birthday",
in: 200,
out: 35,
total: 165,
createdOn: 1397490980837
},
{
code:"FD6",
description: "It's a Boy",
in: 50,
out: 10,
total: 40,
createdOn: 1397490980837
},
{
code:"FD7",
description: "It's a Girl",
in: 50,
out: 20,
total: 30,
createdOn: 1397490980837
}
];
});
})();

You are basically just clearing your $scope.product not the item model which is in your form
$scope.addProduct = function(product){
$scope.product.createdOn = Date.now();
$scope.product.code = product.code;
$scope.product.description = product.description;
$scope.product.total = product.amount;
$scope.items.push($scope.product);
$scope.product = {};
$scope.item = {
code: '',
description: '',
amount:''
};
};
Or you can assign an id to your form like (e.g addFormId) then add it at the bottom of your addProduct function
document.getElementById("addFormId").reset();

this is because you are binding the data to a variable ,you can explicitly clear form element when the page is reloaded like this
document.getElementById('elementid').value = "";