0

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?

Riffaz Starr
  • 611
  • 2
  • 20
  • 37

3 Answers3

2

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">&times;</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>
Masivuye Cokile
  • 4,754
  • 3
  • 19
  • 34
  • Thanks for this.. this works.. when the pay now button is clicked the model is popped up (http://prnt.sc/ehs245) but unable to click any link. if I remove the `model backdrop` section from the elements tool then the screen becomes to normal color and able to click the button (http://prnt.sc/ehs166) why is that? – Riffaz Starr Mar 09 '17 at 09:49
  • Hi, where does the `model backdrop` come from? I don't have it in my code and tested it, maybe you have a script/function that adds this class on a modal in one of your codes, an then that courses the modal not to function as it should be – Masivuye Cokile Mar 09 '17 at 09:53
  • The backdrop option specifies whether the modal should have a dark overlay (the background color of the current page) or not. so basically the backdrop is sitting in front of the modal therefore you can click the modal when its behind the backdrop. You can just make the backdrop static or remove it completely – Masivuye Cokile Mar 09 '17 at 09:56
  • if this worked @RiffazStarr you may accept the answer – Masivuye Cokile Mar 09 '17 at 10:04
  • here the solution: http://stackoverflow.com/questions/17911918/bootstrap-modal-popping-up-but-has-a-tinted-page-and-cant-interact but if I move the model right below the `

    ` tag if I click confirm button it does not go to the `actions.php`

     – Riffaz Starr Mar 09 '17 at 10:06
  • if you move the model outside the body tag that means is no longer part of your body content.... put inside <`body>

    ` just remove teh overlay you did, this should work it does work tested it many times

     – Masivuye Cokile Mar 09 '17 at 10:11
  • @RiffazStarr can u just copy and paste my code on a new blank page you will see its working as it should be, that backdrop u added is a problem – Masivuye Cokile Mar 09 '17 at 10:21
0

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

Essi
  • 141
  • 8
  • Well i just implemented it and it worked fine? Did you try to use the Popup Boxes example with a window.location.href = "http://www.google.com"; in one of the if-branches? – Essi Mar 09 '17 at 09:47
0

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>
thakur.B
  • 86
  • 7