阻止MVC視圖提交

我正在嘗試將支付API集成到我的MVC 5 asp.net C＃應用程序中。阻止MVC視圖提交

第一部分涉及在不提交表單的情況下從該API獲取「標記」。

我對mvc比較陌生，我無法得到這個工作。

我的標記的這一部分：

@using (Html.BeginForm("NewCard", "Payments", FormMethod.Post, new { enctype = "multipart/form-data" })) 
{ 
<form action="" method="POST" id="payment-form"> 
    <span class="payment-errors"></span> 

    <div class="form-row"> 
     <label> 
      <span>Card Number</span> 
      <input type="text" size="20" data-stripe="number" value="4242424242424242"/> 
     </label> 
    </div> 

    <div class="form-row"> 
     <label> 
      <span>CVC</span> 
      <input type="text" size="4" data-stripe="cvc" value="1223"/> 
     </label> 
    </div> 

    <div class="form-row"> 
     <label> 
      <span>Expiration (MM/YYYY)</span> 
      <input type="text" size="2" data-stripe="exp-month" value="10" /> 
     </label> 
     <span>/</span> 
     <input type="text" size="4" data-stripe="exp-year" value="2022"/> 
    </div> 

    <button type="submit">Submit Payment</button> 
</form> 
} 

$('#payment-form').submit(function (event) { 
    var $form = $(this); 

    // Disable the submit button to prevent repeated clicks 
    $form.find('button').prop('disabled', true); 

    Stripe.card.createToken($form, stripeResponseHandler); 
    // Prevent the form from submitting with the default action 
    event.preventDefault();   //i added this is! 
    return false; //from the sample code! 
});

形式仍然提交/回發。

我在做什麼錯了？

來源

2016-02-24 Andrew Simpson

您的HTML無效（嵌套<form>元素），外表正在提交。拆下內

<form action="" method="POST" id="payment-form">

標籤，如果你想引用一個id（你可以只使用$('form').submit(function (event) {）然後改變外部形狀，以

@using (Html.BeginForm("NewCard", "Payments", FormMethod.Post, new { id = "payment-form", enctype = "multipart/form-data" }))

來源

2016-02-24 10:02:33

你的腳本現在會處理這個 - 你的'返回false ;'會阻止默認提交表單（並且你不需要'event.preventDefault（）;'）。以前，腳本只處理（無效）內部表單，並沒有做任何事情來阻止外部表單的默認提交） –

嗨，在設置了一個斷點後，我可以看到我的腳本沒有被調用。我可以添加一個函數來調用'Html.BeginForm'位以在提交之前調用我的函數（然後它會停止提交嗎？） –

您是否已將'new {id =「payment-form」}添加到'BeginForm ）'？如果你在我的答案中做出了修改，那麼你顯示的代碼將會正常工作 –

阻止MVC視圖提交

回答

相關問題