in php project, bootstrap in ajax doesn't work - php

I am trying to show bootstrap modal message using ajax in php. I can get alert message under ajax but not modal. When I use ajax inside javascript. It worked but with same structure, it is not working now. I think it has to do with submit button. I set type for button tag to submit for html 5 validation. but it doesn't cooperate well with bootstrap modal. When I change type to button modal works but html5 does't work. Is there any way to resolve this issue? I have spent so many hours now but no luck. Any help would be appreciated. Thank you in adavanced.
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/shop-homepage.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/mystyle.css">
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$('#submit').click(function(){
if($("form")[0].checkValidity()) {
var params = jQuery("#frm").serialize();
jQuery.ajax({
url:'join_process.php',
type:'POST',
data:params,
dataType:"text",
error:function(){
alert('join fails!');
},
success:function(data){
if(data==true){
alert("test");
$('.modal-body').html("<center>member join success</center>");
// Display Modal
$('#empModal').modal('show');
// Add response in Modal body
}else{
$('.modal-body1').html(data);
// Display Modal
$('#empModal1').modal('show');
}
}
});
}else{ console.log("invalid form");}
});
});
</script>
</head>
<body>
<?php
headerNav();
?>
<!-- Page Content -->
<div class="container">
<div class="row">
<div class="col-lg-3">
<?php
sideMenu();
?>
</div>
<!-- /.col-lg-3 -->
<div class="col-lg-9 text-center mt-1">
<?php
// $bookinfo= get_book_info($new);
?>
<br/>
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<table class="table table-bordered text-center" id="test">
<form id="frm">
<tr>
<th colspan="2" bgcolor="#d2e6f7">Membership</th>
</tr>
<tr>
<td><label for="name">name:</label></td>
<td style="text-align:left;"><input type="text"
id="name" name="name" value="" maxlength="20" size="20" required/></tr>
<tr>
<td><label for="id">id:</label></td>
<td style="text-align:left;"><input type="text"
id="id" name="id" value="" maxlength="20" size="20" required/>
<div id="id_chk"></div>
</tr>
<tr>
<td><label for="pass">password:</label></td>
<td style="text-align:left;"><input type="password"
id="pass" name="pass" maxlength="20" size="20" required/></td>
</tr>
<td><label for="pass_confirm">password confirm:</label></td>
<td style="text-align:left;"><input type="password"
id="pass_confrm" name="pass_confrm" maxlength="20" size="20" required/></td>
</tr>
<tr>
<td><label for="email">email:</label></td>
<td style="text-align:left;"><input type="email"
id="email" name="email" value="" maxlength="20" size="20" required/></tr>
<tr>
<td><label for="addr">address:</label></td>
<td style="text-align:left;"><input type="text"
id="addr" name="addr" value="" maxlength="20" size="20" required/></tr>
<tr>
<td><label for="cellphone">cellphone:</label></td>
<td style="text-align:left;">
<input type="tel" id="cellphone" name="cellphone"
placeholder="01091112333" required>
</td>
</tr>
<tr>
<td>Want to be administrator:</td>
<td style="text-align:left;"><input type="radio"
name="isadmin" value="Y">
<label for="y">Yes</label>
<input type="radio" name="isadmin" value="N" checked>
<label for="n">No</label>
</tr>
<tr>
<td colspan='2'>
<button type="submit" id="submit" class="btn btn-
primary">가입</button>
</td>
</tr>
</form>
</table>
<!-- Modal -->
<div class="modal fade" id="empModal1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal"
id="close">×</button>
</div>
<div class="modal-body1">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="empModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
<button type="button" class="close" data-dismiss="modal" id="close"
onclick="location.href='index.php'">×</button>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal"
onclick="location.href='index.php'">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-3"></div>
</div>
</div>
</div>
</div>

Related

pass variable to php modal

