jquery - Get multidimensional array form input value

Question

I have a search form that have multiple input types and I would like to get the values from the search form whenever user make a changes on the input.

The form is like this:

<form id="search">
<input type="hidden" name="cat[0][name]" value="cat1">
//select type input.
<select id="cat-0" name="cat[0][id]" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>    
<input type="hidden" name="cat[1][name]" value="cat2">
<select id="cat-1" name="cat[1][id]" >
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>

//checkbox type input
<input type="hidden" name="cat[2][name]" value="cat3">
<label><input id="cat-2" type="checkbox" name="cat[2][id][]" value="1"> 1</label>
<label><input id="cat-2" type="checkbox" name="cat[2][id][]" value="2"> 2</label>
<label><input id="cat-2" type="checkbox" name="cat[2][id][]" value="3"> 3</label>


//radio type input
<input type="hidden" name="cat[3][name]" value="cat4">
<label><input id="cat-3" type="radio"  name="cat[3][id]" value="1"> 1</label>
<label><input id="cat-3" type="radio"  name="cat[3][id]" value="2"> 2</label>
<label><input id="cat-3" type="radio"  name="cat[3][id]" value="3"> 3</label>
</form>

As you can see the input values are in multidimensional array. How do i get those values by javascript when user make a changes on either one of the input. All I wanted to do is create a search engine like this site .

The form is generated dynamically, thus I can't defined a fixed id/class for every field.

The js script should be something like this?

$('[id^=cat]').live('change', function(e) {
            passing_data();
            return false;
        });

        function passing_data() {
            var getdata = $(':input[name="cat"]').val();//this i can't get it.
            alert(getdata);
            return false;
        }

The passing_data() is the part i didn't get it, it will be used in ajax to perform search function.

Any idea?

can't you simply serialize the form and send to server via ajax and handle it all there ? — Manoj Purohit
– Manoj Purohit, Commented May 17, 2013 at 18:44
Seem reasonable. Will give it a try, and give a feedback here. Thanks — ron_dev
– ron_dev, Commented May 17, 2013 at 18:53

JohnMarkT · Accepted Answer · 2013-05-17 18:58:34Z

1

Try passing "this" into the function:

    $('[id^=cat]').live('change', function(e) {
        passing_data($(this)); // pass object as a jQuery object
        return false;
    });

    function passing_data($obj) {
        var getdata = $obj.val();
        alert(getdata);
        return false;
    }

answered May 17, 2013 at 18:58

JohnMarkT

464 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ron_dev · Accepted Answer · 2013-05-18 17:17:13Z

0

The answers that given by legendinmaking and JohnMarkT, both can solve my problem. Really appreciate yours answers. It helps me a lot.

The final solution for me is combine those two answers, like this:

$('[id^=cat]').live('change', function(e) {
        passing_data($(this)); // pass object as a jQuery object
        return false;
    });

    function passing_data($obj) {
        var getdata = $obj.closest("form").serialize();// i have multiple form,so it should choose the responding form.
        alert(getdata);
        return false;
    }

answered May 18, 2013 at 17:17

ron_dev

432 silver badges6 bronze badges

Collectives™ on Stack Overflow

jquery - Get multidimensional array form input value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related