how can i console.log how the #form values will be sent?

i know we can manally log any input value by its selector

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

But is there -simpler- a way to log all input values? if it's posible to do it when any input changes

4 Answers

You can use serialize to serialize the form elements to a string for logging. It follows the same rules for including or not including elements as normal form submission. The only caveat is that the content of input type="file" fields isn't serialized, for perhaps obvious reasons.

To fire it when any of the inputs changes:

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

Live demo using the form shown in the documentation

You may get in form of query string using $("form").serialize().

This would log the form every time anything changes:

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

Edit:

Removed my focusout suggestion, as I realized that change is actually only fired when the element looses focus.

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!