I have this form:

<form class="js-form">
   <input type="hidden" name="csrf_name" value="csrf5915b96bceb5e">
   <input type="hidden" name="csrf_value" value="b6de78b37c878cfb3cbe2b11edc86049">
   <div class="js-form-alerts">
   </div>
   <div class="js-form-autologin">
      <table class="table table-striped">
         <thead>
            <tr>
               <th>Email</th>
               <th>Password</th>
            </tr>
         </thead>
         <tbody id="table-body">
            <tr>
               <th> <input type="email" name="" value="" style=" border: 0; background: transparent;" class="form-control" id="email"> </th>
               <th>
                  <div class="form-group">
                     <div class="input-group"> <input type="password" name="" value="" style=" border: 0; background: transparent;" class="form-control" id="password"> <span class="input-group-btn"> <a href="#" class="btn btn-warning btn-flat"> <i class="fa fa-edit"></i> </a> <a href="#" class="btn btn-danger btn-flat"> <i class="fa fa-minus"></i> </a> <a href="#" class="btn btn-success btn-flat"> <i class="fa fa-plus"></i> </a> </span> </div>
                  </div>
               </th>
            </tr>
         </tbody>
      </table>
   </div>
   <div class="row">
      <div class="col-xs-12 col-sm-6">
         <div class="vert-pad">
            <button type="submit" id="submit" class="btn btn-block btn-lg btn-success">
            Update Emails
            </button>
         </div>
      </div>
      <div class="col-xs-12 col-sm-3 pull-right">
         <div class="vert-pad">
            <button type="button" class="btn btn-block btn-lg btn-link" data-dismiss="modal">Cancel</button>
         </div>
      </div>
   </div>
</form>

And this js:

$( "form" ).submit(function( event ) {
    console.log( $( this ).serializeArray() );
    event.preventDefault();
  });

But it only returns the csrf tokens twice. Any idea why this is happing and how can I fix it?

*Some text to stop this post been mostly code! *More text to stop this post been mostly code!

I have this form:

<form class="js-form">
   <input type="hidden" name="csrf_name" value="csrf5915b96bceb5e">
   <input type="hidden" name="csrf_value" value="b6de78b37c878cfb3cbe2b11edc86049">
   <div class="js-form-alerts">
   </div>
   <div class="js-form-autologin">
      <table class="table table-striped">
         <thead>
            <tr>
               <th>Email</th>
               <th>Password</th>
            </tr>
         </thead>
         <tbody id="table-body">
            <tr>
               <th> <input type="email" name="" value="" style=" border: 0; background: transparent;" class="form-control" id="email"> </th>
               <th>
                  <div class="form-group">
                     <div class="input-group"> <input type="password" name="" value="" style=" border: 0; background: transparent;" class="form-control" id="password"> <span class="input-group-btn"> <a href="#" class="btn btn-warning btn-flat"> <i class="fa fa-edit"></i> </a> <a href="#" class="btn btn-danger btn-flat"> <i class="fa fa-minus"></i> </a> <a href="#" class="btn btn-success btn-flat"> <i class="fa fa-plus"></i> </a> </span> </div>
                  </div>
               </th>
            </tr>
         </tbody>
      </table>
   </div>
   <div class="row">
      <div class="col-xs-12 col-sm-6">
         <div class="vert-pad">
            <button type="submit" id="submit" class="btn btn-block btn-lg btn-success">
            Update Emails
            </button>
         </div>
      </div>
      <div class="col-xs-12 col-sm-3 pull-right">
         <div class="vert-pad">
            <button type="button" class="btn btn-block btn-lg btn-link" data-dismiss="modal">Cancel</button>
         </div>
      </div>
   </div>
</form>

And this js:

$( "form" ).submit(function( event ) {
    console.log( $( this ).serializeArray() );
    event.preventDefault();
  });

But it only returns the csrf tokens twice. Any idea why this is happing and how can I fix it?

*Some text to stop this post been mostly code! *More text to stop this post been mostly code!

• javascript
• jquery
• html

Share Improve this question Follow edited May 12, 2017 at 17:05 Abdullah Seba asked May 12, 2017 at 16:54 Abdullah SebaAbdullah Seba 34422 gold badges66 silver badges1616 bronze badges 2

• What other values are you expecting? – Lennholm Commented May 12, 2017 at 16:58
• @MikaelLennholm Depends what the user entered in the email and password fields. – Abdullah Seba Commented May 12, 2017 at 17:00

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You haven't given the email and password inputs proper names, that's why the are excluded from the serialization.

Give those input elements the names you want them to be serialized with and you should be good.

Here is your original code in a JS Fiddle instance, and a corrected version with the name attributes filled in. The only differences are specified below:

Original Inputs

<input
    id="password"
    type="password" 
    value="my-password" 
    style=" border: 0; background: transparent;" 
    class="form-control"
/>
<!-- snip -->
<input 
    id="email"
    type="email" 
    value="[email protected]" 
    style=" border: 0; background: transparent;" 
    class="form-control"
/>

Corrected Inputs

<input
    id="password"
    type="password" 
    name="password"
    value="my-password" 
    style=" border: 0; background: transparent;" 
    class="form-control"
/>
<!-- snip -->
<input 
    id="email"
    type="email" 
    name="email"
    value="[email protected]" 
    style=" border: 0; background: transparent;" 
    class="form-control"
/>

Your input fields have an empty name attribute. Per documentation

The .serializeArray() method uses the standard W3C rules for successful controls to determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute.

https://api.jquery./serializeArray/

The problem is that you have empty name attributes. According to the JQuery .serializeArray() Documentation:

The .serializeArray() method uses the standard W3C rules for successful controls to determine which elements it should include; in particular the element cannot be disabled and must contain a name attribute.

You can fix it by adding name attributes for your fields:

<input type="email" name="email" value="" style=" border: 0; background: transparent;" class="form-control" id="email">
...
<input type="password" name="password" value="" style=" border: 0; background: transparent;" class="form-control" id="password">