Laravel CRUD中Ajax jQuery提交按钮失效问题求助

问题情况 #

填写表单字段后提交无响应，控制台和网络面板未显示任何错误；尝试将按钮改为<input type="submit">后依然无法提交。

表单代码（create.blade.php） #

<form method="POST" class="create_form" id="form" action="{{ route('details.store') }}" enctype="multipart/form-data"> 
  @csrf 
  <!-- 原代码直接使用<tr>缺少<table>包裹，属于无效HTML结构，已修正 -->
  <table>
    <tr>
      <td>Name</td>
      <td>
        <input type="text" name="name">
      </td>
    </tr>
    <tr>
      <td>Age</td>
      <td>
        <input type="text" name="age">
      </td>
    </tr>
    <tr>
      <td>Address</td>
      <td>
        <input type="text" name="address">
      </td>
    </tr>
    <tr>
      <td>Contact</td>
      <td>
        <input type="text" name="contact">
      </td>
    </tr>
    <tr>
      <td>Email</td>
      <td>
        <input type="text" name="email">
      </td>
    </tr>
    <tr>
      <td>Gender:</td>
      <td>
        <input type="radio" name="gender" value="Male" checked>Male
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <input type="radio" name="gender" value="Female">Female
      </td>
    </tr>
    <tr>
      <td>Qualification </td>
      <td>
        <select name="qualification">
          <option value="SSC">SSC</option>
          <option value="HSC">HSC</option>
          <option value="UG">UG</option>
          <option value="PG">PG</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>Hobbies:</td>
      <td>
        <input type="checkbox" name="hobbies[]" value="Trading">Trading
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <input type="checkbox" name="hobbies[]" value="Games">Games
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <input type="checkbox" name="hobbies[]" value="Music">Music
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <input type="checkbox" name="hobbies[]" value="Swimming">Swimming
      </td>
    </tr>
    <tr>
      <td>Profile Picture</td>
      <td>
        <input type="file" name="profilepic">
      </td>
    </tr>
    <tr>
      <td>Signature</td>
      <td>
        <input type="file" name="signature">
      </td>
    </tr>
    <tr>
      <td>
        <!-- 原按钮为type="button"，无法触发submit事件，已改为submit -->
        <button type="submit" class="save_create">Save</button>
      </td>
      <td>
        <button type="button" class="back">Back</button>
      </td>
    </tr>
  </table>
</form>

原Ajax代码 #

$(document).on('submit', '.create_form', function(event) {
    event.preventDefault();
    var data = $(this).serialize();
    $.ajax({
        url: "{{ route('details.store') }}",
        data: data,
        type: "POST",
        dataType: "json",
        success: function(response) {
            window.location.href = ("{{ route('details.index') }}");
        },
        error: function(error) {
            console.log("Errors :", error);
        }
    });
});

核心问题与修复方案 #

1. 按钮类型导致submit事件未触发 #

原按钮使用type="button"，不会触发表单的submit事件，因此Ajax监听代码根本没执行。

• 修复：将Save按钮的type改为submit（如上述修改后的表单代码）；或者保留type="button"，修改JS监听click事件：

$(document).on('click', '.save_create', function(event) {
    event.preventDefault();
    var form = $(this).closest('.create_form');
    // 后续Ajax逻辑...
});

2. 无效HTML结构影响表单解析 #

表单内直接嵌套<tr>标签，缺少外层<table>，属于无效HTML结构，浏览器无法正确解析表单元素，导致提交功能异常。

• 修复：将所有<tr>包裹在<table>标签内（如上述修改后的表单代码）。

3. 文件上传的Ajax处理错误 #

表单包含文件上传字段，且设置了enctype="multipart/form-data"，但serialize()无法序列化文件数据，会导致请求数据不完整甚至失败。

• 修复：改用FormData处理表单数据，并设置Ajax的processData和contentType为false：

$(document).on('submit', '.create_form', function(event) {
    event.preventDefault();
    var data = new FormData(this);
    $.ajax({
        url: "{{ route('details.store') }}",
        data: data,
        type: "POST",
        dataType: "json",
        processData: false,
        contentType: false,
        success: function(response) {
            window.location.href = "{{ route('details.index') }}";
        },
        error: function(error) {
            console.log("Errors :", error);
        }
    });
});

4. 额外检查点 #

• 确认jQuery已正确引入页面，代码可包裹在$(document).ready(function(){ ... })内确保DOM加载完成后执行；
• 查看页面源码确认route('details.store')生成的后端URL正确；
• 后端接口需支持multipart/form-data格式请求，并正确处理文件上传逻辑。

内容的提问来源于stack exchange，提问作者Pranav Sompura