How to store all editable values in an array using jquery

Question

 $("#fieldset").closest("fieldset").find("input, select,textarea").change(function() {
        return ($(this).val());
    }).get().join(',');

I am getting all editable field values on change.. I need to store all editable values in an array to pass to the controller?

how to store the values in an array

thanks

Answer 1

var array;

$("#fieldset").change(function(event) {
    $(event.target).data('changed',true);
});

$("form").submit(function() {
    array = $(this).find("input, select,textarea").map(function() {
        var $th = $(this);
        if( $th.data('changed') ) return $(this).val();
    }).get();
});

The #fieldset change event will fire when any of its descendant elements are changed.

Then handler finds the input/select/textarea elements, and performs .map() on them returning their value, which creates a jQuery object with the values.

.get() grabs/returns the array from the jQuery object.

Test it here: http://jsfiddle.net/Mrrty/2/ (change the value of one of the elements)

• http://api.jquery.com/map/
• http://api.jquery.com/get/

---

EDIT:

Note that if you don't want to get a new array every time one of the elements changes, you can do the same thing with a different event. Perhaps doing this on .submit() would be more appropriate.

• http://api.jquery.com/submit/