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
– jishan siddique, Commented Feb 21, 2020 at 5:04
yes, I want to rename the input name and remove BranchViewModel[i]. from the names — Hooman Bahreini
– Hooman Bahreini, Commented Feb 21, 2020 at 5:05
check my answer stackoverflow.com/questions/5075778/… or this one stackoverflow.com/questions/60332474/… — Aditya
– Aditya, Commented Jan 29, 2022 at 7:56

PRAVEEN KUMAR T · Accepted Answer · 2020-02-21 05:38:54Z

2

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);
}

answered Feb 21, 2020 at 5:38

PRAVEEN KUMAR T

5034 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

vadivel a · Accepted Answer · 2020-02-21 05:40:05Z

1

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;
}

answered Feb 21, 2020 at 5:40

vadivel a

1,7921 gold badge11 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related