Javascript Ajax表单没有'；I don’别老呆在书页上

这件事让我心烦意乱，但现在是我寻求帮助的时候了

我的表单在模态中，这是我的脚本

$(function() {
    $("#applyForm").on('submit' , function(e) {
        $.ajax({ 
            type: 'POST',
            url: $("#applyForm").attr("action"),
            data: $('#applyForm').serialize(),
            success: function(data){
              alert('successfully submitted')},
            error: function(data){
              alert('something went wrong')
          }

     });
});
});

一切正常，它启动脚本并向后端提交一条成功消息，但一旦关闭弹出的成功消息，它就会重定向到“立即应用”页面

我如何在不破坏提交的情况下防止这种情况，因为我已经尝试返回false和preventDefault

这是表格

<form action="/apply-now/" enctype="multipart/form-data" id="applyForm" method="post" name="applyForm" class="form">
<input name="is_data_submitted" type="hidden" value="1"> 
<input name="listing_id" type="hidden" value="{$listing_id}">

MY FORM DATA

<button type="submit" id="submit" class="btn btn-warning">Apply now</button>

我的表单数据
立即申请

任何帮助都将不胜感激

谢谢

---

J

如果您不想重新加载页面，请尝试以下操作：

$(function() {
    $("#applyForm").on('submit' , function(e) {
       e.preventDefault();
       //... the rest of your code
       //or add return false;
       return false;
    });
});

当你捕捉到实际的提交过程时，“正常”过程将发生，你不想这样做。因此，您必须通过

e.preventDefault（）

来停止它。您可以阅读有关它的文档

或者看看这里的一个例子，它保持在同一页上

$（“#表单”）.submit（函数（e）{
e、 预防默认值（）；
$（this）.append（“页面停留在这里”）；
})

---

如果不想重新加载页面，请尝试以下操作：

$(function() {
    $("#applyForm").on('submit' , function(e) {
       e.preventDefault();
       //... the rest of your code
       //or add return false;
       return false;
    });
});

当你捕捉到实际的提交过程时，“正常”过程将发生，你不想这样做。因此，您必须通过

e.preventDefault（）

来停止它。您可以阅读有关它的文档

或者看看这里的一个例子，它保持在同一页上

$（“#表单”）.submit（函数（e）{
e、 预防默认值（）；
$（this）.append（“页面停留在这里”）；
})

---

表单提交了两次。一次是表单操作，另一次是ajax调用。如果您希望只发送ajax调用，那么在ajax函数之外返回false就可以了

---

该表格已提交两次。一次是表单操作，另一次是ajax调用。如果您希望只发送ajax调用，那么在ajax函数之外返回false就可以了

我希望这能奏效

1) <button type="submit" id="submit" class="btn btn-warning">
   Apply  now</button> with preventDefault method
2) button type="button" id="submit" class="btn btn-warning">Apply now</button>
   change the type="submit" to type="button"

1）
使用默认方法立即应用
2） button type=“button”id=“submit”class=“btn btn warning”>立即应用
将type=“submit”更改为type=“button”

范例

<form action="/apply-now/" enctype="multipart/form-data" id="applyForm" method="post" name="applyForm" class="form">
<input name="is_data_submitted" type="text" value="1"> 
<input name="listing_id" type="text" value="999">
 MY FORM DATA
 <button type="button" id="submit" class="btn btn-warning">Apply now</button>
 </form>

$(document).ready(function(){
$("#applyForm").on('click','#submit' , function() {
alert("Click check")
console.log($('#applyForm').serialize())
});
});

我的表单数据
立即申请
$（文档）.ready（函数（）{
$（“#applyForm”）。在（'单击'，'提交'，函数（）上{
警报（“单击检查”）
console.log（$（'#applyForm'）.serialize（））
});
});

我希望这能奏效

1) <button type="submit" id="submit" class="btn btn-warning">
   Apply  now</button> with preventDefault method
2) button type="button" id="submit" class="btn btn-warning">Apply now</button>
   change the type="submit" to type="button"

1）
使用默认方法立即应用
2） button type=“button”id=“submit”class=“btn btn warning”>立即应用
将type=“submit”更改为type=“button”

范例

<form action="/apply-now/" enctype="multipart/form-data" id="applyForm" method="post" name="applyForm" class="form">
<input name="is_data_submitted" type="text" value="1"> 
<input name="listing_id" type="text" value="999">
 MY FORM DATA
 <button type="button" id="submit" class="btn btn-warning">Apply now</button>
 </form>

$(document).ready(function(){
$("#applyForm").on('click','#submit' , function() {
alert("Click check")
console.log($('#applyForm').serialize())
});
});

我的表单数据
立即申请
$（文档）.ready（函数（）{
$（“#applyForm”）。在（'单击'，'提交'，函数（）上{
警报（“单击检查”）
console.log（$（'#applyForm'）.serialize（））
});
});

您没有阻止默认表单提交行为。要进行修复，请在Ajax调用之前添加以下内容：

e.preventDefault();

额外提示：为了确保表单每次“提交”点击只提交一次，请停止点击事件在DOM中的传播

紧跟在默认值之后，放置以下内容：

e.stopPropagation();

---

您没有阻止默认表单提交行为。要进行修复，请在Ajax调用之前添加以下内容：

e.preventDefault();

额外提示：为了确保表单每次“提交”点击只提交一次，请停止点击事件在DOM中的传播

紧跟在默认值之后，放置以下内容：

e.stopPropagation();

---

e.preventDefault（）

将执行此操作。

e.preventDefault（）

将执行此操作。单击“应用”时，表单显示其将成功提交，但在“管理”面板中进行检查时，没有实际提交表单。。这就是我无法理解的（谢谢！当点击“应用”时，表格上写着它将成功提交，但是当在管理面板中检查时，实际上没有提交任何表格。。这就是我无法理解的地方。：（谢谢！