I'm trying to figure out what's wrong with my forms. They are all on one page, I dont know if this will be an issue.
I dont know if it's my Safari or what.
Anyways heres the HTML:
<!-- Table Show/Hide Change Form -->
<form method="get" action="check.php" onsubmit="setTimeout('location.reload()');">
<div id="arrange-form" class="modal hide fade">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4><?php _e('Customise Table Layout'); ?></h4>
</div>
<div class="modal-body">
<div id="message"></div>
<div class="control">
<div id="show-form">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" data-complete-text="<?php _e('Done'); ?>" class="btn btn-primary pull-right"><?php _e('Submit'); ?></button>
<p class="pull-left"><?php _e('You can show or hide columns here.'); ?></p>
</div>
</div>
</form>
<!-- Add Account Form -->
<form method="get" action="account-update.php" onsubmit="setTimeout('location.reload()');">
<div id="add-form" class="modal hide fade">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4><?php _e('Add Account'); ?></h4>
</div>
<div class="modal-body">
<div id="message"></div>
<div class="control">
<div id="add-account-form">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" data-complete-text="<?php _e('Done'); ?>" class="btn btn-primary pull-right"><?php _e('Submit'); ?></button>
<p class="pull-left"><?php _e('Add an Account here.'); ?></p>
</div>
</div>
</form>
<!-- Edit/Delete Account Form -->
<form method="get" action="edit.php" onsubmit="setTimeout('location.reload()');">
<div id="edit-form" class="modal hide fade">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4><?php _e('Edit/Delete Account'); ?></h4>
</div>
<div class="modal-body">
<div id="message"></div>
<div class="control">
<div id="edit-account-form">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" data-complete-text="<?php _e('Done'); ?>" name="add" class="btn btn-primary pull-right"><?php _e('Submit'); ?></button>
<p class="pull-left"><button type="button" id="delete-it" class="btn btn-primary pull-right"><?php _e('Delete'); ?></button></p>
</div>
</div>
</form>
<!-- Delete Confirm -->
<form method="get" action="delete.php" onsubmit="setTimeout('location.reload()');">
<div id="delete-confirm" class="modal hide fade">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4><?php _e('Delete Account?'); ?></h4>
</div>
<div class="modal-body">
<div id="message"></div>
<div class="control">
<div id="delete-confirm-form">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" data-complete-text="<?php _e('Done'); ?>" name="delete" class="btn btn-primary pull-right"><?php _e('Yes'); ?></button>
<p class="pull-left"><button type="button" id="delete-refresh" class="btn btn-primary pull-right"><?php _e('No'); ?></button></p>
</div>
</div>
</form>
The forms work in all other browsers including IE, so I don't know what the issue could be.
Any help or suggestions will be appreciated!
Related
**how to summarize loop on modal bootstrap 4 edit/delete in php codeigniter 3 **
because if you use a loop on the modal, it will make the website slow
<?php foreach ($foto as $f) { ?>
<form action="<?= base_url() . 'admin/foto/delete' ?>" method="post" enctype="multipart/form-data">
<div class="modal fade" id="modal-hapus<?= $f->id_foto; ?>" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bg-primary">
<h4 class="modal-title">Hapus Data</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body justify-content-center">
<div class="text-center">
<img class="mt-2 mb-2" src="<?= base_url(); ?>assets/dist/icon/hapus.svg" width=80% alt="delete-img">
<h4 class="mb-4">Apakah anda yakin untuk menghapus file dari <b><?= $f->judul_foto ?></b> ini?</h4>
</div>
</div>
<div class="modal-footer justify-content-between">
<button type="button" class="btn btn-default" data-dismiss="modal">Tutup</button>
<input type="hidden" name="id_hapus" value="<?= $f->id_foto; ?>" required>
<button type="submit" class="btn btn-danger"><i class="fas fa-trash"></i> Hapus</button>
</div>
</div>
</div>
</div>
</form>
I want to make my modal apper, but I can not to do it.
This is my code:
<div class="container h-100">
<div class="row justify-content-sm-center h-100">
<div class="col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9">
<div class="text-center my-5">
<img src="img/logo-branca.png" alt="logo" width="100">
</div>
<div class="card shadow-lg">
<div class="card-body p-5">
<h1 class="fs-4 card-title fw-bold mb-4">CEP</h1>
<form method="POST" action = "autenticar.php">
<div class="mb-3">
<input id="cep" type="number" class="form-control" name="cep" value="" required="required">
</div>
<button type="submit" class="btn btn-primary ms-auto">
Pesquisar
</button>
</div>
</form>
</div>
<div class="card-footer py-3 border-0">
<div class="text-center">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
BUTTON TO OPEN THE MODAL
</button>
</div>
</div>
</div>
<div class="text-center mt-5 text-muted">
Copyright © 2021 — Rodrigo Franco
</div>
</div>
</div>
</div>
And this my modal:
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
If you need to see my project compleatly, just go to this link or if you want to make download the project, just go here
You are not loading Bootstrap's javascript files, simply add:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
To the head of your document and the modal works.
Resources: https://getbootstrap.com/docs/5.0/components/modal/
First Image to show all data in card view
second image for pop up modal
What I want is when I clicked the View button, it will get all the data and display in the modal. The data can be display in the inputbox, textarea and image.
This is the code to row all the data in a card view
<?php
while ($row = mysqli_fetch_assoc($result)){
$wid = $row['web_id'];
?>
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h3><b><?php echo $row['web_name']; ?></b></h3>
</div>
<div class="panel-body">
<?php
if(empty($row['web_image'])){
echo "<span class='no-image glyphicon glyphicon-picture'></span><br><b>NO IMAGE AVAILABLE</b>";
}else{
echo "<div class='imageContainer'><img src='images/".$row['web_image']. "'width='50%' height='15%'/></div>";
}
?>
</div>
<div class="panel-footer">
<h4><b><?php echo $row['web_id']; ?></b></h4>
<a target="_blank" href="<?php echo $row['web_address']; ?>"><h4><?php echo $row['web_address'];?></h4></a>
<h4><?php echo $row['web_description']; ?></h4>
<hr>
//This is an button for view modal
<?php echo '<button type="button" class="btn btn-success btn-sm" data-toggle="modal" data-target="#viewmodal" class="viewbtn">View</button>'; ?>
<?php echo '<button class="btn1 btn-sm"><span class="glyphicon glyphicon-edit"></span> EDIT</button>';?>
</div>
</div>
</div>
<?php
}
?>
This is the modal code
<!--View Modal pop up-->
<div class="modal fade" id="viewmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<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>
<h3 class="modal-title" id="exampleModalLabel"><b>VIEW DATA</b></h3>
</div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label><b>Web ID : </b></label> <span class="validation">*</span>
<input name="w_id" id="w_id" value="" type="text" class="form-control input-box" readonly>
</div>
<div class="form-group">
<label><b>Web Name : </b></label> <span class="validation">*</span>
<input name="w_name" id="w_name" type="text" class="form-control input-box" required>
</div>
<div class="form-group">
<label><b>Web Address : </b></label> <span class="validation">*</span>
<input name="w_address" id="w_address" type="text" class="form-control input-box" required></input>
</div>
<div class="form-group">
<label><b>Web Description : </b></label> <span class="validation">*</span>
<input name="w_description" id="w_description" type="text" class="form-control input-box" required></input>
</div>
<div class="form-group">
<label><b>Web Image : </b></label> <span class="validation">*</span>
<img src='images/".$row["web_image"]. "'width='333px;' height='200px;' name="w_image" id="w_image"/>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="save" class="btn btn-primary">SAVE</button>
<button type="button" name="close" class="btn btn-warning" data-dismiss="modal">CLOSE</button>
</div>
</form>
</div>
</div>
</div>
As i can see you are looping through the panel and you have only one modal in there, what you can do is use data property and JS/Jquery combination to do this.
<?php
while ($row = mysqli_fetch_assoc($result)){
$wid = $row['web_id'];
?>
<div class="col-sm-4 col-xs-12">
<div class="panel panel-default text-center">
<div class="panel-heading">
<h3><b><?php echo $row['web_name']; ?></b></h3>
</div>
<div class="panel-body">
<?php
if(empty($row['web_image'])){
echo "<span class='no-image glyphicon glyphicon-picture'></span><br><b>NO IMAGE AVAILABLE</b>";
}else{
echo "<div class='imageContainer'><img src='images/".$row['web_image']. "'width='50%' height='15%'/></div>";
}
?>
</div>
<div class="panel-footer">
<h4><b><?php echo $row['web_id']; ?></b></h4>
<a target="_blank" href="<?php echo $row['web_address']; ?>"><h4><?php echo $row['web_address'];?></h4></a>
<h4><?php echo $row['web_description']; ?></h4>
<hr>
//This is an button for view modal
<?php echo '<button type="button" class="btn btn-success btn-sm" data-img="<?=$row['img']?>" class="viewbtn">View</button>'; ?>
<?php echo '<button class="btn1 btn-sm"><span class="glyphicon glyphicon-edit"></span> EDIT</button>';?>
</div>
</div>
</div>
<?php
}
?>
<!--View Modal pop up-->
<div class="modal fade" id="viewmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
<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>
<h3 class="modal-title" id="exampleModalLabel"><b>VIEW DATA</b></h3>
</div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST" enctype="multipart/form-data">
<div class="modal-body">
<div class="form-group">
<label><b>Web Image : </b></label> <span class="validation">*</span>
<img width='333px;' height='200px;' name="w_image" id="w_image"/>
</div>
</div>
<div class="modal-footer">
<button type="submit" name="save" class="btn btn-primary">SAVE</button>
<button type="button" name="close" class="btn btn-warning" data-dismiss="modal">CLOSE</button>
</div>
</form>
</div>
</div>
</div>
Now a little bit of jQuery to assign values in the modal fields and open the modal,when view button is clicked
$(function(){
$(".viewbtn").click(function(){
var img = $(this).data("img")
$("#w_image").attr("src",img)
$("#viewmodal").modal()
})
})
So, this is the basic idea of it, you can add other data props and assign the values to the fields accordingly
So as per title, im trying to pass show multiple data from database using sql on the bootstrap modal. The ID will be pass down from the link, how is it done? been finding multiple way but I still can't show the selected data;
So here is the trigger for the modal:
<?php while($row = mysqli_fetch_array($adm_query)){
$id = $row['admin_id']; ?>
<tr>
<td style="text-align:center"><?php echo $row['adm_name']; ?></td>
<td width="150" style="text-align:center"><?php echo $row['staff_no']; ?></td>
<td width="120" style="text-align:center"><?php echo $row['department']; ?></td>
<td width="138" style="text-align:center;">
<a data-toggle="modal" data-target="#myModal" data-id="<?php echo $row['admin_id']?>" class="btn btn-outline btn-info"><i class="fa fa-search-plus"></i></a>
</td>
<?php }?>
Then this is the modal content:
<!-- Modal -->
<div style="margin-top:5%;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<?php $sel_query=mysqli_query($conn, "select * from admin where admin_id='$idmodal'")or die(mysql_error($conn)); $selrow=mysqli_fetch_array($sel_query);?>
<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">Modal title</h4>
</div>
<div class="modal-body">
<div class="panel panel-info" style="text-align:center;">
<div class="panel-heading">
<h4>Staff Details</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Staff ID</label>
<p>
<?php echo $selrow[ 'staff_no']?>
</p>
</div>
<div class="form-group">
<label>Name</label>
<p>
<?php echo $selrow[ 'adm_name']?>
</p>
</div>
<div class="form-group">
<label>Services | Department</label>
<p>
<?php echo $selrow[ 'department']?>
</p>
</div>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-6">
<div class="form-group">
<label>Username</label>
<p>
<?php echo $selrow[ 'username']?>
</p>
</div>
<div class="form-group">
<label>Password</label>
<p>
<?php echo $selrow[ 'password']?>
</p>
</div>
<div class="form-group">
<label>Date</label>
<p>
<?php echo $selrow[ 'date_added']?>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<!-- /.modal-content -->
</div>
The problem is nothing works, and i don't know where to start.
Appreciate for the help.
Create one class openModal in <a></a>. Use this class in <script></script> to get data-id
<?php while($row = mysqli_fetch_array($adm_query,MYSQLI_ASSOC)){
$id = $row['admin_id']; ?>
<tr>
<td style="text-align:center"><?php echo $row['adm_name']; ?></td>
<td width="150" style="text-align:center"><?php echo $row['staff_no']; ?></td>
<td width="120" style="text-align:center"><?php echo $row['department']; ?></td>
<td width="138" style="text-align:center;">
<a class="btn btn-outline btn-info openModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $row['admin_id']?>">
<i class="fa fa-search-plus"></i>
</a>
</td>
</tr>
<?php }?>
Place this code in the same page below.
<div style="margin-top:5%;" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content"></div>
</div>
</div>
JS (data-id=.. is passed here.)
<script>
$('.openModal').click(function(){
var id = $(this).attr('data-id');
$.ajax({url:"ajax_modal.php?id="+id,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
ajax_modal.php (Create one page in same directory ajax_modal.php. If you are looking to change this page name. Change in <script></script> tag too. Both are related.)
<?php
// Get `id` from `<script></script>`
$id = $_GET['id'];
$sel_query=mysqli_query($conn, "select * from admin where admin_id='$id'") or die(mysql_error($conn));
$selrow=mysqli_fetch_array($sel_query,MYSQLI_ASSOC);
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="panel panel-info" style="text-align:center;">
<div class="panel-heading">
<h4>Staff Details</h4>
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label>Staff ID</label>
<p>
<?php echo $selrow[ 'staff_no']?>
</p>
</div>
<div class="form-group">
<label>Name</label>
<p>
<?php echo $selrow[ 'adm_name']?>
</p>
</div>
<div class="form-group">
<label>Services | Department</label>
<p>
<?php echo $selrow[ 'department']?>
</p>
</div>
</div>
<!-- /.col-lg-6 (nested) -->
<div class="col-lg-6">
<div class="form-group">
<label>Username</label>
<p>
<?php echo $selrow[ 'username']?>
</p>
</div>
<div class="form-group">
<label>Password</label>
<p>
<?php echo $selrow[ 'password']?>
</p>
</div>
<div class="form-group">
<label>Date</label>
<p>
<?php echo $selrow[ 'date_added']?>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
For more info, click here
how-to-pass-current-row-value-in-modal
passing-data-via-modal-bootstrap-and-getting-php-variable
bootstrap-modal-and-passing-value
show-data-based-of-selected-id-on-modal-popup-window-after-click-a-button-php-my
Write below line in your code:-
$selrow=mysqli_fetch_assoc($sel_query);
OR
$selrow=mysqli_fetch_array($sel_query,MYSQLI_ASSOC);
instead of
$selrow=mysqli_fetch_array($sel_query);
Also it is bad practice to write query directly into modal.
You should use AJAX on click event. Also you should fill form data via jQuery OR javascript.
In my header provide a link for adding new client. When click the add client link display a popup window that contain a textbox and a submit button.When i click the link display popup window fully fade in(shaded) and not display the label
Whats wrong here?
header
<a data-hover="dropdown" data-close-others="true" data-toggle="modal" class="dropdown-toggle" href="#addClientPop" <?php if($home_index== 1) { ?> class="active" <?php } ?>></span>
Add Client<span class="arrow"></span>
</a>
<div id="addClientPop" class="modal hide fade" tabindex="-1" data-width="760">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3>Add Client</h3>
</div>
<div class="modal-body">
<div class="scroller" style="height:75px" data-always-visible="1" data-rail-visible1="1">
<div class="row-fluid">
<div class="control-group">
<label class="control-label">Client Name</label>
<div class="controls">
<input id="client_name" name="client_name" class="client_box" type="text" class="form-control" required >
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button onClick="submit_client();" type="button" class="btn blue">Submit</button>
</div>
</div>
This is your solution i have worked well
<a data-hover="dropdown" data-close-others="true" data-toggle="modal" class="dropdown-toggle active" href="#addClientPop" >
Add Client<span class="arrow"></span>
</a>
<div id="addClientPop" class="modal fade" tabindex="-1" 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>
<h3>Add Client</h3>
</div>
<div class="modal-body">
<div class="scroller" style="height:75px" data-always-visible="1" data-rail-visible1="1">
<div class="row-fluid">
<div class="control-group">
<label class="control-label">Client Name</label>
<div class="controls">
<input id="client_name" name="client_name" class="client_box" type="text" class="form-control" required >
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button onClick="submit_client();" type="button" class="btn blue">Submit</button>
</div>
</div>
</div>
</div>
In your code what i have noticed that you have closed </span> tag in <a> and if($home_index==1) then class attribute is going to be add two times.
It should be like:
<a data-hover="dropdown" data-close-others="true" data-toggle="modal" class="dropdown-toggle <?php if($home_index== 1) { echo 'active';}?>" href="#addClientPop">Add Client <span class="fa fa-arrow-down"></span> </a>
<li>
<a data-hover="dropdown" data-close-others="true" data-toggle="modal" class="dropdown-toggle active" href="#addPop" >
Add Client<span class="arrow"></span>
</a>
<div id="addPop" class="modal fade" tabindex="-1" 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>
<h3>Add Client</h3>
</div>
<div class="modal-body">
<div class="scroller" style="height:75px" data-always-visible="1" data-rail-visible1="1">
<div class="row-fluid">
<div class="control-group">
<label class="control-label">Client Name</label>
<div class="controls">
<input id="market_price" name="market_price" class="client_box" type="text" class="form-control" required >
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button onClick="submit_price();" type="button" class="btn blue">Submit</button>
</div>
</div>
</div>
</div>
</li>