How to serialize a form in custom key/value pairs?

Question

I need to serialize a form in a custom key/value pair format. This is how my HTML code looks like:

<form name="ltq_frm" id="ltq_frm">
  <table class="table" id="licenses_to_quote">
    <thead>
      <tr>
        <th>License ID</th>
        <th>Quote ID</th>
        <th>Agreement Type</th>
        <th>Customer Site</th>
      </tr>
    </thead>
    <tbody id="licenses_to_quote_body">
      <tr data-id="96">
        <td>
          96
          <input type="hidden" name="license_id" value="96">
        </td>
        <td>
          <input class="hidden-select2-96" type="hidden" name="quote_id" value="249"> 249
        </td>
        <td>Percentage Support</td>
        <td>Frito-Lay, Inc.</td>
      </tr>
      <tr data-id="100">
        <td>
          100
          <input type="hidden" name="license_id" value="100">
        </td>
        <td>
          <input class="hidden-select2-100" type="hidden" name="quote_id" value="">
        </td>
        <td>Percentage Support</td>
        <td>Frito-Lay, Inc.</td>
      </tr>
    </tbody>
  </table>
</form>

<button id="subm">
  Click
</button>

And this is how I am serializing it:

$(function() {
  $('#subm').click(function() {
    var sA = $('#ltq_frm').serializeArray();
    var s = $('#ltq_frm').serialize();

    console.log(sA);
    console.log(s);
  });
});

This is "working" but I am getting an array of four values as output. I would like to get something like:

[
    'license_id' => 'quote_id'
]

Using the example above:

[
    96  => 249,
    100 => 
]

The values above comes from the hidden elements on the form, those named as license_id and quote_id.

I was checking here but I couldn't get the idea in how to transform my values into the needed key/value pairs.

This is a jsFiddle I was working with in case you need it.

Note: this is a code in development so if you have a better suggestion or need to give me something different go ahead

I think you'd have to tell us where these values are supposed to come from. You want `96 => 249`, but `96` is in a data attribute, in a value and in part of a classname, does it matter where this value is gotten from etc? — adeneo, Jun 15 '17 at 18:02
@adeneo yes sir, please add an answer as well I'll give you a vote ;) — ReynierPM, Jun 15 '17 at 18:09

Praveen Kumar Purushothaman · Answer 1 · 2017-06-15T18:05:26.173

I get it. You need a custom code like this to do it:

var finalObj = { };
$.each($('form').serializeArray(), function() {
    finalObj[this.name] = this.value;
});

console.log(finalObj);

Snippet

var finalObj = { };
$.each($('form').serializeArray(), function() {
  finalObj[this.name] = this.value;
});

console.log(finalObj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="ltq_frm" id="ltq_frm">
  <table class="table" id="licenses_to_quote">
    <thead>
      <tr>
        <th>License ID</th>
        <th>Quote ID</th>
        <th>Agreement Type</th>
        <th>Customer Site</th>
      </tr>
    </thead>
    <tbody id="licenses_to_quote_body">
      <tr data-id="96">
        <td>
          96
          <input type="hidden" name="license_id" value="96">
        </td>
        <td>
          <input class="hidden-select2-96" type="hidden" name="quote_id" value="249"> 249
        </td>
        <td>Percentage Support</td>
        <td>Frito-Lay, Inc.</td>
      </tr>
      <tr data-id="100">
        <td>
          100
          <input type="hidden" name="license_id[]" value="100">
        </td>
        <td>
          <input class="hidden-select2-100" type="hidden" name="quote_id[]" value="">
        </td>
        <td>Percentage Support</td>
        <td>Frito-Lay, Inc.</td>
      </tr>
    </tbody>
  </table>
</form>

Update: To get your custom way, I need to still change it further. In your question, the code has some inconsistencies. Those I corrected are as follows:

license_id[] to license_id.
quote_id[] to quote_id.

Please follow one single convention.

var finalObj = { };
var lastLID = "";
$.each($('form').serializeArray(), function() {
  if (this.name == "license_id")
    lastLID = this.value;
  else (this.name == "quote_id")
    finalObj[lastLID] = this.value;
});

console.log(finalObj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="ltq_frm" id="ltq_frm">
  <table class="table" id="licenses_to_quote">
    <thead>
      <tr>
        <th>License ID</th>
        <th>Quote ID</th>
        <th>Agreement Type</th>
        <th>Customer Site</th>
      </tr>
    </thead>
    <tbody id="licenses_to_quote_body">
      <tr data-id="96">
        <td>
          96
          <input type="hidden" name="license_id" value="96">
        </td>
        <td>
          <input class="hidden-select2-96" type="hidden" name="quote_id" value="249"> 249
        </td>
        <td>Percentage Support</td>
        <td>Frito-Lay, Inc.</td>
      </tr>
      <tr data-id="100">
        <td>
          100
          <input type="hidden" name="license_id" value="100">
        </td>
        <td>
          <input class="hidden-select2-100" type="hidden" name="quote_id" value="">
        </td>
        <td>Percentage Support</td>
        <td>Frito-Lay, Inc.</td>
      </tr>
    </tbody>
  </table>
</form>

That's not what I am looking for, take a look at the example where the key `license_id` becomes the value of `name="license_id"` and the value `quote_id` becomes the value of `name="quote_id"`. Is this clear? — ReynierPM, Jun 15 '17 at 18:03
@ReynierPM I understood already. Check the updated answer please. You got what you wanted. — Praveen Kumar Purushothaman, Jun 15 '17 at 18:05
@ReynierPM Any reason you accepted the new answer? Just curious bro. `:)` Just curious coz the other answer gives in a different format than you expected, mine gives you the same format as you asked. — Praveen Kumar Purushothaman, Jun 15 '17 at 18:14
The answer above looks cleaner and it does return what I need, in fact is the one I am using, I give you the votes :) — ReynierPM, Jun 15 '17 at 18:33
Don't worry yours is useful as well I am pretty sure it'll work for anyone as well ;) — ReynierPM, Jun 15 '17 at 19:16

score 1 · Accepted Answer · answered Jun 15 '17 at 18:10

You could manually map each row, get the two inputs, use the first as the key and the second as the value, like this

var result = $('#ltq_frm tbody tr').map(function() {
    var inp = $('input', this), o   = {};

    o[inp.first().val()] = inp.last().val();
    return o;
}).get();

FIDDLE

How to serialize a form in custom key/value pairs?

2 Answers2