JQuery $（＆＃39; form＆＃39;）。serialize（）产生空结果

Question

小提琴：http://jsfiddle.net/a3f6ouqw/2/

<form method="POST" id="sampleForm" action="/">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email"
               class="form-control"
               id="exampleInputEmail1"
               aria-describedby="emailHelp"
               placeholder="Enter email">
          <small id="emailHelp"
                 class="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password"
               class="form-control"
               id="exampleInputPassword1"
               placeholder="Password">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2">
      <div class="form-group">
        <label for="dateControl">Date</label>
        <div class="input-group date"
               data-provide="datepicker">
          <input type="text"
                 class="form-control"
                 id="dateControl">
          <div class="input-group-addon">
            <span class="glyphicon glyphicon-th"></span>
          </div>
      </div>
    </div>
  </div>
  </div>
  <div class="row">
    <div class="col-md-2">
      <!-- Example of select picker -->
      <div class="form-group">
        <label for="selectControl">Type</label>
        <select class="selectpicker"
               id="selectControl">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          </select>
      </div>
    </div>
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input type="checkbox" class="form-check-input"> Check me out
    </label>
  </div>
  <button type="submit"
         class="btn btn-primary" id="sampleFormSubmitBtn">Submit</button>
</form>

Javascript代码

$(document).ready(function() {
    $("form").submit(function(e) {
        alert($("form").serialize());
        console.log(alert($("form").serialize()));
        e.preventDefault();
    });
});

我总是得到空的str。有什么想法吗？

Answer 1

问题是因为没有你的输入元素，即。 input，select，textarea等具有name属性。

这些是使HTML有效所必需的，也是serialize()方法用作关联值的键所必需的。

在HTML字段上添加name属性，您的JS代码将正常运行。

Answer 2

  

在name和input

中添加select

要使表单元素的值包含在序列化字符串中，该元素必须具有名称属性。

$(document).ready(function() {
    $("form").submit(function(e) {
        alert($("form").serialize());
        console.log(alert($("form").serialize()));
        e.preventDefault();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="sampleForm" action="/">
  <div class="row">
    <div class="col-md-4">
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input name="email" type="email"
               class="form-control"
               id="exampleInputEmail1"
               aria-describedby="emailHelp"
               placeholder="Enter email">
          <small id="emailHelp"
                 class="form-text text-muted">We'll never share your email with anyone else.</small>
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input name="password" type="password"
               class="form-control"
               id="exampleInputPassword1"
               placeholder="Password">
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-2">
      <div class="form-group">
        <label for="dateControl">Date</label>
        <div class="input-group date"
               data-provide="datepicker">
          <input name="dateControl" type="text"
                 class="form-control"
                 id="dateControl">
          <div class="input-group-addon">
            <span class="glyphicon glyphicon-th"></span>
          </div>
      </div>
    </div>
  </div>
  </div>
  <div class="row">
    <div class="col-md-2">
      <!-- Example of select picker -->
      <div class="form-group">
        <label for="selectControl">Type</label>
        <select name="selectpicker" class="selectpicker"
               id="selectControl">
          <option>Mustard</option>
          <option>Ketchup</option>
          <option>Relish</option>
          </select>
      </div>
    </div>
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input name="checkbox" type="checkbox" class="form-check-input"> Check me out
    </label>
  </div>
  <button type="submit"
         class="btn btn-primary" id="sampleFormSubmitBtn">Submit</button>
</form>