How to use click event on bootstrap modal - javascript

I generate many bootstrap modals with a php script, and I'd like to edit some input of it when I click button "save changes".
ModalIDs generated are something like "ModalID0000".
But nothing happens with my script when i click on "save changes".
<input role="button" data-target="#modalID<?php echo $post->Clone;?>" />
<!-- Modal -->
<div class="modal fade" id="modalID<?php echo $post->Clone;?>" tabindex="-1" role="dialog" aria-labelledby="Identifiants" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Identifiants de connexion</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- mdp et user récupérés dans le champ commentaire, sinon standard -->
<?php if ($flagLogin == true){ ?>
<input type="text" value="<?php echo $user; ?>"/>
<input type="password" value="<?php echo $pwd; ?>"/>
<?php } else { ?>
<input class="user_login" type="text" value="user"/>
<input class="user_password" type="password" value="xxxxxxxxx"/>
<?php } ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-blue-grey z-depth-0" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning z-depth-0 save" >Save changes</button>
</div>
</div>
</div>
</div>
$("modal.save").click(function(){
alert('save');
//edit user_login and user_password values here
});
EDIT :
1st mistake found with modal element selector instead of class, but still no alert
$(".modal.save").click(function(){
alert('save');
});

Save button is the child element of .modal selector.
So $("modal.save") should be replaced to $(".modal .save").
Or that button belongs to .modal-footer so you can put as follows.
$(".modal-footer .save")
$(".modal .save").click(function () {
alert('save');
//edit user_login and user_password values here
});
<input role="button" data-target="#modalID<?php echo $post->Clone;?>" />
<!-- Modal -->
<div class="modal fade" id="modalID<?php echo $post->Clone;?>" tabindex="-1" role="dialog"
aria-labelledby="Identifiants" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Identifiants de connexion</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- mdp et user récupérés dans le champ commentaire, sinon standard -->
<?php if ($flagLogin == true){ ?>
<input type="text" value="<?php echo $user; ?>" />
<input type="password" value="<?php echo $pwd; ?>" />
<?php } else { ?>
<input class="user_login" type="text" value="user" />
<input class="user_password" type="password" value="xxxxxxxxx" />
<?php } ?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-blue-grey z-depth-0" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-warning z-depth-0 save">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Related

Return a message after submmited form

I have this form in html:
<form action='#Url.Action("ExportExcel", "Banks")' method="post" target="_blank" id="myForm">
#Html.AntiForgeryToken()
<input type="hidden" name="typeDetails" id="typeDetails" value="typeDetails.value" />
<input type="hidden" name="filteredBanksIds" id="filteredBanksIds" value="" />
<input id="btnExportExcel" type="hidden" value="submit" data-toggle="modal" data-target="#ExportExcelModal" />
</form>
and the modal is:
<div class="modal fade" id="ExportExcelModal" tabindex="-1" role="dialog" aria-labelledby="ExportExcelModalTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ExportExcelModalTitle">Banks</h5>
<button type="button" class="close" id="ExportExcelModalClose" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Would you like to export this banks with details?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-target="#myModal" value="1" onclick="exportExcel(this.value)">yes</button>
<button type="button" class="btn btn-primary" data-target="#myModal" value="0" onclick="exportExcel(this.value)">no</button>
</div>
</div>
</div>
</div>
and I have this in JS:
function exportExcel(typeDetails) {
$('#ExportExcelModalClose').click();
$('#filteredBanksIds').val(filteredBanks.map(function (bank) { return bank.Id }));
$('#typeDetails').val(typeDetails);
$("#myForm").submit;
return true;
}
I would like that in addition to what happens on the server side (Excel export and download),
also a message will be returned to the user after the Excel export ends, with custom message from the server.
How can I add this?

Form action in model window not working in PHP

