阻止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视图提交

回答

相关问题