access custom attribute using serializeArray()

Question

I am using serializeArray() function to fetch name and value attrubute of input tags resides in the form tag.

<form>
   <input type='text' data-val="Employee Name" value='john' name ='empName'/>
   <input type='text' data-val="Employee id" value='4333' name ='empId'/>
</form>

i am able to access name and value attributes , but how can i access custom attribute data-val using serializeArray()

Answer 1

In this case you can't use serializeArray, you can try something like this with the help of map()

var arr=$('input').map(function(){ return $(this).data('val');}).get();
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
   <input type='text' data-val="Employee Name" value='john' name ='empName'/>
   <input type='text' data-val="Employee id" value='4333' name ='empId'/>
</form>

If you want the result as name value pair then use

var arr = $('input').map(function() {
  return {
    [$(this).attr('name')] : $(this).data('val')
  }
}).get();
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type='text' data-val="Employee Name" value='john' name='empName' />
  <input type='text' data-val="Employee id" value='4333' name='empId' />
</form>

Same output as serializeArray

var arr = $('input').map(function() {
  return {
    name: $(this).attr('name'),
    value: $(this).data('val')
  }
}).get();
console.log(arr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type='text' data-val="Employee Name" value='john' name='empName' />
  <input type='text' data-val="Employee id" value='4333' name='empId' />
</form>