I want to call modal('show') event with php code. How can I do this? I tried the following:
if(isset($_POST['Edit'])){
echo "<script> $('#Modal').modal('show') </script>";}
I run this code, but echo "<script> $('#Modal').modal('show') </script>"; doesnt work. How can I show modal when image input is clicked? I don't want to call with image onlick.
Input:
<input type="image" src="image.png" name="Edit" value="Edit" alt="Edit" />
Modal:
<div class="modal hide fade" id="Modal" >
<form method="post">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" style="margin-top:-10px">×</button>
</div>
<div class="modal-body">
<textarea id="text" name="text">Test</textarea>
</div>
<div class="modal-footer">
</div>
</form>
</div>
Set the document.ready function as shown below:
echo "<script type='text/javascript'>
$(document).ready(function(){
$('#Modal').modal('show');
});
</script>";
On a side note, this work around is also great if you have a modal login form and need to alert the user on submit (or $_POST) for any submission errors in a seperate modal.
You can use jquery fadeIn function to show model
$('#Modal').modal('show');
Change to
$('#Modal').fadeIn('show');
Hope it will help you.
Related
i have modal popup in loop with database values. In popup there is a reply textarea and i want to post that value using ajax. But i am getting empty value of textarea when i alert value on click event using jquery. Here is my code
CODE:
<?php
$sn=1;$rep=1;
foreach($view_queries as $q) {?>
Reply
?>
<!-- create reply model -->
<div id="create_reply<?php echo $rep;?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<form id="send_reply" method="post" antype="multipart/form-data">
<input type="hidden" name="query_id" value="<?php echo $q->query_id;?>" />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Reply To Query</h4>
</div>
<div class="modal-body">
<label>Query:</label>
<p><?php echo ucfirst($q->query);?></p>
<div class="form-group">
<label>Reply:</label>
<textarea rows="3" name="mesg" id="<?php echo $sn;?>mesg" class="form-control"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" id="" data-target="<?php echo $sn;?>mesg" class="btn btn-default form_click">Reply</button>
</div>
</form>
</div>
</div>
</div>
<!-- create reply model ends -->
<?php $sn++; $rep++; }?>
HERE IS THE SCRIPT FOR CHECKING VALUE IN ALERT:
<script>
$(document).ready(function(){
$(document).on("click",".form_click",function(event){
event.preventDefault();
var a=$('#' + $(this).data('target')).text();
alert(a);
});
});
</script>
You should use .val() instead of .text(). text() get's the HTML contents of a HTML element. val() is used for getting contents of HTML inputs.
Also as Smit Raval already stated, id's should be unique.
You could give the fields an id with and index set in PHP.
So in every loop you increment the index and add that to your id values, like so:
id="<?=$index?>_mesg".
And in your button do:
<button type="button" data-target="<?=$index?>_mesg" id="" class="btn btn-default form_click">Reply</button>
And then in your jquery you can do var a=$('#' + $(this).data('target')).val();
See the added data-target in your button. And the $(this).data('target') in the jquery for retrieving the value of the target data attribute.
<script>
$(document).ready(function(){
$(document).on("click",".form_click",function(event){
event.preventDefault();
var a= $(this).parents("form.send_reply").find("textarea.mesg").text();
alert(a);
});
});
</script>
change id="mesg" to class="mesg" in your loop.Also make sure you don't repeat the same ID in your loop. Change id="send_reply" to class="send_reply"
I have modal popup in loop with database values. The modal box contains a form which have hidden input value and a textarea to insert message. I am able to get the value of textbox with the help of stackoverflow.
Reference :
bootstrap modal textarea showing empty alert on click jquery
But when i alert the hidden value in alert box it does not change according to the loop in alert box. The value of hidden element is changing in loop when i check using inspect element but when i alert it, it is showing same value.
CODE:
<?php
$sn=1;$rep=1;
foreach($view_queries as $q) {?>
Reply
?>
<!-- create reply model -->
<div id="create_reply<?php echo $rep;?>" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<form id="send_reply" method="post" antype="multipart/form-data">
<input type="hidden" name="query_id" value="<?php echo $q->query_id;?>" />
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Reply To Query</h4>
</div>
<div class="modal-body">
<label>Query:</label>
<p><?php echo ucfirst($q->query);?></p>
<div class="form-group">
<label>Reply:</label>
<textarea rows="3" name="mesg" id="<?php echo $sn;?>mesg" class="form-control"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" id="" data-target="<?php echo $sn;?>mesg" class="btn btn-default form_click">Reply</button>
</div>
</form>
</div>
</div>
</div>
<!-- create reply model ends -->
<?php $sn++; $rep++; }?>
HERE IS THE SCRIPT FOR CHECKING VALUE IN ALERT:
<script>
$(document).ready(function(){
$(document).on("click",".form_click",function(event){
event.preventDefault();
var a=$('#' + $(this).data('target')).text();
var query_id=$('#query_id').val();
alert(query_id);
});
});
</script>
Easier option is use data-* attribute to persist query id as you are using data-target
<button type="button" data-id="<?php echo $q->query_id;?>" data-target="<?php echo $sn;?>mesg" class="btn btn-default form_click">Reply</button>
Then you can easily use
var query_id= $(this).data('id');
Problem with your implementation is that You have not specified ID of hidden field, thus must be getting undefined while fetching value.
<input type="hidden" name="query_id" value="<?php echo $q->query_id;?>" />
To get its value use DOM relationship of current element.
Use .closest(selector) to traverse up to common parent then use .find() to get the element using Attribute Equals Selector [name=”value”]
Relevant code
var query_id= $(this).closest('form') //target common parent
.find('[name=query_id]') //target element
.val();
$(document).ready(function() {
$(document).on("click", ".form_click", function(event) {
event.preventDefault();
var query_id = $(this).closest('form') //target common parent
.find('[name=query_id]') //target element
.val();
console.log(query_id);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="send_reply" method="post" antype="multipart/form-data">
<input type="hidden" name="query_id" value="1" />
<div class="modal-footer">
<button type="button" id="" class="btn btn-default form_click">Reply</button>
</div>
</form>
I have a simple php form and it's action link is another php file/page.
I am trying to show a popup before sending the PHP form to it's action page.
I tried onsubmit , onclick but nothing is working.
this is my form
<form method="post" action="/actions.php/" data-js-validate="true" data-js-highlight-state-msg="true" data-js-show-valid-msg="true">
<input type="text" name="amount[]" placeholder="Amount" class="inputChangeVal" data-js-input-type="number" />
<button class="btn" type="submit" name="confirm" >Pay Now</button>
</form>
this form send the amount value to the actions.php
but before sending this I want to show a poup that shows 'Edit' , 'Continue' with this message "Your about to make a online payment. Click 'Edit' to review the data before proceeding or click 'Continue' to confirm the details for payment."
if user clicks 'Edit' form submission should be stopped and popup should be closed.
if user clicks 'Continue' form should submit the data to the action.php
I tried:
<button class="btn" type="submit" name="confirm" onclick="return foo();">Pay Now</button>
<script>
jQuery( document ).ready(function() {
function foo()
{
alert("Submit button clicked!");
return true;
}
});
</script>
this does not work..
I tried
<form method="post" action="/actions.php/" data-js-validate="true" data-js-highlight-state-msg="true" data-js-show-valid-msg="true" onsubmit="return foo()">
also not working..
Both just go to the actions.php
how can I show the popup and then send the form based on the selection?
Basically the best way I see to achieve this is to use the bootstrap modal, so what you need to do is to stop the form from submission when the button is clicked, then show the bootstrap modal using jquery , then you form will have two buttons one the edit which will then have the data-dismiss="modal" which will just close the modal and show back the form, then the continue button when clicked you will just force the form to submit using jquery as well with $('form').submit(); this tells the form to submit to the form action.
$('document').ready(function(){
$('#payBtn').on('click',function(e){
e.preventDefault();
$('#myModal').modal('toggle');
});
$('#continuebtn').on('click',function(){
$('form').submit();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form method="post" action="/actions.php/" data-js-validate="true" data-js-highlight-state-msg="true" data-js-show-valid-msg="true">
<input type="text" name="amount[]" placeholder="Amount" class="inputChangeVal" data-js-input-type="number" />
<button class="btn" type="submit" name="confirm" id="payBtn">Pay Now</button>
</form>
<!-- Modal -->
<div class="modal fade" 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">Proccess Payment</h4>
</div>
<div class="modal-body">
"Your about to make a online payment. Click 'Edit' to review the data before proceeding or click 'Continue' to confirm the details for payment."
<button class="btn btn-default" data-dismiss="modal">Edit</button>
<button class="btn btn-primary" id="continuebtn">Continue</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You could achieve your goal with using javascript alerts. Your php will not call the other php directly, but a javascript method, which then shows an alert with 2 buttons. Look into https://www.w3schools.com/js/js_popup.asp as it probably describes it better than me.
Best wishes,
Essi
Please check this its working now. You don't need document.ready just simply add to js file or in tag!
function foo()
{
if(confirm('You\'re about to make a online payment. Click "Cancel" to review the data before proceeding or click "Ok" to confirm the details for payment.'))
{
alert("confirm ok");
document.getElementById("form_id").submit();// Form submission
}
else {
return false;
}
}
<form method="post" id="form_id" action="/actions.php/" data-js-validate="true" data-js-highlight-state-msg="true" data-js-show-valid-msg="true">
<input type="text" name="amount[]" placeholder="Amount" class="inputChangeVal" data-js-input-type="number" />
<button class="btn" type="submit" name="confirm" onclick="foo();" >Pay Now</button>
</form>
I am trying to send data on button on modal using jQuery, first time it is working well but when I click second time it execute twice and for third time it execute 3 times, I want to execute that button only once, what is wrong exactly?
my modal
`<div id="Modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content modal-sm">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">product</h4>
</div>
<div class="modal-body">
<label>Quantity</label>
<input type="text" class="form-control" id="qty" value="">
<label>Note:</label>
<input type="text" class="form-control" id="note" value="">
</div>
<div class="modal-footer">
<button id="" type="button" class="btn btn-primary mdismiss" data-dismiss="modal">Add</button>
</div>
</div>
</div>
</div>`
my jQuery :
`
$('#btnbtn').click(function(){
$('#Modal').modal('show');
$('#addbutton').click(function(){
alert();
});
});`
You are adding click handler multiple time whenever you are clicking on #btnbtn button. No need of attaching click event handler to #addbutton on each click. Change your code like below:
$('#btnbtn').click(function(){
$('#Modal').modal('show');
});
$('#addbutton').click(function(){
alert();
});
Instead of using .click() when binding the button you can use one(). It will only execute once.
$('#btnbtn').click(function(){
$('#Modal').modal('show');
$('#addbutton').one('click', function(){
alert();
});
});`
I have been trying for 2 days but still no luck!
I want to
Submit Form from index.php to result.php
Show result.php inside Modal while index.php is open! (without
closing index.php)
here is example code!
index.php
<form id="myform" method="post" action="result.php" target="_blank">
<input type="text" name="userId" id="userId"/>
<input id="button" type="submit"/>
</form>
result.php
<div id="resultModal" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="fa fa-times-circle"></i>ESC</button>
<h4 class="modal-title">Show Result </h4>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
In Modal body
<?php $selectedId = $_POST['userId'];
echo $selectedId;
?>
And JQuery
<script type="text/javascript">
$('#myForm').on('submit', function(ev) {
var userId = $('#userId').find("input").val();
$.ajax({
type: 'POST',
url : $(this).attr('action'),
data: userId,
success: function () {
// alert('form was submitted');
}
});
});
</script>
Well it has taken me some time but I think I found an answer to your question, or at least this solution can give you a good clue on how to continue with what you are doing.
First index.php: Here you need to have your form with an input field and one button, which we will call modal, and submit form (using Ajax for post)
<form id="form" method="post">
<div id="userDiv"><label>UserId</label>
<input type="text" name="userId" id="userId" placeholder="UserId"/> <br></div>
<button type="button" id="btn" class="btn btn-info" data-toggle="modal" data-target="#myModal">Send Data</button>
</form>
Then you need a modal where you will put content from remote page. In modal-body you add one more div tag with id="bingo" to locate him easy :) like this:
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">MyModal</h4>
</div>
<div class="modal-body">
<div id="bingo"></div>
</div>
</div>
</div>
</div>
This page also needs to have a script tag which will do the job. Important it must be placed after the script tag where you load the jquery file.
<script>
$(document).ready(function(){
$("#btn").click(function(){
var vUserId = $("#userId").val();
if(vUserId=='')
{
alert("Please enter UserId");
}
else{
$.post("result.php", //Required URL of the page on server
{ // Data Sending With Request To Server
user:vUserId,
},
function(response,status){ // Required Callback Function
$("#bingo").html(response);//"response" receives - whatever written in echo of above PHP script.
$("#form")[0].reset();
});
}
});
});
</script>
And last but not the least result.php:
<?php
if($_POST["user"])
{
$user = $_POST["user"];
// Here, you can also perform some database query operations with above values.
echo "Your user id is: ". $user;
}
?>
P.S. I hope I didn't mess somewhere with ids, variables or similar because I tried to adjust the solution to your example. I hope this is what you need, or at least this will be a clue to accomplish your task. Still think that this could be done on one page but it was interesting for me to try to find a way to make this work... GL!