模态框表单提交获取JSON格式字段值问题求助

问题原因 #

jQuery的serializeArray()方法必须依赖表单元素的name属性才能捕获字段数据，你的输入框都没有设置name，所以序列化后返回空数组。

修复步骤 #

1. 给表单里的每个<input>添加name属性，属性值和字段标识一致：

<div class="modal-body">
  <form id="myform">
    <div class="form-group">
      <label for="username">Username</label>
      <input type="text" name="username" placeholder="Username" class="form-control">
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" name="password" placeholder="Password" class="form-control">
    </div>
  </form>
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-dismiss="modal">Close</button>
  <button type="button" class="btn btn-sm btn-outline-secondary" onclick="addToFirebase()">Save changes</button>
</div>

2. 优化JavaScript函数，把serializeArray()返回的数组转换成更易用的键值对形式JSON：

function addToFirebase(){
  alert('Adding to firebase');
  // 先序列化得到数组，再转换为键值对对象
  var formArray = $("#myform").serializeArray();
  var formDataObj = {};
  formArray.forEach(item => {
    formDataObj[item.name] = item.value;
  });
  var formData = JSON.stringify(formDataObj);
  console.log(formData);
}

效果验证 #

现在点击"Save changes"按钮，控制台会输出类似这样的JSON结构：

{"username":"你输入的用户名","password":"你输入的密码"}

内容的提问来源于stack exchange，提问作者Mohit H