javascript - data - Получить поля ввода формы с помощью jQuery?




jquery set value (15)

serialize () - лучший метод. @ Кристофер Паркер говорит, что Nickf's anwser выполняет больше, однако он не принимает во внимание, что форма может содержать textarea и выбирать меню. Гораздо лучше использовать serialize (), а затем манипулировать тем, что вам нужно. Данные из serialize () могут использоваться либо в сообщении Ajax, либо в get, поэтому там нет никаких проблем.

У меня есть форма со многими полями ввода.

Когда я поймаю событие отправки формы с помощью jQuery, можно ли получить все поля ввода этой формы в ассоциативном массиве?


Ассоциативный? Не без какой-либо работы, но вы можете использовать общие селектора:

var items = new Array();

$('#form_id:input').each(function (el) {
    items[el.name] = el;
});

Вот еще одно решение, таким образом вы можете получить все данные о форме и использовать ее в вызове на сервере или что-то в этом роде.

$('.form').on('submit', function( e )){ 
   var form = $( this ), // this will resolve to the form submitted
       action = form.attr( 'action' ),
         type = form.attr( 'method' ),
         data = {};

     // Make sure you use the 'name' field on the inputs you want to grab. 
   form.find( '[name]' ).each( function( i , v ){
      var input = $( this ), // resolves to current input element.
          name = input.attr( 'name' ),
          value = input.val();
      data[name] = value;
   });

  // Code which makes use of 'data'.

 e.preventDefault();
}

Затем вы можете использовать это с помощью вызовов ajax:

function sendRequest(action, type, data) {
       $.ajax({
            url: action,
           type: type,
           data: data
       })
       .done(function( returnedHtml ) {
           $( "#responseDiv" ).append( returnedHtml );
       })
       .fail(function() {
           $( "#responseDiv" ).append( "This failed" );
       });
}

Надеюсь, это будет полезно для любого из вас :)


Все ответы хорошие, но если есть поле, которое вам нравится игнорировать в этой функции? Легко, дайте поле свойство, например ignore_this:

<input type="text" name="some_name" ignore_this>

И в вашей функции Serialize:

if(!$(name).prop('ignorar')){
   do_your_thing;
}

Так вы игнорируете некоторые поля.


Имел подобную проблему с небольшим завихрением, и я думал, что выброшу это. У меня есть функция обратного вызова, которая получает форму, поэтому я уже имел объект формы и не мог легко выбирать варианты $('form:input') . Вместо этого я придумал:

    var dataValues = {};
    form.find('input').each(
        function(unusedIndex, child) {
            dataValues[child.name] = child.value;
        });

Его схожая, но не идентичная ситуация, но я нашел эту нить очень полезной и подумал, что я задержу это в конце и надеюсь, что кто-то другой найдет ее полезной.


Иногда я нахожу получение одного за раз более полезным. Для этого есть следующее:

var input_name = "firstname";
var input = $("#form_id :input[name='"+input_name+"']"); 

Когда мне нужно было выполнить вызов ajax со всеми полями формы, у меня были проблемы с : селектором ввода , возвращающим все флажки, независимо от того, были ли они проверены. Я добавил новый селектор, чтобы просто получить элементы формы, доступные для отправки:

$.extend($.expr[':'],{
    submitable: function(a){
        if($(a).is(':checkbox:not(:checked)'))
        {
            return false;
        }
        else if($(a).is(':input'))
        {
            return true;
        }
        else
        {
            return false;
        }
    }
});

использование:

$('#form_id :submitable');

Я еще не тестировал его с несколькими блоками выбора, но он работает для получения всех полей формы в виде стандартного представления.

Я использовал это при настройке параметров продукта на сайте OpenCart, чтобы включить флажки и текстовые поля, а также стандартный тип окна выбора.


Надеюсь, это поможет кому-то. :)

// This html:
// <form id="someCoolForm">
// <input type="text" class="form-control" name="username" value="...." />
// 
// <input type="text" class="form-control" name="profile.first_name" value="...." />
// <input type="text" class="form-control" name="profile.last_name" value="...." />
// 
// <input type="text" class="form-control" name="emails[]" value="..." />
// <input type="text" class="form-control" name="emails[]" value=".." />
// <input type="text" class="form-control" name="emails[]" value="." />
// </form>
// 
// With this js:
// 
// var form1 = parseForm($('#someCoolForm'));
// console.log(form1);
// 
// Will output something like:
// {
// username: "test2"
// emails:
//   0: "[email protected]"
//   1: "[email protected]"
// profile: Object
//   first_name: "..."
//   last_name: "..."
// }
// 
// So, function below:

var parseForm = function (form) {

    var formdata = form.serializeArray();

    var data = {};

    _.each(formdata, function (element) {

        var value = _.values(element);

        // Parsing field arrays.
        if (value[0].indexOf('[]') > 0) {
            var key = value[0].replace('[]', '');

            if (!data[key])
                data[key] = [];

            data[value[0].replace('[]', '')].push(value[1]);
        } else

        // Parsing nested objects.
        if (value[0].indexOf('.') > 0) {

            var parent = value[0].substring(0, value[0].indexOf("."));
            var child = value[0].substring(value[0].lastIndexOf(".") + 1);

            if (!data[parent])
                data[parent] = {};

            data[parent][child] = value[1];
        } else {
            data[value[0]] = value[1];
        }
    });

    return data;
};

Плагин jquery.form может помочь с тем, что другие ищут в этом вопросе. Я не уверен, что он делает то, что вам нужно, или нет.

Существует также функция serializeArray .


Поздно к партии по этому вопросу, но это еще проще:

$('#myForm').submit(function() {
    // Get all the forms elements and their values in one step
    var values = $(this).serialize();

});

У меня была такая же проблема, и я решил ее по-другому.

var arr = new Array();
$(':input').each(function() {
 arr.push($(this).val());
});
arr;

Он возвращает значение всех полей ввода. Вы можете изменить значение $(':input') чтобы быть более конкретным.


Я использую этот код без каждого цикла:

$('.subscribe-form').submit(function(e){
    var arr=$(this).serializeArray();
    var values={};
    for(i in arr){values[arr[i]['name']]=arr[i]['value']}
    console.log(values);
    return false;
});

serializeArray jQuery не включает отключенные поля, поэтому, если вам тоже нужны, попробуйте:

var data = {};
$('form.my-form').find('input, textarea, select').each(function(i, field) {
    data[field.name] = field.value;
});

Этот фрагмент кода будет работать вместо имени, email введите имя поля формы

$(document).ready(function(){
  $("#form_id").submit(function(event){
    event.preventDefault();
    var name = $("input[name='name']",this).val();
    var email = $("input[name='email']",this).val();
  });
});

$('#myForm').submit(function() {
    // get all the inputs into an array.
    var $inputs = $('#myForm :input');

    // not sure if you wanted this, but I thought I'd add it.
    // get an associative array of just the values.
    var values = {};
    $inputs.each(function() {
        values[this.name] = $(this).val();
    });

});

Благодаря подсказке от Simon_Weaver, вот еще один способ, которым вы могли бы это сделать, используя serializeArray :

var values = {};
$.each($('#myForm').serializeArray(), function(i, field) {
    values[field.name] = field.value;
});

Обратите внимание, что этот фрагмент завершится неудачей с помощью элементов <select multiple> .

Похоже, что новые входы формы HTML 5 не работают с serializeArray в jQuery версии 1.3. Это работает в версии 1.4+





jquery