I am having this trouble whereby I want to delete items based on their ids. However, in modal, it doesn't get the specific id for me to delete. Instead, it gets the the ids which are the lowest first. For example, if I delete a product with an id of 88, it will deletes the id before it first such as number before 88. How can I delete specifically items with the right id?
<?php
ob_flush();
session_start();
include('includes/header.php');
include('includes/navbar.php');
if($_SESSION['admin_name']){
//do nothing
}
else{
echo "<script type='text/javascript'>window.top.location='http://localhost/CarRentalv3/admin/adminlogin.php';</script>"; exit;
}
$admin_name = $_SESSION['admin_name'];
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href=" http://localhost/CarRentalv3/img/CarRent.ico">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
<title>Admin Panel | Admin List</title>
</head>
<body>
<div class="modal fade" id="addadminprofile" 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">Add Admin Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form action="process.php" method="POST">
<div class="modal-body">
<div class="form-group">
<label>Admin Name </label>
<input type="text" name="username" class="form-control" placeholder="Enter Username">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" placeholder="Enter Email">
</div>
<div class="form-group">
<label>Position</label>
<input type="text" name="position" class="form-control" placeholder="Enter Position">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" placeholder="Enter Password">
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirmpassword" class="form-control" placeholder="Confirm Password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" name="register_btn" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
<div class="container-fluid">
<!-- DataTales Example -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Admin Profile
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addadminprofile">
Add Admin Profile
</button>
</h6>
</div>
<div class="card-body">
<?php
if(isset($_SESSION['success'])&& $_SESSION['success']!=''){
echo '<h2 class="bg-primary text-white">'.$_SESSION['success'].'</h2>';
unset ($_SESSION['success']);
}
if(isset($_SESSION['status'])&& $_SESSION['status']!=''){
echo '<strong>'.'<h2 class="bg-danger text-white">'.$_SESSION['status'].'</strong>'.'</h2>';
unset ($_SESSION['status']);
}
?>
<div class="table-responsive">
<?php
$connection = mysqli_connect("localhost","root","","admindb");
$query = "select * from admin";
$query_run = mysqli_query($connection, $query);
?>
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th> ID </th>
<th> ADMIN NAME </th>
<th>EMAIL </th>
<th>POSITION</th>
<th>EDIT </th>
<th>DELETE </th>
</tr>
</thead>
<tbody>
<?php if (mysqli_num_rows($query_run)>0){
while($rows= mysqli_fetch_assoc($query_run)){
?>
<tr>
<td><?php echo $rows['id'];?> </td>
<td><?php echo $rows['admin_name'];?> </td>
<td><?php echo $rows['admin_email'];?></td>
<td><?php echo $rows['admin_position'];?></td>
<td>
<form action="register_edit.php" method="post">
<input type="hidden" name="edit_id" value="<?php echo $rows['id'];?>">
<button type="submit" name="edit_btn" class="btn btn-success"> EDIT</button>
</form>
</td>
<td>
<form action="process.php" method="POST">
<input type="text" id="id" readonly value="<?php echo $rows['id'];?> ">
<button type="button" name="delete" onclick="myFunction();"id="delete" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">Delete</button>
</td>
</tr>
<?php
}
}
else{
echo "no record found!";
}
?>
<div id="deleteModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<br>
<h5 class="modal-title">PIN Required</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<label>PIN</label>
<input type="text" id="print" readonly >
<input type="password" name="pin" id="password" class="form-control" />
<br />
<button type="submit" name="delete_btn" id="pin_button" class="btn btn-warning">Confirm</button>
<div>
</div>
</div>
</div>
</form>
</tbody>
</table>
</div>
</div>
</div>
<!-- /.container-fluid -->
<script>
function myFunction() {
document.getElementById("print").value = document.getElementById("id").value;
}
</script>
</body>
</html>
<?php
ob_end_flush();
include('includes/script.php');
include('includes/footer.php');
?>

