如何显示弹出窗口然后发送PHP表单？

Question

我有一个简单的PHP的形式和它的操作链接是另一个PHP文件/页面。 我想在发送PHP表单到它的动作页面之前显示一个弹出窗口。 我试过onsubmit，onclick但没有什么工作。

这是我的形式

<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> 

这种形式的金额值发送到actions.php

但发送此之前，我想说明一个poup显示“编辑”，“继续 “此消息‘你打算做一个在线支付，点击‘编辑’，然后再继续审查数据，或单击‘继续’确认付款的细节。’

如果用户点击'编辑'应停止表单提交，并且应该关闭弹出窗口。

如果用户点击 '继续' 的形式应提交数据给action.php的

我想：

<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> 

这不工作..

我试过

<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()"> 

也没有工作..

两个刚去actions.php

我怎么能显示弹出，然后发送基于选择的形式？

Answer 1

基本上我看到实现这一目标是使用自举模式的最佳途径，所以你需要做的是从提交停止形式单击按钮时，然后使用jQuery，那么你形成将有两个按钮，一个编辑，然后将有data-dismiss="modal"这将直接关闭模式，并显示后面的表格显示引导模式，然后继续按钮点击时，你只会迫使形式提交使用jquery以及$('form').submit();这告诉表单提交到表单动作。

$('document').ready(function(){ 
 
    
 
    \t $('#payBtn').on('click',function(e){ 
 
    \t \t e.preventDefault(); 
 
    \t \t $('#myModal').modal('toggle'); 
 
    
 
    \t }); 
 
    
 
    \t $('#continuebtn').on('click',function(){ 
 
    
 
    \t \t $('form').submit(); 
 
    \t }); 
 
    });

<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>

Answer 2

你可以使用JavaScript警告实现自己的目标。你的PHP不会直接调用其他的PHP，而是一个JavaScript方法，然后显示一个2按钮的警报。看看https://www.w3schools.com/js/js_popup.asp，因为它可能比我描述得更好。

最良好的祝愿，

ESSI

Answer 3

请检查该公司现在的工作。你不需要document.ready只需添加到js文件或标签！

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>