Serialize form and change input names (remove the array part of the input names)

Question

I want to serialize my html form and submit it to my sever via ajax, but before submitting the form, I want to rename the variable names and remove the initiali part, which is: BranchViewModels[0]. for example, I want to change:

change: BranchViewModels[0].BranchName to: BranchName

change: BranchViewModels[1].AddressViewModel.AddressId to : AddressViewModel.AddressId

Basically when I generate form, all the input names are rendered as an array, but before submitting the form, I want to get rid of array section of the input name (BranchViewModels[0]. in this example).

I have explained why I am doing this here

I have also created a jsfiddle for the following example.

function updateBranch() {
  $('.save-branch-button').click(function() {
    var branchForm = $(this).closest('form');
    var serializedform = branchForm.find('.form :input').serialize();
    alert('I want to change the input names in this serialized form: \n\n' + serializedform );
    
    // 1. iterated through serialized form
    //
    // remove BranchViewModels[i]. from the name, e.g.
    // replace: BranchViewModels[0].BranchName
    // with: BranchName


    // 2. Submit the form
    /* $.ajax({ 
        url: "/my-server",
        data: {branchViewModel: <-- serialized model},
   dataType: 'json',
      type: "POST"}); */
  });
}

jQuery(document).ready(function($) {
  updateBranch();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form onsubmit="return false;" novalidate="novalidate">
  <div class="form">

    <div class="form-group">
      <label>Branch name</label>
      <input class="form-control" data-val="true" id="BranchViewModels_0__BranchName" name="BranchViewModels[0].BranchName" type="text" value="branch 1">
    </div>

    <hr />

    <div class="form-group">
      <label>Branch location</label>
      <div>
        <input data-val="true" id="BranchViewModels_0__AddressViewModel_AddressId" name="BranchViewModels[0].AddressViewModel.AddressId" value="1956">
      </div>

      <div>
        <input class="address-street-address" data-val="true" id="BranchViewModels_0__AddressViewModel_StreetAddress" name="BranchViewModels[0].AddressViewModel.StreetAddress" value="Wellington 6011, New Zealand">
      </div>
    </div>

    <input type="button" class="btn btn-primary-action save-branch-button" value="Save">

  </div>
</form>

So basically you want to update `Brance name` control name=' Something else' correct? — jishan siddique, Feb 21 '20 at 05:04
yes, I want to rename the input name and remove `BranchViewModel[i].` from the names — Hooman Bahreini, Feb 21 '20 at 05:05
check my answer https://stackoverflow.com/questions/5075778/how-do-i-modify-serialized-form-data-in-jquery/70903108#70903108 — Aditya, Jan 29 '22 at 07:18
check my answer https://stackoverflow.com/questions/5075778/how-do-i-modify-serialized-form-data-in-jquery/70903108#70903108 — Aditya, Jan 29 '22 at 07:54
check my answer https://stackoverflow.com/questions/5075778/how-do-i-modify-serialized-form-data-in-jquery/70903108#70903108 or this one https://stackoverflow.com/questions/60332474/serialize-form-and-change-input-names-remove-the-array-part-of-the-input-names — Aditya, Jan 29 '22 at 07:56

score 2 · Accepted Answer · answered Feb 21 '20 at 05:38

function updateBranch() {
  $('.save-branch-button').click(function() {
    var branchForm = $(this).closest('form');
    var serializedform = branchForm.find('.form :input').serializeArray();
    console.log(serializedform);
    const obj = {};
    for(let d of serializedform){
            obj[d.name.split('.').pop()] = d.value
        }
    console.log(obj);
}

score 1 · Answer 2 · answered Feb 21 '20 at 05:40

Return serialize data to Deserialize then change to you want anything Hope this help you.

console.log(deparam(serializedform));

function deparam(query) {
  var pairs, i, keyValuePair, key, value, map = {};
  // remove leading question mark if its there
  if (query.slice(0, 1) === '?') {
    query = query.slice(1);
  }
  if (query !== '') {
    pairs = query.split('&');
    for (i = 0; i < pairs.length; i += 1) {
      keyValuePair = pairs[i].split('=');
      key = decodeURIComponent(keyValuePair[0]);
      value = (keyValuePair.length > 1) ? decodeURIComponent(keyValuePair[1]) : undefined;
      map[key] = value;
    }
  }
  return map;
}

Serialize form and change input names (remove the array part of the input names)

2 Answers2