You are creating buttons with id="delete" inside your while loop. So you end up with a lot of buttons with the same id which is both invalid html and creates your problem here.
You also open your tag inside your while loop and you close it in your modal. That will also create invalid html since you'll be opening a lot of form tags and only closing one of them.
Without having seen the code on your process.php file it is not 100% that the fixes here will solve your issue so bear that in mind.
First of all change
<td>
<form action="process.php" method="POST">
<input type="text" id="id" readonly value="<?php echo $rows['id'];?> ">
<button type="button" name="delete" onclick="myFunction();" id="delete" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">Delete</button>
</td>
to
<td>
<button type="button" name="delete" onclick="myFunction('<?php echo $rows['id'];?>');" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">Delete</button>
</td>
Then change your function
function myFunction(print_value) {
document.getElementById("print").value = print_value;
}
Lastly change your modal body
<form action="process.php" method="POST">
<label>PIN</label>
<input type="text" id="print" readonly >
<input type="password" name="pin" id="password" class="form-control" />
<br />
<button type="submit" name="delete_btn" id="pin_button" class="btn btn-warning">Confirm</button>
</form>
and remove the other closing form tag </form> you have before </tbody>

how to Update data in a table using jquery ajax php and mysql

I would appreciate your help!
The situation is as follows:
There are two tables with data from the database.
The number of tables actually depends on the user who will post them. I used "while cycle method" to post the table with data on the page.
So, now I want the data in each of these tables could be changed by clicking the Update button.
Each table has it's own ID.
I found many solutions on Youtube with the usage of jquery ajax php and mysql.
I have tried this code below so far:
<html>
<!-- My table structure which cannot be chanhed -->
<?php
while ($row = mysqli_fetch_array($result_set)):;
?>
<table class="myTable" cellspacing="5">
<tbody>
<tr id="<?php echo $row['id'];?>">
<th>Title</th>
<td data-target="title" class="title"><b><?php echo
$row['title'];?></b></td>
</tr>
<tr>
<th>Description</th>
<td data-target="description"><p class="description"
align="justify"><?php echo $row['description'];?></p></td>
</tr>
<tr>
<th>Phone number</th>
<td data-target="tel"><?php echo $row['tel'];?></td>
</tr>
<tr>
<th>---</th>
<td><a href="#" data-role="update" data-id="<?php echo
$row['id'];?>">Update</a></td>
</tr>
</tbody>
</table>
<?php endwhile;?>
<!-- Bootstrap Modal -->
<div id="myModal" class="modal fade" 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">Modal Header</h4>
</div>
<div class="modal-body" align="center">
<div class="form-group">
<label>Title</label>
<textarea id="title" name = "title" rows = "1" cols = "60"
required></textarea>
</div>
<div class="form-group">
<label>Description</label>
<textarea id="description" name = "description" rows = "20"
cols = "60" required></textarea>
</div>
<div class="form-group">
<label>Phone number (optional)</label>
<input type="text" id="tel" name="tel"/>
</div>
</div>
<div class="modal-footer">
<a href="#" id="save" class="btn btn-primary pull-
right">Update</a>
<button type="button" class="btn btn-default pull-left" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</html>
An here is I have a problem!!! Because the children method is not working for my TABLE structure! But I cannot find another solution.
<script>
$(document).ready(function(){
$(document).on('click','a[data-role=update]',function(){
var id = $(this).data('id');
var title = $('#'+id).children('td[data-target=title]').text();
var description = $('#'+id).children('td[data-
target=description]').text();
var tel = $('#'+id).children('td[data-target=tel]').text();
$('#title').val(title);
$('#description').val(description);
$('#tel').val(tel);
$('#myModal').modal('toggle');
})
});
</script>

