html - 即使在 laravel 中使用 preventDefault 也无法提交页面
问题描述
即使我使用了 preventDefault,我也无法提交表单(页面已刷新且未执行任何操作)我的表单输入是动态填写的,这是我的代码。
HTML
<div class="modal-body">
<form id="update_form">
<!-- loaded below -->
</form>
</div>
填写我的表单数据的另一个请求
@csrf
<div class="form-row">
<div class="form-group col-md-6">
<input type="hidden" name="request_type" value="{{RegisterTypesNames::Faculty}}">
<label>University</label>
<select name="university" class="custom-select" id="university{{$action}}">
<option selected value="1">University of Cansas</option>
</select>
</div>
<div class="form-group col-md-6">
<label>Faculty</label>
<input type="text" class="form-control" name="faculty" id="faculties{{$action}}">
</div>
<div class="form-group col-md-6">
<label>Init</label>
<input type="text" class="form-control" name="short_name" id="short_names{{$action}}">
</div>
</div>
<button type="submit" class="btn btn-primary"><span class="fa fa-save"></span> Save</button>
和jquery代码
$('#update_form').submit(function (e) {
$.ajax({
url: '/update_data',
type: "POST",
data: $('#update_form').serialize(),
dataType: "json",
success: function (data) {
console.log(data.result);
}
});
e.preventDefault();
});
注意:我使用多个像这样的部分形式,所有其他的都很好
解决方案
即使我使用了 preventDefault,我也无法提交表单(页面已刷新且未执行任何操作)
解释:“page refreshed”和“used preventDefault”语句表明问题在于内部的代码$("#id").submit(
没有触发并且页面的默认提交正在启动,因此“page refreshed”。
由于没有触发 jquery 事件,这可能意味着脚本运行时 HTML 不存在。这通常可以通过放入 doc.ready 来处理;OP 表示它已经在 doc.ready 中。
另一种方法是使用事件委托。虽然不清楚代码是在生成 HTML 之前运行还是在之后添加 HTML(细微差别)。
事件委托的解决方案是使用:
$(document).on("submit", "#update_form", function(e) {
e.preventDefault();
$.ajax({...
});