I tried to create a form in a model window. But the form action doesn't work. This is my code so far.
HTML Code
<form action="functions/userManagement.php?id="<?php echo $id ?> name='searchdata' id="comment_box" method="get">
<div style="display: none;" aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">x</button>
<h4 id="myModalLabel" class="modal-title">Put the Reason for Deactivate</h4>
</div>
<div class="modal-body">
<textarea rows="4" cols="70" name="comment" form="usrform"></textarea>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button onclick="form_submit()" class="btn btn-primary" name="add" value="Proceed">Proceed</button>
</div>
</div>
</div>
</div>
</form>
Java Script code
<script type="text/javascript">
function form_submit() {
document.getElementById("comment_box").submit();
}
</script>
Can anyone help me to fix this.
1st : Your action attribute Get parameter value should be inside the double quotes .
action="functions/userManagement.php?id="<?php echo $id ?>
To
action="functions/userManagement.php?id=<?php echo $id ?>"
2nd : Simple change button type to submit
<button type="submit" class="btn btn-primary" name="add" value="Proceed">Proceed</button>
3rd : Your form should be inside the modal .
<div style="display: none;" aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<form action="functions/userManagement.php?id="<?php echo $id ?> name='searchdata' id="comment_box" method="get">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">x</button>
<h4 id="myModalLabel" class="modal-title">Put the Reason for Deactivate</h4>
</div>
<div class="modal-body">
<textarea rows="4" cols="70" name="comment" form="usrform"></textarea>
</div>
<div class="modal-footer">
<button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
<button onclick="form_submit()" class="btn btn-primary" name="add" value="Proceed">Proceed</button>
</div>
</form>
</div>
</div>
</div>
Note : simple your submiting the form . so you can submit the form easily by button type="submit" .
Use this one
onclick="javascript:form_submit()"
Use this one
action="<?php echo htmlentities('functions/userManagement.php?id= echo $id');?>"
Hope it is helpful for you.

Using modal in isset PHP

