Question

我正在尝试使用jquery处理多个表单。我可以处理多个按钮，但我无法弄清楚它是否适用于多种形式。以下是不同按钮的逻辑，我需要为表单编辑它。 HTML

<form id="myForm" action="/charge" method="post">
    <input type="button" id="buySocks" value="Buy Socks for $10">
    <input type="button" id="buyShirts" value="Buy Shirts for $30">
    <input type="button" id="buyPants" value="Buy Pants for $50">
    <input type="hidden" id="stripeToken" name="stripeToken" />
    <input type="hidden" id="stripeEmail" name="stripeEmail" />
</form>

Jquery：

var handler = StripeCheckout.configure({
    key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
    token: function(token) {
            // append your token id and email, submit your form
          $("#stripeToken").val(token.id);
        $("#stripeEmail").val(token.email);
        $("#myForm").submit();
    }
  });

  $('#buySocks').on('click', function(e) {
        $("#product").val("socks");
        openCheckout("Buy socks for $10", 1000);
    e.preventDefault();
  });
  $('#buyShirts').on('click', function(e) {
    $("#product").val("shirts");
    openCheckout("Buy shirts for $30", 3000);
    e.preventDefault();
  });
  $('#buyPants').on('click', function(e) {
    $("#product").val("pants");
    openCheckout("Buy pants for $50", 5000);
    e.preventDefault();
  });

  function openCheckout(description, amount)
  {
    handler.open({
      name: 'Demo Site',
      description: description,
      amount: amount
    });
  }
  // Close Checkout on page navigation
  $(window).on('popstate', function() {
    handler.close();
  });

我需要实现的是能够处理：

<form id='form1' action='/url1' method='post'>
<input id='button1' type='submit' value='enroll'>
</form>

<form id='form2' action='/url2' method='post'>
<input id='button2' type='submit' value='enroll'>
</form>

每个表单都需要获得stripeToken，因为表单需要与stripe.com进行通信。每种形式都有不同的计划类型，价格和描述。两种表格都在同一页面上。请指教。

编辑：

单个表单的条带自定义按钮位于下方。

<form id="myForm" action="/charge" method="POST">
    <input type="hidden" id="stripeToken" name="stripeToken" />
    <input type="hidden" id="stripeEmail" name="stripeEmail" />
    <button id="customButton">Purchase</button>

</body>
<script type="text/javascript">
var handler = StripeCheckout.configure({
    key: '{{ key }}',
    image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
    locale: 'auto',
    token: function (token) {
        // Use the token to create the charge with a server-side script.
        // You can access the token ID with `token.id`
        $("#stripeToken").val(token.id);
        $("#stripeEmail").val(token.email);
        $("#myForm").submit();
    }
});

$('#customButton').on('click', function (e) {
    // Open Checkout with further options
    handler.open({
        name: 'Stripe.com',
        description: '2 widgets',
        amount: 500
    });
    e.preventDefault();
});

// Close Checkout on page navigation
$(window).on('popstate', function () {
    handler.close();
});
</script>

jquery在同一页面上处理多个表单

0 个答案: