How to show a popup and then send the PHP form? - php

Question

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?

Answer 1

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>

Answer 2

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

Answer 3

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>