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>
Related
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>
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
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'];
I have a PHP form working with MySQL and passing data to another page, In the first page, a mysql query selects some records and then prints it on the page, one of this records is obviously the ID, which is also printed in the value of an hidden field, in order to use it in the next page
<input type="hidden" name="cat_id" value="<?php echo $row['id']; ?>" />
and the result is correct, I have 10 different ids when checking the page output code
<input type="hidden" name="cat_id" value="1" />
<input type="hidden" name="cat_id" value="2" />
<input type="hidden" name="cat_id" value="3" />
...
the problem comes when I submit the form (I have 1 form for each DB result, so if I have 10 entries I have also 10 hidden fields with 10 different values), even if I submit the 2nd or the 10th form, in the next page, the value of $_POST['cat_id'] is always 1, according to a general print of $_POST
Array
(
[cat_id] => 1
)
Does someone understands why?
EDIT: Adding the complete forms output script for clarification
<div class="container">
<div class="row">
<?php
if($c == 0){
?>
<h3>Il catalogo è momentaneamente vuoto.</h3>
<?php
} else {
while($row = $result->fetch_assoc()) {
?>
<div class="col-md-3 col-sm-4 col-xs-12">
<div class="thumbnail">
<div class="caption-img" style="background: url('imgs/thumb.jpg');"></div>
<a href="#" data-toggle="modal" data-target="#myModal">
<div class="caption-link">
<h3><?php echo $row['titolo']; ?></h3>
<span class="glyphicon glyphicon-book"></span>
</div>
</a>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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" id="myModalLabel">Password</h4>
</div>
<div class="modal-body">
<p>Perfavore inserisci la password necessaria per visualizzare questo elemento</p>
<form action="show.php" method="post">
<input type="password" class="form-control" name="psw" />
<input type="hidden" name="cat_id" value="<?php echo $row['id']; ?>" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
<button type="submit" class="btn btn-primary" name="view">Prosegui</button>
</form>
</div>
</div>
</div>
</div>
<?php
}
}
?>
</div>
</div>
Your form is broken, it cannot have its parent element closing before the form closes:
<div class="modal-body">
<p>Perfavore inserisci la password necessaria per visualizzare questo elemento</p>
<form action="show.php" method="post">
<input type="password" class="form-control" name="psw" />
<input type="hidden" name="cat_id" value="<?php echo $row['id']; ?>" />
</div> <!-- HERE IS YOUR ISSUE -->
<div class="modal-footer"> <!-- HERE IS YOUR ISSUE -->
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
<button type="submit" class="btn btn-primary" name="view">Prosegui</button>
</form>
</div>
It should look more like this:
<form action="show.php" method="post">
<div class="modal-body">
<p>Perfavore inserisci la password necessaria per visualizzare questo elemento</p>
<input type="password" class="form-control" name="psw" />
<input type="hidden" name="cat_id" value="<?php echo $row['id']; ?>" />
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
<button type="submit" class="btn btn-primary" name="view">Prosegui</button>
</div>
</form>
osHome.php
this are parts of the code and the "Save Changes" button does not do anything. I want to save the data to the database and my code seem to do nothing. please help me anyone :(
//php code clip
<?php
session_start();
//Check whether the session variable User_name is present or not
if(!isset($_SESSION['User_name']) || (trim($_SESSION['User_name']) == '')) {
header("location: login.php");
exit();
}
include_once('../config.php');
if(isset($_POST['addNewOs'])){
$new_name = $_POST['newOs_name'];
$new_edition = $_POST['newOs_edition'];
$new_version = $_POST['newOs_version'];
$conn = mysqli_connect($servername, $username, $password, $dbname);
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}else {
$sql = "INSERT INTO oslist (oslist_name, oslist_edition, oslist_version)
VALUES ('$new_name', '$new_edition','$new_version')";
mysqli_query($conn, $sql);
echo "<script type='text/javascript'>alert('New record created successfully');</script>";
}
}
?>
//modal
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">x</button>
<h4 class="modal-title" id="myModalLabel">Add New OS</h4>
</div>
<div class="modal-body">
<form method="post" action="osHome.php">
<table style="width: 100%" class="table table-bordered" >
<tr><th><label>OS Name</label></th>
<td colspan="3" ><input type="text" name="newOs_name" class="form-control"></td>
</tr>
<tr><th><label>Edition</label></th>
<td colspan="3" ><input type="text" name="newOs_edition" class="form-control"></td>
</tr>
<tr><th><label>Version</label></th>
<td colspan="3" ><input type="text" name="newOs_version" class="form-control" ></td>
</tr>
</table>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal">Cancel</button>
<input type="submit" name="addNewOs" value="Save Changes" class="btn btn-primary">
</div>
</div>
</div>
</div>
<div id="selectOS"><b>Operating System info will be listed here.</b></div>
the modal and the button are included, maybe there might be some errors that I haven't noticed.. -_-
//button
Add New OS
Your button is outside the </form> tag and is not associated with the form. Either expand what is in the form or use the <button form="formid" > attribute after giving your form an id.
Buttons
Option 1
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">x</button>
<h4 class="modal-title" id="myModalLabel">Add New OS</h4>
</div>
<form method="post" action="osHome.php"><!-- start form here-->
<div class="modal-body">
<table style="width: 100%" class="table table-bordered" >
<tr><th><label>OS Name</label></th>
<td colspan="3" ><input type="text" name="newOs_name" class="form-control"></td>
</tr>
<tr><th><label>Edition</label></th>
<td colspan="3" ><input type="text" name="newOs_edition" class="form-control"></td>
</tr>
<tr><th><label>Version</label></th>
<td colspan="3" ><input type="text" name="newOs_version" class="form-control" ></td>
</tr>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal">Cancel</button>
<input type="submit" name="addNewOs" value="Save Changes" class="btn btn-primary">
</div>
</form><!-- end form here-->
</div>
</div>
</div>
Option 2
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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">x</button>
<h4 class="modal-title" id="myModalLabel">Add New OS</h4>
</div>
<div class="modal-body">
<form method="post" action="osHome.php" id="myForm"><!-- id = myForm -->
<table style="width: 100%" class="table table-bordered" >
<tr><th><label>OS Name</label></th>
<td colspan="3" ><input type="text" name="newOs_name" class="form-control"></td>
</tr>
<tr><th><label>Edition</label></th>
<td colspan="3" ><input type="text" name="newOs_edition" class="form-control"></td>
</tr>
<tr><th><label>Version</label></th>
<td colspan="3" ><input type="text" name="newOs_version" class="form-control" ></td>
</tr>
</table>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal">Cancel</button>
<input type="submit" name="addNewOs" value="Save Changes" class="btn btn-primary" form="myForm"> <!-- button associated with myform-->
</div>
</div>
</div>
</div>