How to display the title attribute of an input field in a Jquery map function

Question

I have the following script that appends a list of input values into a textarea.

<script>
   function showValues() {
       var fields = $(".content :input").serializeArray();
       var tokens = jQuery.map(fields, function(field) {
               return (field.value) ? (field.value + ' ' + field.name) : null;
           });
       $("#contentlist_copy").val(tokens.join(', '));
   }
      $("input").change(showValues);
      showValues();     
</script>

Instead of displaying the name attribute field.name of the returned field, i'd like to display the title attribute. I've tried a few tricks, nothig is giving.

I should point out that this a follow-up question to this topic:How to hide appended input names when the value is empty

Answer 1

The title attribute isn't stored in serializeArray. You'll have to use .map directly on $(".content :input")

function showValues() {
   var tokens = $(".content :input").map(function() {
       return (this.value) ? (this.value + ' ' + this.title) : null;
   }).get();
   $("#contentlist_copy").val(tokens.join(', '));
}
$("input").change(showValues);
showValues();