0

即使我使用了 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();
});

注意：我使用多个像这样的部分形式，所有其他的都很好

4

1 回答 1

0

即使我使用了 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({...

});
于 2020-05-05T13:33:39.377 回答