如何使用javascript提交一个表单onclick另一个表单

Question

我有两种形式，一种是贝宝按钮，另一种是姓名电子邮件等。 我希望在单击贝宝按钮时提交带有详细信息的表单，如果没有详细信息，则不要将表单提交到贝宝并显示输入错误。 Javascript 是我正在努力解决的问题。

到目前为止的 HTML5：

<form id="info_on_pay" action="" method="post" target="">
          First name:<br>
          <input type="input" name="First_Name" id="First_Name"><br>
          Last name:<br>
          <input type="input" name="Last_Name" id="Last_Name"><br>
          Email:<br>
          <input type="input" name="Email" id="Email"><br>
          Target URL:<br>
          <input type="input" name="Target" id="Target">
        </form>
      </div>
        <div id="price_area"><h1>£10</h1></div>
        <div id="button_placement">
      <form id="pay_button" action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top" onclick="return click();">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="KG8PZVUP3AGVE">
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>

Javascipt 文件：

function Function() {
  if ("pay_button").onclick();
  document.getElementById("info_on_pay").submit();
};

Answer 1

如果您使用 jQuery，解决方案将非常简单（它简化了执行 AJAX 请求）：

$("input[name=submit]").on("click", function(){

    var pay_form = $("#pay_button");  // payment form
    var inf_form = $("#info_on_pay"); // form we want to send before payment
    var data = inf_form.serialize();  // form data ready to send

    var ajax = $.post("info_on_pay.php", data); // sending data to script info_on_pay.php

    ajax.done(function(){     // after ajax-request sucessfully complete...
       pay_form[0].submit();  // ...we submit actual payment form
    });

    return false; // it prevents default payment form submitting
});

如您所见，我们拦截了对 paypal 按钮的所有点击，并执行将表单数据发送到特殊脚本的 ajax-request。此脚本应处理并保存第一个表单中的订单详细信息并返回有效答案（甚至为空）。