How can I console.log how the #form values ​​will be sent?

Question

I know that we can manually write any input value with its selector

console.log('inputName='+$('#inputId').val()+'....) 

But is there a -simpler way to write all input values? if possible when any input changes

Answer 1

You can use serialize to serialize form elements in a line for logging. It follows the same rules for the inclusion or absence of elements as a representation of the regular form. The only caveat is that the contents of input type="file" fields are not serialized for obvious reasons.

To start it when changing any of the inputs:

 $("form :input").change(function() { console.log($(this).closest('form').serialize()); }); 

demo using the form shown in the documentation

Answer 2

You can get the query string form using $("form").serialize() .

Answer 3

This will register the form every time something changes:

 $("form :input").change(function(){ console.log($("form").serialize()); }); 

Edit:

Removed my focus suggestion, as I realized that a change really only works when an element loses focus.

Answer 4

I made this little component:

 $("form :input").change(function() { var fields = $(this).closest('form').serialize(); serialize_to_console( fields ); }); /* SERIALIZE TO CONSOLE Transforms string to array and show each param in console if not empty */ var serialize_to_console = function( serialized ) { var splited_serialized = serialized.split('&'); $.each( splited_serialized, function(index, key) { var input = key.substr(0, key.indexOf('=')); var value = key.substr( key.indexOf('=') + 1 ); if( value !== '' ) console.log( '[' + input + '] = \'' + value + '\'' ); }); } 

Enjoy it!