CODEWITHSUNDEEP
javascriptjquery
Hooman Bahreini
Hooman Bahreini

Reputation: 15559

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

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>

Upvotes: 1

Views: 752

Answers (2)

vadivel a
vadivel a

Reputation: 1794

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

Upvotes: 1

PRAVEEN KUMAR T
PRAVEEN KUMAR T

Reputation: 493

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

Upvotes: 2

Related Questions