jQuery: Iterate Through a Form’s Elements CodeUnit 04 NOV 2009

jQuery-logoTo iterate though a web form’s contents using jQuery is as easy as 123. First, make use of the $(‘:input’) selector and force it to grab the contents of a particular form by extending the selector with $(‘:input’, ‘#yourFormID’) where yourFormID is obviously the ID of the form you are interested in iterating through.

The next step is to make use of the each function to iterate through the selector’s returned array and using the this keyword, you should now be good to go.

The example below simply iterates through a form’s contents and spits out an alert detailing the input’s name and current value. (Note that for radio buttons you will need to take the inputs tagName value into consideration in order to figure out which radio button is currently selected.) 

$(document).ready(function() {
    $('#yourButtonID').click(function () {
        $(':input', '#yourFormID').each(function() {
            alert(this.name + ': ' + this.value);
        });
    });
});

Related Posts:

About Craig Lotter

Software developer, husband and dad to two little girls. Writer behind An Exploring South African. I don't have time for myself any more.

  • x

    Well it won’t work if you also have textarea and select boxes

  • x

    Well it won’t work if you also have textarea and select boxes

  • nice post. thanks.

  • nice post. thanks.

  • Man that is some complex stuff, still trying to learn and struggling…
    .-= motorbike guy´s last blog ..What its important to get motorbike insurance =-.

  • Man that is some complex stuff, still trying to learn and struggling…
    .-= motorbike guy´s last blog ..What its important to get motorbike insurance =-.

  • Webforms in Jquery sometimes it makes really difficult for me :( but with this explanation I’m starting to understand better about the forms using jquery.

    Thanks for your good and simple explanation :)

  • Webforms in Jquery sometimes it makes really difficult for me :( but with this explanation I’m starting to understand better about the forms using jquery.

    Thanks for your good and simple explanation :)

  • The phrase “iterate a directory tree” means to access each file in each andnested subdirectory under a specified root folder, to any depth. You do not necessarily have to open each file.

  • The phrase “iterate a directory tree” means to access each file in each andnested subdirectory under a specified root folder, to any depth. You do not necessarily have to open each file.

  • Intersting! I make only the first steps in programming. I need to know it for my job. I’m an IT controller and to fullfill my job well I have to learn to read and make up logarithms. It turned out to be a retty tough task.

  • Intersting! I make only the first steps in programming. I need to know it for my job. I’m an IT controller and to fullfill my job well I have to learn to read and make up logarithms. It turned out to be a retty tough task.

  • Jquery was just a mystery for me now it seem to be very easy for me. You have made it look so simple. Thanks

  • Jquery was just a mystery for me now it seem to be very easy for me. You have made it look so simple. Thanks

  • Oh … I do not understand the language like this scrip

  • Oh … I do not understand the language like this scrip

  • thank you for this scrip
    .-= raksamuda´s last blog ..customer satisfaction =-.

  • thank you for this scrip
    .-= raksamuda´s last blog ..customer satisfaction =-.

  • thank you for scrip

  • Karim

    does not work:

    Uncaught Syntax error, unrecognized expression: : 

  • Pingback: jquery iterate through form element? | Askjis()