How to display html required before calling Bootstrap Modal? - javascript

Demo is like this : http://jsfiddle.net/oscar11/u4ynjkwa/2/
My html code is like this :
<form action="#">
<table>
<tr>
<td>First Name </td>
<td>:</td>
<td><input type="text" id="first_name" required></td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" id="last_name" required></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><input type="text" id="age" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" value="Submit" id="submit" data-toggle="modal" data-target="#confirm-save"></td>
</tr>
</table>
</form>
<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
</div>
<div class="modal-body">
<table style="width:100%">
<tr>
<td style="width:30%">First Name</td>
<td height top="40" style="width:70%" id="first_name_modal"></td>
</tr>
<tr>
<td>Last Name</td>
<td height="40" id="last_name_modal"></td>
</tr>
<tr>
<td>Age</td>
<td height="40" id="age_modal"></td>
</tr>
</table>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
My javascript code is like this :
$(document).on("click", "#submit", function () {
var first_name_modal = document.getElementById("first_name").value;
var last_name_modal = document.getElementById("last_name").value;
var age_modal = document.getElementById("age").value;
$('#first_name_modal').text(first_name_modal);
$('#last_name_modal').text(last_name_modal);
$('#age_modal').text(age_modal);
});
How to display html required before calling Bootstrap Modal?
Html required is like this :
So, Before calling Bootstrap Modal, the system display html required first if the data is empty
Thank you very much

First of all, you have to remove modal data attributes data-toggle="modal" data-target="#confirm-save" from submit button, otherwise modal will instantly open when click on submit button,
You can validate the inputs and if all valid, trigger the modal with JavaScript
$("#confirm-save").modal("show");
Example Code
$(document).on("click", "#submit", function() {
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
var age_modal = $("#age").val();
if (first_name == "") {
alert("FirstName Required");
return false;
} else if(last_name=="") {
alert("LastName Required");
return false;
} else if(age_modal=="") {
alert("Age Required");
return false;
} else {
$("#confirm-save").modal("show");
$('#first_name_modal').text(first_name);
$('#last_name_modal').text(last_name);
$('#age_modal').text(age_modal);
}
});
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<div class="row">
<form action="#">
<table>
<tr>
<td>First Name </td>
<td>:</td>
<td>
<input type="text" id="first_name" required>
</td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td>
<input type="text" id="last_name" required>
</td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td>
<input type="text" id="age" required>
</td>
</tr>
<tr>
<td></td>
<td></td>
<!-- <td><input type="submit" value="Submit" id="submit"></td> -->
<td>
<input type="submit" value="Submit" id="submit" class="btn">
</td>
</tr>
</table>
</form>
</div>
<div class="modal fade hide" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
</div>
<div class="modal-body">
<table style="width:100%">
<tr>
<td style="width:30%">First Name</td>
<td height top="40" style="width:70%" id="first_name_modal"></td>
</tr>
<tr>
<td>Last Name</td>
<td height="40" id="last_name_modal"></td>
</tr>
<tr>
<td>Age</td>
<td height="40" id="age_modal"></td>
</tr>
</table>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
Fiddle

Related

How to delete or edit data from database using a bootstrap modal

