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

【问题标题】：Sending two forms after button click and run php in background单击按钮后发送两个表单并在后台运行php
【发布时间】：2022-01-12 01:56:20
【问题描述】：

我创建了这个网站并与 payfast 集成，它运行良好。但现在我想在 place order button 上执行另一个 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 提交第一个。

【问题讨论】：

在 Stackoverflow，我们不提供教程，也不为您编写完整的功能，从无到有。如果您对 AJAX 一无所知，则需要花一些时间研究它 - 我们无法在一篇 Stackoverflow 帖子中教您。如果我们只是给你所有的代码，你还不够理解。相反，请显示您尝试过的 AJAX 代码并具体说明您遇到的问题，然后我们可以帮助您。另外，请确保您提供的代码是您的问题的minimal reproducible example - 我们不想要一堆无关紧要的东西。另见How to Ask。谢谢。
@ADyson 我已经编辑了代码，请检查上面。
谢谢。但这不包括您的 AJAX 尝试或任何有用的问题描述。请重新阅读所要求的内容。
@ADyson 我已经添加了我尝试过的 ajax，它执行但我没有在其他表单上获得价值
1) 您需要使用 preventDefault() 来停止表单同时执行默认的回发行为（从而刷新页面） - 请参阅 api.jquery.com/event.preventdefault 。 2) 不清楚第一个表单是否也有一个带有class="submit" 的按钮，因为你没有显示。无论如何，这段代码只是处理用户点击第二个表单上的提交。要使其也提交第一个表单，您需要编写第二个 AJAX 请求来提交该表单。 3）你需要摆脱onclick="submitForms()"位。

标签： javascript html jquery ajax forms

【解决方案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();
    });
  }
});

【讨论】：

仅供参考我不知道你在哪里定义了time 或date，所以我不知道if 语句是否会按预期工作。另外，我不知道您的 form1 中有哪些字段，但您可以只使用 jQuery 的 .serialize() 来收集所有表单数据，而不是像那样手动构建 dataString。如果没有要从提交中排除的字段，那么这将更有意义（它还会自动确保所有数据都正确地进行了 url 编码，这将是一件好事）。
表单上有上述ID的输入字段，所以.serialize()可以做，但让我先手动试试看
没问题。如果您使用serialize()，请确保所有字段都具有正确的name 属性，而不是ids。

【解决方案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>

【讨论】：