JQuery $('form').serialize() produces empty results

Question

fiddle: 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 code

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

and I'm always getting empty str. Any ideas?

Answer 1

add name in input and select

For a form element's value to be included in the serialized string, the element must have a name attribute.

$(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>

Answer 2

The issue is because none of your input elements, ie. the input, select, textarea etc., have name attributes.

These are required to make the HTML valid, and are also what the serialize() method uses as the keys to associate the values to.

Add name attributes on the HTML fields and your JS code will work fine.