jQuery Set Value For Any Type of Input Dynamically

Sam Deering
Share

Quick share of a problem I had solved for setting form input values dynamically irrelevant of the input type. Hopefully will help someone out there.

Problem

Setting form input values dynamically for input, select, checkbox, radio etc… they all have different methods of setting values. So I was looking for just 1 function which could be passed the input element and set the value based on the input type.

As you may know if you use :input this grabs all inputs on a form:

$('form :input');

I have looked at something similar before for an auto form filler. And also for a field get and set function.

Also to get the type of an input is fairly easy:

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

Usage

You pass through the form as the jQuery DOM element against the field function with 2 parameters for input name and value to get/set. Easy as pie!

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

Full Code

//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;
        }
    }
})();