单击按钮后发送两个表单并在后台发送运行 php

Question

我创建了这个网站并与 payfast 集成，效果很好。但现在我想在 下订单按钮 上执行另一个 php 脚本，它将详细信息输入 db 这是我的代码很长....我对Ajax或javascript一无所知！！请帮助

<form id="form1" action="payment.php" method="POST">
           some stuff...    
            </form>

<?php
$htmlForm = '<form action="https://'.$pfHost.'/eng/process" method="post" id="form2">';
  
$htmlForm .= '<input type="submit" id="submit" name="submit" class="btn btn-primary btn-lg btn-flat" value="PLace Order" onclick="submitForms()"></form>';
?>

            <?php
           echo" 
            ".$htmlForm."
          </div>";
                }
                else{
                  echo '...';      
                }
              ?> 
          
<script>
submitForms = function() {
   document.getElementById("form1").submit();
   document.getElementById("form2").submit();
}
</script>

 $(function() {
  $(".submit").click(function() {
      var uid = $("#uid").val();
        var prodtls = $("#prodtls").val();
        var fname = $("#fname").val();
        var amnt = $("#amnt").val();
        var mail = $("#mail").val();

  var dataString = 'uid='+ uid + '&prodtls=' + prodtls + '&fname' +fname + '&amnt' + amnt + '&mail' + mail;

if(time=='' || date=='')
{
  $('.success').fadeOut(200).hide();
  $('.error').fadeOut(200).show();
}
else
{
  $.ajax({
    type: "POST",
    url: "payment.php",
    data: dataString,
    success: function(){
     $('.success').fadeIn(200).show();
     $('.error').fadeOut(200).hide();
    }
  });
}
return false;
});
});

我尝试了我发现的 ajax，但是，它从来没有用过。检查我的代码末尾！我需要的是 payment.php 将在后台执行，同时将用户引导至 payfast

我只想通过 AJAX 提交第一个。

Answer 1

你的尝试没有多大意义，因为它似乎没有针对第一个表单（你说你想要的）并且可能不会阻止默认的回发行为。

据我了解，您希望无论用户点击提交哪个表单，代码实际上都会通过 AJAX 提交第一个表单，然后通过标准回发提交第二个表单。

这应该可以完成工作：

HTML:

<form id="form1" class="doubleForm" action="payment.php" method="post">
    <input type="submit" id="submit1" name="submit" class="btn btn-primary btn-lg btn-flat" value="Submit">
</form>

<form id="form2" class="doubleForm" action="https://example.com/eng/process" method="post">';
  <input type="submit" id="submit2" name="submit" class="btn btn-primary btn-lg btn-flat" value="Place Order">
</form>

JavaScript:

//handle submission of both forms
$(".doubleForm").submit(function(event) {
  event.preventDefault(); //stop standard postback

  var uid = $("#uid").val();
  var prodtls = $("#prodtls").val();
  var fname = $("#fname").val();
  var amnt = $("#amnt").val();
  var mail = $("#mail").val();
  var dataString = 'uid='+ uid + '&prodtls=' + prodtls + '&fname' +fname + '&amnt' + amnt + '&mail' + mail;

  if(time == '' || date == '')
  {
    $('.success').fadeOut(200).hide();
    $('.error').fadeOut(200).show();
  }
  else
  {
    //submit first form via AJAX
    var request = $.ajax({
      type: "POST",
      url: "payment.php",
      data: dataString
    });

    request.done(function(response) {
      $('.success').fadeIn(200).show();
      $('.error').fadeOut(200).hide();
    
      //now the first form is submitted and server has responded, we can trigger "normal" (non-AJAX) submission of second form
      document.querySelector("#form2").submit();
    });
  }
});

Answer 2

所以这实际上使用 .serialize() 效果很好。感谢@ADyson 的提醒只是稍微调整了一下，虽然我在 js

方面没有经验

<script type="text/javascript">
    $(function(){
        $("#submit2").click(function(){
            var dataString = $("#form1").serialize();
            $.ajax({
                type: "POST",
                url: "payment.php",
                data: dataString,
                success: function(data)
                {
                    alert('Success!');
                    $("#form1")[0].reset();
                }
            });
        });
    });
</script>

单击按钮后发送两个表单并在后台发送运行 php

Sending two forms after button click and run php in background

html

javascript

forms

ajax

jquery

单击按钮后发送两个表单并在后台发送 运行 php

Sending two forms after button click and run php in background

html

javascript

forms

ajax

jquery

单击按钮后发送两个表单并在后台发送运行 php