I am trying to open a modal when submit is clicked in the table .
I tried to change the animation to fadeIn because using fade the modal shows only flash.
The result when I use the fadeIn the modal appears but in split second and I did not include any timers or refresh in the whole page.
Can I have a sample code to show the modal and set the conditions in
if(isset($_POST['pending'])) { ...alert ..}
or please comment suggestions for this.
Because I am unable to use and view the modal properly.
Note: It has a bootstrap for the modal and jquery but I did not include here in the post
while($record = mysql_fetch_array($myData))
{
echo "<form action='dir_1.php' method='POST'>";
echo "<tr>";
echo '<td><input type="submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" /></td>';
echo "</tr>";
echo "</form>";
}
if(isset($_POST['pending'])){
echo('
<div class="modal fadeIn" id="myModal" 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">
<h2>Enter your First and Last Name</h2>
<form action="submit_prompt.php" method="post">
<p><strong>First Name:</strong><br />
<input type="text" name="notes" id="input1"/></p>
<input type="submit" name="submit" value="Add" />
</div>
<div class="modal-footer">
<input type="submit" name="submit" value="Add" />
<button type="button" onclick="play()" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
');
}
Have you tried triggering with JavaScript:
<?php if(isset($_POST['pending'])) { ?>
<script>
$( document ).ready(function() {
$('#myModal').modal('show')
});
</script>
<?php } ?>
Quick Browser test, testmodal.php:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="modal fadeIn" id="myModal" 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">
<h2>Enter your First and Last Name</h2>
<form action="submit_prompt.php" method="post">
<p><strong>First Name:</strong><br />
<input type="text" name="notes" id="input1"/></p>
<input type="submit" name="submit" value="Add" />
</div>
<div class="modal-footer">
<input type="submit" name="submit" value="Add" />
<button type="button" onclick="play()" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<?php if(isset($_GET['pending'])) { ?>
<script>
$( document ).ready(function() {
$('#myModal').modal('show')
});
</script>
<?php } ?>
In the browser:
http://your-domain/testmodal.php?pending=fakevar

Show data based of selected id on modal popup window after click a button php mysql

On my website, when the button is clicked, it will prompt to a popup window. Im using the modal popup window. My problem is, I cant get the right data that being retrieved based on the id of the button. Below is my code:
The html table:
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter;
$counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>
The fam_id is the primary key.
Then, below is the code for modal popup window
<!-- Modal -->
<form id="form1" method="post">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
</div>
<div class="modal-body">
<b>Details</b>
<hr></hr>
Address: <?php echo $ser['fam_add']; ?><p></p>
Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
Moreover, Im doing them in one file. In conclusion, it is like below:
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter;
$counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td><center><button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id=<?php echo $ser['fam_id'];?>>Edit Attendance Status</button></center>
<!-- Modal -->
<form id="form1" method="post">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id">Name <?php echo $ser['fam_name'];?></h4>
</div>
<div class="modal-body">
<b>Details</b>
<hr></hr>
Address: <?php echo $ser['fam_add']; ?><p></p>
Phone_num: <?php echo $ser['fam_phone']; ?><p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
</td>
</tr>
<?php
}
?>
</tbody>
<tbody>
<?php
$counter = 1;
$data = "SELECT * FROM family";
$result = $conn->query($data);
while($ser=mysqli_fetch_array($result))
{
?>
<tr>
<td><center><?php echo $counter; $counter++; ?></center></td>
<td><center><?php echo $ser['fam_id'];?></center></td>
<td><center><?php echo $ser['fam_name']; ?></center></td>
<td>
<center>
<a class="modalLink" href="#myModal" data-toggle="modal" data-target="#myModal" data-id="<?php echo $ser["fam_id"]; ?>" data-addr="<?php echo $ser['fam_add']; ?>" data-phone="<?php echo $ser['fam_phone']; ?>" data-name="<?php echo $ser['fam_name']; ?>">
<button class="btn btn-primary btn-sm">
Edit Attendance Status
</button>
</a>
</center>
Place this code in footer.php or end of this page.
<div 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>
Call your 'somepage.php' (Separate page.Where modal-body is present) through ajax. Place this <script></script> in your JS file.
<script>
$('.modalLink').click(function(){
var famID=$(this).attr('data-id');
var famAddr=$(this).attr('data-addr');
var famPhone=$(this).attr('data-phone');
var famName=$(this).attr('data-name');
$.ajax({url:"somepage.php?famID="+famID+"&famAddr="+famAddr+"&famPhone="+famPhone+"&famName="+famName,cache:false,success:function(result){
$(".modal-content").html(result);
}});
});
</script>
somepage.php
Create somepage.php (If you want to change this page name. Change in <script></script> too. Both are related.)
<?
$famID=$_GET['famID'];
$famAddr=$_GET['famAddr'];
$famPhone=$_GET['famPhone'];
$famName=$_GET['famName'];
?>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="fam_id">Name <?php echo $famName;?></h4>
</div>
<div class="modal-body">
<form id="form1" method="post">
<b>Details</b>
<hr></hr>
Address: <p><?php echo $famAddr;?></p>
Phone_num: <p><?php echo $famPhone;?></p>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>

twitter bootstrap modal works with js only once

Implemented in PHP using Codeigniter, I am using Twitter Bootstrap Modal for my project. The goal is that when I click the modal, an entry form for the name will appear. Fortunately, the modal gets the data I need (i.e. the name of the community). However, when I load the modals one by one, it is only in the first modal that my code here works:
Here are my codes inside my view page together with the codes linked above:
//..code here
<?php foreach ($name_list as $list) { ?>
modal trigger
<img class="pointer" title="Edit" src="pic.png" data-toggle="modal" data-target="<?php echo "#" . $list->name?>"/> <?php echo $list->name?>
modal
<div class="modal fade bs-example-modal-sm" id="<?php echo $list->name ?>" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<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">Edit <?php echo $list->name?></h4>
</div>
<form action="<?php echo base_url();?>edit" method="post">
<div class="modal-body">
<b><p id="warning"></p></b>
<input name="edit-name" id="edit-name" type="text" placeholder="Name" value="<?php echo $list->name?>"/>
<input name="edit-id" type="text" value="<?php echo $list->id?>" class="hidden"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<input type="submit" id="edit-btn" disabled="true" class="btn btn-primary" value="Save changes" />
</div>
</form>
</div>
</div>
</div>
What is wrong with my code? Why does my JS code work only once?

Categories