Your problem is caused because the elements are not immediate children of #id. So you have to target a different element to start with. And then, since they are descendants (not children), use a different function that can find them.
$(document).ready(function() {
$(document).on('click', 'a[data-role=update]', function() {
var $body = $(this).closest('tbody');
var title = $body.find('td[data-target=title]').text().trim();
var description = $body.find('td[data-target=description]').text().trim();
var tel = $body.find('td[data-target=tel]').text().trim();
$('#title').val(title);
$('#description').val(description);
$('#tel').val(tel);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table class="myTable" cellspacing="5">
<tbody>
<tr id="1">
<th>Title</th>
<td data-target="title" class="title">
<b>Title</b></td>
</tr>
<tr>
<th>Description</th>
<td data-target="description">
<p class="description" align="justify">
Description
</p>
</td>
</tr>
<tr>
<th>Phone number</th>
<td data-target="tel">
Phone
</td>
</tr>
<tr>
<th>---</th>
<td>Update</td>
</tr>
</tbody>
</table>
<div class="form-group">
<label>Title</label>
<textarea id="title" name="title" rows="1" cols="60" required></textarea>
</div>
<div class="form-group">
<label>Description</label>
<textarea id="description" name="description" rows="20" cols="60" required></textarea>
</div>
<div class="form-group">
<label>Phone number (optional)</label>
<input type="text" id="tel" name="tel" />
</div>
</div>

Creating an edit modal in Laravel 5

I am trying to create an edit modal for each row in the database. My page looks like this.
When I click on the edit icon, I open a modal where a user's details can be edited. The modal looks like this.
The modal I intend to show is like this.
My view.php
<div class="box-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<!-- <th></th> -->
<th>Username</th>
<th>Contact</th>
<th>Email</th>
<th>Role Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach ($data as $datas)
<tr>
<td>{{ $datas->username }}</td>
<td>{{ $datas->contact }}</td>
<td>{{ $datas->email }}</td>
<td>Role Type</td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#edit-modal">
<i class="fa fa-edit"></I>
</button>
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#delete-modal">
<i class="fa fa-trash"></i>
</button>
</div>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<div class="modal fade" id="edit-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" align="center"><b>Edit User</b></h4>
</div>
<div class="modal-body">
<form role="form" action="/edit_user">
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
<div class="box-body">
<div class="form-group">
<label for="exampleInputEmail1">User ID</label>
<input type="text" class="form-control" name="user_id" placeholder="User ID" >
</div>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" class="form-control" name="username" placeholder="Enter username">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="text" class="form-control" name="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Contact</label>
<input type="text" class="form-control" name="contact" placeholder="Enter contact">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Change Password</label>
<input type="password" class="form-control" name="change_password" placeholder="Enter password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
How can I achieve the desired output?

Something like this would suffice.
Note: I assume you are using bootstrap 4 for your project, although bootstrap 3 would work too, just tweak it a bit to suit your needs
$(document).ready(function() {
/**
* for showing edit item popup
*/
$(document).on('click', "#edit-item", function() {
$(this).addClass('edit-item-trigger-clicked'); //useful for identifying which trigger was clicked and consequently grab data from the correct row and not the wrong one.
var options = {
'backdrop': 'static'
};
$('#edit-modal').modal(options)
})
// on modal show
$('#edit-modal').on('show.bs.modal', function() {
var el = $(".edit-item-trigger-clicked"); // See how its usefull right here?
var row = el.closest(".data-row");
// get the data
var id = el.data('item-id');
var name = row.children(".name").text();
var description = row.children(".description").text();
// fill the data in the input fields
$("#modal-input-id").val(id);
$("#modal-input-name").val(name);
$("#modal-input-description").val(description);
})
// on modal hide
$('#edit-modal').on('hide.bs.modal', function() {
$('.edit-item-trigger-clicked').removeClass('edit-item-trigger-clicked')
$("#edit-form").trigger("reset");
})
})
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="main-container container-fluid">
<!-- heading -->
<div class="container-fluid">
<div class="row">
<div class="col">
<h1 class="text-primary mr-auto">Example list</h1>
</div>
</div>
</div>
<!-- /heading -->
<!-- table -->
<table class="table table-striped table-bordered" id="myTable" cellspacing="0" width="100%">
<thead class="thead-dark">
<tr>
<th>#</th>
<th> Name</th>
<th> Description</th>
<th> Action</th>
</tr>
</thead>
<tbody>
<tr class="data-row">
<td class="align-middle iteration">1</td>
<td class="align-middle name">Name 1</td>
<td class="align-middle word-break description">Description 1</td>
<td class="align-middle">
<button type="button" class="btn btn-success" id="edit-item" data-item-id="1">edit</button>
</td>
</tr>
<tr class="data-row">
<td class="align-middle iteration">2</td>
<td class="align-middle name">Name 2</td>
<td class="align-middle word-break description">Description 2</td>
<td class="align-middle">
<button type="button" class="btn btn-success" id="edit-item" data-item-id="2">edit</button>
</td>
</tr>
</tbody>
</table>
<!-- /table -->
</div>
<!-- Attachment Modal -->
<div class="modal fade" id="edit-modal" tabindex="-1" role="dialog" aria-labelledby="edit-modal-label" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="edit-modal-label">Edit Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="attachment-body-content">
<form id="edit-form" class="form-horizontal" method="POST" action="">
<div class="card text-white bg-dark mb-0">
<div class="card-header">
<h2 class="m-0">Edit</h2>
</div>
<div class="card-body">
<!-- id -->
<div class="form-group">
<label class="col-form-label" for="modal-input-id">Id (just for reference not meant to be shown to the general public) </label>
<input type="text" name="modal-input-id" class="form-control" id="modal-input-id" required>
</div>
<!-- /id -->
<!-- name -->
<div class="form-group">
<label class="col-form-label" for="modal-input-name">Name</label>
<input type="text" name="modal-input-name" class="form-control" id="modal-input-name" required autofocus>
</div>
<!-- /name -->
<!-- description -->
<div class="form-group">
<label class="col-form-label" for="modal-input-description">Email</label>
<input type="text" name="modal-input-description" class="form-control" id="modal-input-description" required>
</div>
<!-- /description -->
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Done</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- /Attachment Modal -->
Suggestion
I would recommend you to include the form in another blade view, render it with all the relevant data and then return it to the controller then show it in the modal.

You can use the below code just pass the $data to the view and it will populate.
#foreach ($data as $datas)
<div class="modal fade" id="edit-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" align="center"><b>Edit User</b></h4>
</div>
<div class="modal-body">
<form role="form" action="/edit_user">
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
<div class="box-body">
<div class="form-group">
<label for="exampleInputEmail1">User ID</label>
<input type="text" class="form-control" name="user_id" placeholder="User ID" value="{{$datas->user_id}}">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input type="text" class="form-control" name="username" placeholder="Enter username" value="{{$datas->username}}">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="text" class="form-control" name="email" placeholder="Enter email" value="{{$datas->email}}">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Contact</label>
<input type="text" class="form-control" name="contact" placeholder="Enter contact" value="{{$datas->contact}}">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Change Password</label>
<input type="password" class="form-control" name="change_password" placeholder="Enter password">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
#endforeach

Easy and simple method.
Simply ensure your data-target and id values are dynamically changing with respect to the individual rows, in this case fix the modal box code into the loop that it takes the values dynamically.
So since you are using Laravel you could do this:
#foreach($rows as $row)
<em class="fa fa-2x fa-edit mr-1"></em>
<div id="myEditModal{{ $row->id }}" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
....
#endforeach

How to send a PHP variable to a modal bootstrap and receive it as PHP variable?

I need help.
I have a page with a bootstrap button to trigger the modal. To leave the code less polluted I import the modal of the page "require_once ('edit_user.php')". How can I send the PHP variable "$ id" to the "edit_usuario.php" page? In this page I need to retrieve the variable $ id (PHP) to perform queries and checks in the database. I'm populating a records table. I'm displaying the records through "foreach". Then each line has its own id. Below is my code.
_____________________________USUARIOS.PHP_________________________________
<!-- IMPORT THE MODAL FROM OTHER PAGE -->
<?php require_once('editar_usuario.php'); ?>
<!-- Here is the PHP variable that I need to send to the modal on the other page. -->
<?php $id_user = $carregaUsuarios["id"]; ?>
<table id="table_id2" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th width="110px;"></th>
<th>ID</th>
<th>Nome</th>
<th>Login</th>
<th>Senha</th>
<th>Data</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php foreach ( $carregaUsuarios as $carregaUsuarios ) { ?>
<tr>
<td width="110px;" align="center">
<!-- BOTÃO EDITAR -->
<a class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editarUsuario" title="Editar"><i class="fa fa-pencil text-white"></i></a>
<!-- BOTÃO VISUALIZAR -->
<a class="btn btn-success btn-sm" data-toggle="modal" data-target="#visualizarUsuario" title="Visualizar"><i class="fa fa-search text-white"></i></a>
<!-- BOTÃO EXCLUIR -->
<a class="btn btn-danger btn-sm" data-toggle="modal" data-target="#excluirUsuario" title="Alterar Status"><i class="fa fa-refresh text-white"></i></a>
</td>
<td><?php echo $carregaUsuarios["id"]; ?></td>
<td><?php echo $carregaUsuarios["nome"]; ?></td>
<td><?php echo $carregaUsuarios["login"]; ?></td>
<td><?php echo $carregaUsuarios["senha"]; ?></td>
<td>
<?php
$carregaUsuarios["data"] = date("d/m/Y H:i:s", strtotime($carregaUsuarios["data"]));
echo $carregaUsuarios["data"];
?>
</td>
<td>
<?php
if($carregaUsuarios["status"] == 0) {
echo "<span class='badge badge-danger'>INATIVO</span>";
}else{
echo "<span class='badge badge-success'>ATIVO</span>";
}
?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
__________________________EDITAR_USUARIOS.PHP______________________________
<?php
//I JUST NEED GET THE VARIABLE PHP $ID FROM PAST PAGE TO USE HERE AND MAKE SOME SELECTS IN DATA BASE
$id = $carregaUsuarios["id"];
?>
<div class="modal fade" id="editarUsuario" tabindex="-1" role="dialog" aria-labelledby="editarUsuarioLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editarUsuarioLabel">Editar Usuário</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="#" method="POST">
<div class="form-group">
<label for="recipient-name" class="form-control-label">Nome:</label>
<input type="text" class="form-control something" name="nome" id="nome">
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Login:</label>
<input type="text" class="form-control" name="login" required>
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Senha:</label>
<input type="password" class="form-control" name="senha" required>
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Nível de Permissão:</label>
<select name="nivel_permissao" class="form-control" aria-describedby="nivel_permissao" required>
<option></option>
<option value="1">ADMINISTRADOR</option>
<option value="2">INTERMEDIÁRIO</option>
<option value="3">BÁSICO</option>
</select>
<small id="nivel_permissao" class="form-text text-muted">
Administrador - Cadastro, Edição, Exclusão, Visualização e Backup.
<br />
Intermediário - Cadastro, Edição, Visualização.
<br />
Básico - Visualização.
</small>
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Status:</label>
<select name="status" class="form-control" required>
<option value="1">ATIVO</option>
<option value="0">INATIVO</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
<button type="submit" class="btn btn-primary">Confirmar</button>
</div>
</form>
</div>
</div>
</div>
</div>
THANK YOU GUYS! I'm sure you'll help me.

You want to pass a user id to bootstrap modal.
So this occurs on client-side, when PHP has finished its execution long ago.
In your PHP loop, the trick will be to store the user id in a data attribute on the link which opens the modal.
Then an additional script will retreive that value to passe it to an hidden input of the modal.
See comments in code below for what was added.
USUARIOS.PHP:
<?php
if(isset($_POST['userID'])){
// if an id was posted, execute this script.
// You can save to database here.
// ...
}
?>
<!-- IMPORT THE MODAL FROM OTHER PAGE -->
<?php require_once('editar_usuario.php'); ?>
<!-- Here is the PHP variable that I need to send to the modal on the other page. -->
<?php $id_user = $carregaUsuarios["id"]; ?>
<table id="table_id2" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th width="110px;"></th>
<th>ID</th>
<th>Nome</th>
<th>Login</th>
<th>Senha</th>
<th>Data</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php foreach ( $carregaUsuarios as $carregaUsuarios ) { ?>
<tr>
<td width="110px;" align="center">
<!-- BOTÃO EDITAR -->
<!-- data-id was added in the line below -->
<a class="btn btn-primary btn-sm" data-toggle="modal" data-target="#editarUsuario" data-id="<?php echo $id_user; ?>" title="Editar"><i class="fa fa-pencil text-white"></i></a>
<!-- BOTÃO VISUALIZAR -->
<a class="btn btn-success btn-sm" data-toggle="modal" data-target="#visualizarUsuario" title="Visualizar"><i class="fa fa-search text-white"></i></a>
<!-- BOTÃO EXCLUIR -->
<a class="btn btn-danger btn-sm" data-toggle="modal" data-target="#excluirUsuario" title="Alterar Status"><i class="fa fa-refresh text-white"></i></a>
</td>
<td><?php echo $carregaUsuarios["id"]; ?></td>
<td><?php echo $carregaUsuarios["nome"]; ?></td>
<td><?php echo $carregaUsuarios["login"]; ?></td>
<td><?php echo $carregaUsuarios["senha"]; ?></td>
<td>
<?php
$carregaUsuarios["data"] = date("d/m/Y H:i:s", strtotime($carregaUsuarios["data"]));
echo $carregaUsuarios["data"];
?>
</td>
<td>
<?php
if($carregaUsuarios["status"] == 0) {
echo "<span class='badge badge-danger'>INATIVO</span>";
}else{
echo "<span class='badge badge-success'>ATIVO</span>";
}
?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<!-- This whole script was added -->
<script>
$(document).ready(function(){
$("[data-target='#editarUsuario']").on("click", function(){
var userID = $(this).data("id");
$("#userID").val(userID);
});
});
</script>
EDITAR_USUARIOS.PHP:
<?php
//I JUST NEED GET THE VARIABLE PHP $ID FROM PAST PAGE TO USE HERE AND MAKE SOME SELECTS IN DATA BASE
//$id = $carregaUsuarios["id"]; // No use for this here.
?>
<div class="modal fade" id="editarUsuario" tabindex="-1" role="dialog" aria-labelledby="editarUsuarioLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="editarUsuarioLabel">Editar Usuário</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="#" method="POST">
<input type="hidden" id="userID" name="userID"> <!-- This hidden input was added-->
<div class="form-group">
<label for="recipient-name" class="form-control-label">Nome:</label>
<input type="text" class="form-control something" name="nome" id="nome">
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Login:</label>
<input type="text" class="form-control" name="login" required>
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Senha:</label>
<input type="password" class="form-control" name="senha" required>
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Nível de Permissão:</label>
<select name="nivel_permissao" class="form-control" aria-describedby="nivel_permissao" required>
<option></option>
<option value="1">ADMINISTRADOR</option>
<option value="2">INTERMEDIÁRIO</option>
<option value="3">BÁSICO</option>
</select>
<small id="nivel_permissao" class="form-text text-muted">
Administrador - Cadastro, Edição, Exclusão, Visualização e Backup.
<br />
Intermediário - Cadastro, Edição, Visualização.
<br />
Básico - Visualização.
</small>
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Status:</label>
<select name="status" class="form-control" required>
<option value="1">ATIVO</option>
<option value="0">INATIVO</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Fechar</button>
<button type="submit" class="btn btn-primary">Confirmar</button>
</div>
</form>
</div>
</div>
</div>
</div>
So you will receive this id back on PHP side, on form submit via $_POST['userID']
I assumed you loaded the jQuery library...

in USUARIOS.PHP Change <a> to
<i class="fa fa-pencil text-white"></i>
and make div for modal places
<div id="ModalEditar" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
add some Javascipt
$(document).ready(function () {$(".open_modal").click(function(e) {
var m = $(this).attr("id");
$.ajax({
url: "EDITAR_USUARIOS.PHP",
type: "GET",
data : {modal_id: m,},
success: function (ajaxData){
$("#ModalEditar").html(ajaxData);
$("#ModalEditar").modal('show',{backdrop: 'true'});
}
});
});
});
in your EDITAR_USUARIOS.PHP add $id=$_GET['modal_id'];

How to login to website without a page refresh

i am using twitter bootstrap modal window for registration form. when I click on "Register" after filling the form, it sends data to mysql and session begins.
how to ensure that one remains at same webpage from which he has clicked "register" link.
<!DOCTYPE html>
<html>
<head>
<link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#ajax-contact-form").submit(function(){
var str = $(this).serialize();
$.ajax(
{
type: "POST",
url:"register_process.php",
data: str,
success:function(result)
{
$("#div1").html(result);
}
});
return false;
});
});
</script>
</head>
<body>
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">SIGN UP</a>
<div class="modal fade" id="myModal">
<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">Modal title</h4>
</div>
<div class="modal-body">
<div id="contact_form">
<form id="ajax-contact-form" name="contact" action="">
<fieldset>
<div class="field_container">First Name:</label>
<input type="text" name="cust_firstname" id="firstname" maxlength="50" style="width: 250px; height: 30px"; />
<div class="field_container">Last Name:</label>
<input type="text" name="cust_lastname" id="lastname" maxlength="50" style="width: 250px; height: 30px"; />
<div class="sex_check" >
<input type="radio" name="cust_sex" type="radio" value="M" /> Male
<input type="radio" name="cust_sex" type="radio" value="F" /> Female
<hr class="line_break">
<div class="field_container">Email:</label>
<input type="text" name="cust_email" id="email" maxlength="100" style="width: 250px; height: 30px"; />
<div class="field_container">Password:</label>
<input type='password' name='cust_password' id='password' maxlength="12" style="width: 250px; height: 30px"; />
<div class="field_container">Confirm Password:</label>
<input type='password' name='cust_password2' id='confirmpassword' maxlength="12" style="width: 250px; height: 30px"; />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<INPUT class="btn btn-primary" type="submit" name="submit" value="Register" >
</fieldset>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<div id="div1">
</div>
</body>
</html>
register_process.php is as follows
<?php
ob_start();
session_start();
require_once("config.php");
require_once("all_functions.php");
$cust_firstname = stripslashes($_POST['cust_firstname']);
$cust_lastname = stripslashes($_POST['cust_lastname']);
$cust_sex = stripslashes($_POST['cust_sex']);
$cust_email = stripslashes($_POST['cust_email']);
$cust_password = stripslashes($_POST['cust_password']);
$cust_password2 = stripslashes($_POST['cust_password2']);
$res = mysql_query("SELECT * FROM register WHERE cust_email = '$cust_email'");
if (mysql_num_rows($res)>0)
{
echo 'That email is already registered';
exit;
}
mysql_query("INSERT INTO register (`cust_firstname`,`cust_lastname`, `cust_sex`, `cust_email`, `cust_password`)
VALUES
('$cust_firstname', '$cust_lastname', '$cust_sex', '$cust_email', '$cust_password')");
$_SESSION['valid_user'] = $cust_email;
header("Location: http://tripneat.com/");
exit;
?>

You have to change the input type as button and submit the form using javascript .Here is the edited code.
<!DOCTYPE html>
<html>
<head>
<link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<script>
function submit() // changesmade
{
var str = $("#ajax-contact-form").serialize();
$.ajax(
{
type: "POST",
url:"register_process.php",
data: str,
success:function(result)
{
$("#div1").html(result);
}
});
}
</script>
</head>
<body>
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">SIGN UP</a>
<div class="modal fade" id="myModal">
<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">Modal title</h4>
</div>
<div class="modal-body">
<div id="contact_form">
<form id="ajax-contact-form" name="contact" action="">
<fieldset>
<div class="field_container">First Name:</label>
<input type="text" name="cust_firstname" id="firstname" maxlength="50" style="width: 250px; height: 30px"; />
<div class="field_container">Last Name:</label>
<input type="text" name="cust_lastname" id="lastname" maxlength="50" style="width: 250px; height: 30px"; />
<div class="sex_check" >
<input type="radio" name="cust_sex" type="radio" value="M" /> Male
<input type="radio" name="cust_sex" type="radio" value="F" /> Female
<hr class="line_break">
<div class="field_container">Email:</label>
<input type="text" name="cust_email" id="email" maxlength="100" style="width: 250px; height: 30px"; />
<div class="field_container">Password:</label>
<input type='password' name='cust_password' id='password' maxlength="12" style="width: 250px; height: 30px"; />
<div class="field_container">Confirm Password:</label>
<input type='password' name='cust_password2' id='confirmpassword' maxlength="12" style="width: 250px; height: 30px"; />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<INPUT class="btn btn-primary" type="button" name="submit" value="Register" onclick="submit()"/> // changes made
</fieldset>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
<div id="div1">
</div>
</body>
</html>

Categories