Статьи

JQuery установить значение для любого типа ввода динамически

Краткий обзор проблемы, которую я решил для задания значений ввода формы, динамически не зависящих от типа ввода . Надеюсь, кто-то там поможет.

проблема

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

Как вы, возможно, знаете, если вы используете: input это захватывает все входные данные в форме:

$('form :input');

Я смотрел на нечто подобное раньше для автозаполнения формы . А также для поля get и set function .

Также получить тип ввода довольно легко:

 $('form #input').attr('type');

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

Вы проходите через форму как элемент DOM jQuery против функции поля с 2 параметрами для имени входа и значения для получения / установки. Проще простого!

 $('#form').field('name', 'sam deering'); //text
$('#form').field('frequency', '20'); //select
$('#form').field('subscribe', 'true'); //checkbox
$('#form').field('language', 'jquery'); //radio
etc...

Полный код

 //field function to get/set input values of any type of input
(function () {
    $.fn.field = function (inputName, value)
    {
        console.log('field called...');
        console.log($(this));

        console.log(typeof inputName);

        if (typeof inputName !== "string") return false;
        var $inputElement = $(this).find("[name=" + inputName + "]");
        // var $inputElement = $(this); //direct mapping with no form context

        console.log($inputElement);

        if (typeof value === "undefined" && $inputElement.length >= 1)
        {
            switch ($inputElement.attr("type"))
            {
                case "checkbox":
                    return $inputElement.is(":checked");
                    break;
                case "radio":
                    var result;
                    $inputElement.each(function (i, val) {
                        if ($(this).is(":checked")) result = $(this).val()
                    });
                    return result;
                    break;
                default:
                    return $inputElement.val();
                    break;
            }
        }
        else
        {
            switch ($inputElement.attr("type"))
            {
                case "checkbox":
                    $inputElement.attr({
                        checked: value
                    });
                    break;
                case "radio":
                    $inputElement.each(function (i) {
                        if ($(this).val() == value) $(this).attr({
                            checked: true
                        })
                    });
                    break;
                case undefined:
                    $(this).append('');
                    break;
                default:
                    $inputElement.val(value);
                    break;
            }
            return $inputElement;
        }
    }
})();