как я могу console.log, как будут отправлены значения #form?

Question

я знаю, что мы можем вручную записать любое входное значение его селектором

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

Но есть ли более простой способ записать все входные значения? если это возможно сделать, когда любой вход изменится

Answer 1

Вы можете использовать serialize для сериализации элементов формы в строку для ведения журнала. Он следует тем же правилам для включения или не включения элементов, что и обычная отправка формы. Единственное предостережение в том, что содержимое полей input type="file" не сериализуется, возможно, по очевидным причинам.

Для запуска при изменении любого из входов:

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

Демонстрационная версия с использованием формы, показанной в документации

Answer 2

Я сделал этот маленький компонент:

$("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 + '\'' );
    });

}

Наслаждайтесь!

Answer 3

Это будет регистрировать форму каждый раз, когда что-то меняется:

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

Edit:

Убрал мое предложение о фокусировке, так как я понял, что изменение происходит только когда элемент теряет фокус.

Answer 4

Вы можете получить в виде строки запроса, используя $("form").serialize().