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.
Related
I want to when I click the button it will add what I wrote in the field with the prefix say and send it through POST, the POST is working fine because if I don't use the script it will send it but without the "prefix"
<script>
function say() {
document.actionsv.command.value = ("say " + "\"" + document.COMMOM.SAY.value + "\"");
document.actionsv.submit();
}
</script>
<form action='' method='post' name="actionsv">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-content">
<div class="">
<form name='COMMOM'>
<table class="table table-hover-animation mb-0 table-striped">
<thead>
<tr>
<th></th>
<th class="o"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="SAY" autocomplete="off" value="" class="form-control">
</td>
<td align="center"><button type="submit" value="Say" onclick="say()" class="btn btn-success waves-effect waves-light">MSAY</button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</form>
I've tried everything but can't get it to work..
This is the error in console: http://prntscr.com/oq4084
There more than one error with your code. I've made a fiddle for you.
<script>
function say()
{
console.log("say " + "\"" + document.actionsv.elements['SAY'].value + "\"");
document.actionsv.submit();
}
</script>
<form action='' method='post' name="actionsv">
<div class="row">
<div class="col-8">
<div class="card">
<div class="card-content">
<div class="">
<form name='COMMOM'>
<table class="table table-hover-animation mb-0 table-striped">
<thead>
<tr>
<th></th>
<th class="o"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" name="SAY" autocomplete="off" value="" class="form-control">
</td>
<td align="center"><button type="submit" value="Say" onclick="say()" class="btn btn-success waves-effect waves-light">MSAY</button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</div>
</div>
</div>
</form>
You are poiting the result ta element that doesn't exist (document.actionsv.command) and you were using the forms array wrong. I don't know what you were trying to do with document.actionsv.command so i made e console.log with the result.
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>
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>
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
Can you please take a look at this example and let me know how I can use jquery to enable all inputs existing in the same row as Clicked "Edit" button .btn-edit class?
js:
$(".btn-edit").on("click", function(){
$(this).attr("disabled", true);
});
and HTML
<div class="container">
<div class="row">
<table class="table table-striped">
<thead>
<tr>
<th>
Col 1
</th>
<th>
Col 2
</th>
<th>
Col 4
</th>
<th>
Col 4
</th>
<th>
Col 5
</th>
<th>
Col 3
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<button type="button" class="btn btn-success" disabled="disabled">
<span class="glyphicon glyphicon-refresh"></span> Update
</button>
</td>
<td>
<button type="button" class="btn btn-danger" disabled="disabled">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
<td>
<button type="button" class="btn btn-warning btn-edit">
<span class="glyphicon glyphicon-edit"></span> Edit
</button>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<button type="button" class="btn btn-success" disabled="disabled">
<span class="glyphicon glyphicon-refresh"></span> Update
</button>
</td>
<td>
<button type="button" class="btn btn-danger" disabled="disabled">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
<td>
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-edit"></span> Edit
</button>
</td>
</tr>
<tr>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<input type="text" class="form-control" id="" disabled="disabled">
</td>
<td>
<button type="button" class="btn btn-success" disabled="disabled">
<span class="glyphicon glyphicon-refresh"></span> Update
</button>
</td>
<td>
<button type="button" class="btn btn-danger" disabled="disabled">
<span class="glyphicon glyphicon-trash"></span> Remove
</button>
</td>
<td>
<button type="button" class="btn btn-warning">
<span class="glyphicon glyphicon-edit"></span> Edit
</button>
</td>
</tr>
</tbody>
</table>
You need to traverse to closest tr element, find inputs and buttons in it and set property disabled as false for them:
$(".btn-edit").on("click", function(){
$(this).closest('tr').find('input,button').prop('disabled', false);
});
Working Demo
you need this:
$(".btn-edit").on("click", function(){
$(this).closest('tr').find(':input').filter(':disabled').prop("disabled", false);
});
You can use .closest() to traverse up to the tr then find all the inputs with :input and filter them not to select the button elements which are enabled by default.
You can use .closest() to traverse upwards to tr then use .find() to find all inputs using :input.
Use
$(".btn-edit").on("click", function() {
$(this)
.closest('tr') //Travese to parent tr
.find(':input') //Find all input
.prop("disabled", false); //set diabled false
});
Try this
$(".btn-edit").on("click", function(){
$(this).closest('tr').find('input,button').prop('disabled', false);
});