So i basically want to be able to delete students from a database using bootstrap modals. the delete button should generate a delete confirmation modal.
So far i have been able to display the modal but i'm stuck in making it actually work.Like when i click on the "OK" button in the modal nothing happens.I know it's javascript related but i'm a total beginner in web development.Could you help me out?
(btw i tried almost every solution i found here but nothing worked.)
Here is the table in my jsp file that contains the "delete" button:
<table class="table table-striped table-hover" >
<thead>
<tr>
<th>
<span class="custom-checkbox">
<input type="checkbox" id="selectAll">
<label for="selectAll"></label>
</span>
</th>
<th>CNE</th>
<th>Nom</th>
<th>Prénom</th>
<th>Date de Naissance</th>
<th>Lieu de Naissance</th>
<th>Sexe</th>
<th>E-mail</th>
<th>N° Tel</th>
<th>Semestre</th>
</tr>
</thead>
<tbody>
<c:forEach items="${model.etudiants}" var="e">
<tr class="delete" data-id="${e.numEt }">
<td>
<span class="custom-checkbox">
<input type="checkbox" id="checkbox1" name="options[]" value="1">
<label for="checkbox1"></label>
</span>
</td>
<td><c:out value="${e.numEt}" /></td>
<td><c:out value="${e.nomEt}" /></td>
<td><c:out value="${e.prenomEt }" /></td>
<td><c:out value="${e.dateNaiss}" /></td>
<td><c:out value="${e.lieuNaiss}" /></td>
<td><c:out value="${e.sexe}" /></td>
<td><c:out value="${e.email}" /></td>
<td><c:out value="${e.numTel}" /></td>
<td><c:out value="${e.semestre}" /></td>
<td>
<i class="material-icons" data-toggle="tooltip" title="Edit"></i>
<i class="material-icons" data-toggle="tooltip" title="Delete"></i>
</td>
</tr>
</c:forEach>
</tbody>
</table>
Delete Confirmation Modal:
<div id="deleteEmployeeModal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Supprimer Etudiant</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<form method="post" action="delete.php">
<div class="modal-body">
<input type="hidden" name="cne" id="cne" value=""/>
<p>Êtes-vous sûrs de vouloir supprimer ces enregistrements?</p>
<p class="text-warning"><small>Cette action ne peut pas être annulée.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" >Cancel</button>
<!-- <button name="action" id="btnYes" class="btn btn-danger btn-ok" value="delete">Delete</button> -->
<a class="btn btn-danger btn-ok">Delete</a>
</div>
</form>
</div>
</div>
</div>
the js code i tried:
<script>
$('#deleteEmployeeModal').on('click', '.btn-ok', function(e) {
$(this).find('.btn-ok').attr.('href',$(e.relatedTarget).data('href'));
});
</script>

Cannot update or validate form data inside a bootstrap modal

