Question

我有一个由Rails 4制作的注册表单。我想在Jquery中取消提交回调（以整合条带）但它仍然被提交并转到/ users并且我不确定原因。

表格（我删除了大部分字段为简短）：

<form class="new_user ng-pristine ng-valid" id="new_user" action="/users" accept-charset="UTF-8" method="post" _lpchecked="1"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="JLtFvRePLhqwykqCOatmP3QnHTwkNxeXMsEFe8d1rtnqFCxkXCq85M6ZVi00tWEN+jP5ElwLu+BYSMtIPLj/Ng==">
      <div class="">
        <div class="field-box">
          <span class="field-title ng-binding">
            <label for="user_name">Name</label>
          </span>
          <div class="float-left">
            <input class="form-control" type="text" name="user[name]" id="user_name" style="cursor: auto; background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==&quot;); background-attachment: scroll; background-position: 100% 50%; background-repeat: no-repeat;">
          </div>
        </div>
      </div>
      <input type="submit" name="commit" value="Create my account" class="btn btn-primary" id="create-user-submit">
</form>

咖啡脚本停止提交：

jQuery ->
  Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'))
  subscription.setupForm()

subscription =
  setupForm: ->
    $('#new_user').submit ->
      $('#create-user-submit').attr('disabled', true)
        subscription.processCard()

        #Shouldn't this prevent the submission?
        false

  processCard: ->
    #this alert works
    alert("processCard is run")
    Stripe.createToken(card, subscription.handleStripeResponse)

  handleStripeResponse: (status, response) ->
    #this alert doesn't show up because the form is submitted before the response comes back
    alert("handleStripeResponse")
    if status == 200
      #$('#subscription_stripe_card_token').val(response.id)
      #$('#new_subscription')[0].submit()
    else
      alert(response.error.message)
      #$('#stripe_error').text(response.error.message)
      #$('input[type=submit]').attr('disabled', false)

如果您愿意，可以使用Javascript：

(function() {
  var subscription;

  jQuery(function() {
    Stripe.setPublishableKey($('meta[name="stripe-key"]').attr('content'));
    return subscription.setupForm();
  });

  subscription = {
    setupForm: function() {
      return $('#new_user').submit(function() {
        $('#create-user-submit').attr('disabled', true);
        if ($('#card_number').length) {
          alert("card_number is > 0");
          subscription.processCard();
          return false;
        }
      });
    },
    processCard: function() {
      var card;
      card = {
        number: $('#card_number').val(),
        cvc: $('#card_code').val(),
        expMonth: $('#card_month').val(),
        expYear: $('#card_year').val()
      };
      alert("processCard is run");
      return Stripe.createToken(card, subscription.handleStripeResponse);
    },
    handleStripeResponse: function(status, response) {
      alert("handleStripeResponse");
      if (status === 200) {

      } else {
        return alert(response.error.message);
      }
    }
  };

}).call(this);

Answer 1

使用preventDefault。像这样......

setupForm: ->
  $('#new_user').submit (event)->
    event.preventDefault()

在JS中取消RoR4表单提交回调，Stripe无法正常工作

1 个答案: