Jquery 形式 serialize() 仅返回部分字段

Question

I've got a problem with the form's serialize() function in jQuery. When I try to submit my serialized form via AJAX, serialize() returns values of few fields. Some values are not retained.

Perhaps there's a problem with my HTML outline or jQuery:

<div id="register" class="row callout panel">
  <div class="large-12 medium-12">
    <form name="signupform" id="signupform" method="post" data-abide="ajax">
      <div class="row text-center">
        <span class="radius"> <span class="fi-clipboard-pencil medium"></span> Please Register </span>
      </div>
      <br>
      <div class="large-5 medium-8 columns small-centered large-centered">
        <div class="row">                  
          <div class="large-12 columns">
            <label for="user">Faculty Name <small>required</small>
              <input type="text" id="user" placeholder="Please Type your Full Name" required>
              </label>
              <small class="error">This field is required.</small>
            </div>

            <div class="large-11 columns">
              <label for="username">User Name <small>required</small>
                <input type="text" id="username" placeholder="Please enter your RGUKT email id" required pattern="^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@(rgukt.in|RGUKT.IN)">
              </label>                    
              <small class="error">UserName must be RGUKT Email id.</small>
            </div>
            <div class="large-1 columns"> &nbsp;
              <label for="user-result">
              <span id="user-result"></span>
              </label>                    
            </div> 

            <div class="large-12 columns">
              <label for="password">Password <small>required</small>
                <input type="password" id="password" placeholder="Choose a strong password." name="password" required>
              </label>
              <small class="error">Must be at least 8 characters with 1 capital letter, 1 number, and one special character.</small>
            </div>

            <div class="large-12 columns">
              <label for="confirmPassword">Confirm Password <small>required</small>
                <input type="password" id="confirmPassword" placeholder="Again type your password." name="confirmPassword" required data-equalto="password">
              </label>
              <small class="error">Passwords must match.</small>
            </div>
          </div>

          <div class="row">
           <div class="large-6 columns">
            <div class="row collapse">
              <label for="dept">Department <small>required</small>
                <select id="dept" class="" required>
                  <option value="">Select your Department </option>
                  <option value="CHE">Chemical Engg.</option>
                  <option value="CSE">Computer Science Engg.</option>
                  <option value="CE">Civil Engg.</option>
                  <option value="ECE">Electronics & Communications Engg.</option>
                  <option value="ME">Mechanical Engg.</option>
                  <option value="MME">Material Science & Metallurgical Engg.</option>
                </select>
              </label>
              <small class="error">Choose Department.</small>
            </div>
          </div>
          <div class="large-6 columns">
            <div class="row collapse">
              <label for="campus">RGUKT Campus <small>required</small>
                <select id="campus" class="" required>
                  <option value="">Select your Campus </option>
                  <option value="BAS">Basara</option>
                  <option value="NUZ">Nuzvid</option>
                  <option value="RKV">R K Valley</option>
                </select>
              </label>
              <small class="error">Choose RGUKT Campus.</small>
            </div>
          </div>
        </div>

        <div class="row">
          <div class="large-6 columns">
            <div class="row collapse">
              <label for="eid">Employee ID 
                <input type="text" id="eid" placeholder="Employee ID." name="eid">
              </label>
            </div>
          </div>                                    
          <div class="large-6 columns">
            <div class="row collapse">
              <label for="phone">Mobile No. <small>required</small>
                <input type="tel" id="phone" placeholder="Contact Number" name="phone" required>
              </label>
            <small class="error">must be a reachable mobile.</small>
          </div>
        </div>
      </div>

      <div class="row">
        <div id="show" class="">
          <button type="submit" class="button">Complete Signup</button>
        </div>
      </div>     
    </div>

  </form>            
</div>

The jQuery is as follows.

$('#signupform').on('valid.fndtn.abide', function() {

  signupData = $('#signupform').serialize();
  alert(signupData);
  $.ajax({
    url: 'include/signup.php',
    type: 'POST',
    data: signupData,
    cache: false,
    contentType: false,
    success: function (returndata) {
      alert('success');
      alert(returndata);
    }
  });   
  return false;
});

Answer 1

Your input fields lack name , this for example:

<input type="text" id="user" placeholder="Please Type your Full Name" required>

form the docs :

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

Answer 2

some of the inputs are missing name attributes.

From Documentation :

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

Answer 3

I'd like to add that serializeObject() function skips input fields if their name contains dashes. For instance, <input type="test" name="fill-me"> is going to be missed.