$('.editimg').on('click',function(){
$("#myModel").modal("show");
var regionid = $(this).data('id');
$(".modal-body #id").val( regionid );
$("#region_id").val($(this).closest('tr').children()[1].textContent);
$("#region_name").val($(this).closest('tr').children()[2].textContent);
$("#description1").val($(this).closest('tr').children()[3].textContent);
$("#description2").val($(this).closest('tr').children()[4].textContent);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="editimg" href="#" id="<?php echo $reg_id;?>"><img src="../dmo_images/action_ico/sys_icon_edit.png" width="20" height="20" alt="Edit"></a>
<div class="modal-body" >
<form id="btnupdate" action="#" enctype="multipart/form-data" method="post" class="form-horizontal" role="form" >
<table class="table" width="200" border="0" cellpadding="0" cellspacing="0">
<tr class="FormData" rowpos="1">
<td class="CaptionTD">Name of Region</td>
<td><input type="text" id="region_name" class="FormElement ui-widget-content" role="textbox" name="region_name" required=""></input></td>
</tr>
<tr class="FormData" rowpos="2">
<td class="CaptionTD">Description 1</td>
<td><input type="text" id="description1" class="FormElement ui-widget-content" role="textbox" name="description1" required="" ></input></td>
</tr>
<tr class="FormData" rowpos="3">
<td class="CaptionTD">Description 2</td>
<td><input type="text" id="description2" class="FormElement ui-widget-content" role="textbox" name="description2" required="" ></input></td>
</tr>
<tr class="FormData" rowpos="4"></tr>
</table>
</form>
</div>
<div class="modal-footer">
<button type="submit" id="send" class="btn btn-danger" name="btnupdate" onClick="return validate_region()">Update</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
if(isset($_POST["btnupdate"]))
{
$id=$_REQUEST["region_id"];
$name=$_REQUEST["region_name"];
$desc1=$_REQUEST["description1"];
$desc2=$_REQUEST["description2"];
$query1="Update tbl_region set region_name='$name', description1='$desc1', description2= '$desc2', created_date='$date' where region_id=$id";
}
//validation.js
function validate_region()
{ if(get("region_name").value=="") {
return false; }
else if(get("description1").value== "") {
return false; }
else if(get("description2").value== "") {
return false; }
else {
return true; }
}
I have a table with two image buttons at each row as below.
When these icons are clicked, I show a bootstrap modal with data in the row.
I've done the validation, but when I clicked on the "update" button, no validation is shown and the button doesn't work at all.
I am the very beginner level one so I don't know where do I wrong or left to code. I've been browsing online for solutions but I still can't get it.
The updated value is needed to store in the database.
P.S when click on delete button at Delete Modal, it also needs to delete from the database, which is not working too.
Your help is much appreciated. Thank you!
Try the following working code
$('.editimg').on('click',function(){
$("#myModel").modal("show");
var regionid = $(this).data('id');
$(".modal-body #id").val( regionid );
$("#region_id").val($(this).closest('tr').children()[1].textContent);
$("#region_name").val($(this).closest('tr').children()[2].textContent);
$("#description1").val($(this).closest('tr').children()[3].textContent);
$("#description2").val($(this).closest('tr').children()[4].textContent);
});
function validate_region()
{
if($("#region_name").val() == ""){
return false; }
else if($("#description1").val() == "") {
return false; }
else if($("#description2").val() == "") {
return false; }
else
{
// HERE U SHOULD WRITE CODE TO WRITE IT TO DATABASE
$("#myModel").modal("hide");
return true;
}
}
<!DOCTYPE html>
<html>
<head>
<title>sas</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class='modal fade bs-example-modal-sm' id='myModel' tabindex='-1' role='dialog' aria-labelledby='gridSystemModalLabel'>
<div class='modal-dialog modal-sm' style='transform: translate(0px, 50%);' role='document'>
<div class='modal-content'>
<form id="btnupdate" action="#" enctype="multipart/form-data" method="post" class="form-horizontal" role="form" >
<div class="modal-body" >
<table class="table" width="200" border="0" cellpadding="0" cellspacing="0">
<tr class="FormData" rowpos="1">
<td class="CaptionTD">Name of Region</td>
<td>
<input type="hidden" id="region_id" class="FormElement ui-widget-content" role="textbox" name="region_id">
<input type="text" id="region_name" class="FormElement ui-widget-content" role="textbox" name="region_name" required=""></td>
</tr>
<tr class="FormData" rowpos="2">
<td class="CaptionTD">Description 1</td>
<td><input type="text" id="description1" class="FormElement ui-widget-content" role="textbox" name="description1" required="" ></td>
</tr>
<tr class="FormData" rowpos="3">
<td class="CaptionTD">Description 2</td>
<td><input type="text" id="description2" class="FormElement ui-widget-content" role="textbox" name="description2" required="" ></td>
</tr>
<tr class="FormData" rowpos="4"></tr>
</table>
</div>
<div class="modal-footer">
<button type="reset" id="send" class="btn btn-danger" name="btnupdate" onClick="return validate_region()">Update</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<table class="table">
<tr>
<th></th><th>Id</th><th>Name of Region</th><th>Description 1</th><th>Description 2</th>
</tr>
<tr>
<td><a class="editimg" href="#" id="1"><i class="glyphicon glyphicon-edit" style="font-size:20px"></i></a></td><td>1</td><td>val1</td><td>val2</td><td>val3</td>
</tr>
<tr>
<td><a class="editimg" href="#" id="2"><i class="glyphicon glyphicon-edit" style="font-size:20px"></a></td><td>11</td><td>val11</td><td>val21</td><td>val31</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Call action from modal bootstrap

My HTML code is like this :
<form action="form2_action.php" method="post">
<table>
<tr>
<td>First Name </td>
<td>:</td>
<td><input type="text" id="first_name" name="first_name" required></td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" id="last_name" name="last_name" required></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><input type="text" id="age" name="age" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="submit" value="Submit" id="submit"></td>
</tr>
</table>
</form>
<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
</div>
<div class="modal-body">
<table style="width:100%">
<tr>
<td style="width:30%">First Name</td>
<td height top="40" style="width:70%" id="first_name_modal"></td>
</tr>
<tr>
<td>Last Name</td>
<td height="40" id="last_name_modal"></td>
</tr>
<tr>
<td>Age</td>
<td height="40" id="age_modal"></td>
</tr>
</table>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Save changes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
My Javascript code is like this :
$('#submit').on('click',function(e){
var first_name_modal = document.getElementById("first_name").value;
var last_name_modal = document.getElementById("last_name").value;
var age_modal = document.getElementById("age").value;
if(first_name_modal!="" && last_name_modal!="" && age_modal!=""){
$("#confirm-save").modal("show");
$('#first_name_modal').text(first_name_modal);
$('#last_name_modal').text(last_name_modal);
$('#age_modal').text(age_modal);
return false;
}
});
Demo is like this : http://jsfiddle.net/oscar11/xxx03c6z/
How to call action from modal bootstrap?
So, when clicking on the button "save changes" in the modal bootstrap, How to keep the system to call the action form2_action.php ?
Thank you very much
Give your form an id for referencing in the javaScript code.
<form id="form1">
Then define a function as below:
function formSubmit(){
$('#form1').submit();
}
Call formSubmit on click of Save button.
<button type="button" onClick="formSubmit();" class="btn btn-primary">
Form Submit
$("#modal-submit-btn").click(function(){
$('modal-dialog-id').modal('hide');
$('#form-id').submit();
});
check my script it is working fine.. just put the form tag in bootstrap mode and take values from input to bootstap model. here is the fiddle, you can check: https://jsfiddle.net/kriz1439/v5wpwcv9/
<table>
<tr>
<td>First Name </td>
<td>:</td>
<td><input type="text" id="first_name" name="first_name" required> </td>
</tr>
<tr>
<td>Last Name</td>
<td>:</td>
<td><input type="text" id="last_name" name="last_name" required></td>
</tr>
<tr>
<td>Age</td>
<td>:</td>
<td><input type="text" id="age" name="age" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td><button type="button" id="submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#confirm-save">Submit</button></td>
</tr>
</table>
<div class="modal fade" id="confirm-save" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<form action ="action.php">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"><b>Are you sure to book this tour?</b></h4>
</div>
<div class="modal-body">
<table style="width:100%">
<tr>
<td style="width:30%">First Name</td>
<td height top="40" style="width:70%" > <input type="text" id ="first_name_modal"></td>
</tr>
<tr>
<td>Last Name</td>
<td height="40" > <input type="text" id ="last_name_modal"> </td>
</tr>
<tr>
<td>Age</td>
<td height="40"> <input type="text" id ="age_modal"> </td>
</tr>
</table>
<p class="debug-url"></p>
</div>
<div class="modal-footer">
<input type="submit" />
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</body>
<script>
$('#submit').on('click',function(e){
document.getElementById("first_name_modal").value = document.getElementById("first_name").value;
document.getElementById("last_name_modal").value= document.getElementById("last_name").value;
document.getElementById("age_modal").value = document.getElementById("age").value;
if(first_name_modal!="" && last_name_modal!="" && age_modal!=""){
$("#confirm-save").modal("show");
$('#first_name_modal').text(first_name_modal);
$('#last_name_modal').text(last_name_modal);
$('#age_modal').text(age_modal);
return false;
}
});
</script>

Javascript focus on previous row's first input

I have a form presented in a table and each row has two input fields and in the last row it has two buttons "add-more" and "submit"
<form>
<table>
<tbody>
<tr>
<td>
<table class="table no-border no-margin manage_admin_child_table">
<tbody>
<tr>
<td class="text-left" style="width:40%;">
<div data-role="input-control" class="input-control text">
<input type="text" name="operator[0][mcc]" id="operator_mcc_0" placeholder="MCC" tabindex="1">
<button tabindex="" class="btn-clear" type="button"></button>
</div>
</td>
<td class="text-left" style="width:40%;">
<div data-role="input-control" class="input-control text">
<input type="text" name="operator[0][mnc]" placeholder="MNC" tabindex="2">
<button tabindex="" class="btn-clear" type="button"></button>
</div>
</td>
<td style="width:2%;"> </td>
</tr>
</tbody>
</table>
<span class="wrapper"></span>
</td>
</tr>
<tr>
<td>
<table class="table no-border no-margin manage_admin_child_table">
<tbody>
<tr>
<td class="text-left" style="width:40%;">
<div data-role="input-control" class="input-control text">
<input type="text" name="operator[0][mcc]" id="operator_mcc_0" placeholder="MCC" tabindex="3">
<button tabindex="" class="btn-clear" type="button"></button>
</div>
</td>
<td class="text-left" style="width:40%;">
<div data-role="input-control" class="input-control text">
<input type="text" name="operator[0][mnc]" placeholder="MNC" tabindex="4">
<button tabindex="" class="btn-clear" type="button"></button>
</div>
</td>
<td style="width:2%;"> </td>
<td class="text-left" style="vertical-align: middle;">
<i class="fa fa-times"></i>
</td>
</tr>
</tbody>
</table>
<span class="wrapper"></span>
</td>
</tr>
<tr>
<td colspan="3">
<div class="widget_box_footer_section">
<i class="fa fa-plus"></i> Add More
<button type="submit" class="button meduim submit_button place-right" id="operator_submit" tabindex="7">
<i class="fa fa-paper-plane"></i> Submit
</button>
</div>
</td>
</tr>
</tbody>
</table>
</form>
when i click on add-more it adds the new row(there can be many rows, i have not included that javascript here i have hard-coded the form with two input rows) with two fields and a cross icon to remove that field.
and to remove that field i have a javascript function as
$(document).on('click','a.remove-operator-code',function() {
$(this).parents('tr').first().remove();
});
It is successfully removing that row, but i dont know where the focus is going , i want to fix this focus issue that when we remove the particular row, focus must go to the previous row's first input field
You need to use:
$(document).on('click','a.remove-operator-code',function() {
vat prevtr = $(this).closest('tr').prev();
if(prevtr.length)
prevtr.find('input:first').focus()
$(this).closest('tr').remove();
});
This will help you..
Demo:http://jsfiddle.net/ajnf988s/
$(document).on('click','a.remove-operator-code',function() {
$(this).parents('tr').prev('tr').find('input[type=text]:first').focus();
$(this).parents('tr').remove();
});

Extracting Data from Table Row to assign to inputs

I am currently working on a site and i want to be able to edit individual rows of data that are populated withing a HTML table from a mysql database. Now i know how to do the PHP to make the updates to the database, but what i am having trouble with is populating my modal fields with the selected rows data.
My HTML
<div class="table-responsive">
<table class="table table-bordered table-striped table-condensed table-custom">
<thead>
<tr>
<th>Field1</th>
<th>Field2</th>
<th>Field3</th>
<th>Field4</th>
<th>Field5</th>
<th>Field6</th>
<th>Field7</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>
<div class="btn-group">
<button class="btn btn-default" data-toggle="modal" href="#editRecord" id="edit"><span class="glyphicon glyphicon-pencil"></span></button>
<button class="btn btn-default" data-toggle="modal" href="#deleteRecord" id="delete"><span class="glyphicon glyphicon-trash"></span></button>
</div>
</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>
<div class="btn-group">
<button class="btn btn-default" data-toggle="modal" href="#editRecord" id="edit"><span class="glyphicon glyphicon-pencil"></span></button>
<button class="btn btn-default" data-toggle="modal" href="#deleteRecord" id="delete"><span class="glyphicon glyphicon-trash"></span></button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
My Modal
<div class="modal fade" id="editRecord">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="custom-header modal-header ">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form role="form" action="" method="POST">
<div class="form-group">
<input type="hidden" id="editRecordId" name="editRecordId" value="">
</div>
<div class="form-group">
<label for="field2">field2</label>
<input type="text" class="form-control" id="field2" name="field2">
</div>
<div class="form-group">
<label for="field3">field3</label>
<input type="text" class="form-control" id="field3" name="field3">
</div>
<div class="form-group">
<label for="field5">Computer Name</label>
<input type="text" class="form-control" id="field5" name="field5">
</div>
<div class="form-group">
<select class="form-control" id="field7" name="field7">
<option value="1">Active</option>
<option value="0">Inactive</option>
</select>
</div>
<div class="modal-footer">
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success" id="btn-submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
My Javascript
$(document).ready(function(){
$('#edit').click(function() {
var parent = $(this).closest('tr');
var data1 = parent.find('td').eq(0).html();
var data2 = parent.find('td').eq(1).html();
var data3 = parent.find('td').eq(2).html();
var data5 = parent.find('td').eq(4).html();
var data7 = parent.find('td').eq(6).html();
$('#editRecordId').val(data1);
$('#field2').val(data2);
$('#field3').val(data3);
$('#field5').val(data5);
$('#field7').val(data7);
});
});
The problem that I am having is that when the Edit button is clicked for any row I am only getting the information from the first row populating. Its populating fine, but I don't get the data from the row i am in, only the first one. So for the purpose of editing each row this doesnt work, and i cant figure out why.
Also i am using bootstrap for the framework and everything else is OOP PHP with a table class generating the table for me.

Categories