Reputation: 10332

How to get all child inputs of a div element (jQuery)

HTML:

<div id="panel">
  <table>
    <tr>
       <td><input id="Search_NazovProjektu" type="text" value="" /></td>
    </tr>
    <tr>
       <td><input id="Search_Popis" type="text" value="" /></td>
    </tr>
  </table>
</div>

I need to select all inputs in the particular div.

This's not working:

var i = $("#panel > :input");

Upvotes: 189

Answers (7)

johnsnails

Reputation: 2031

Not exactly what you asked for, but might be what you were after. I combined this fragment I regularly use in my projects:

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

with the following to get a json string of my 'form' element names & values.

var form_data = JSON.stringify($('table#my-table :input').serializeObject());
console.log(form_data);

// Outputs
{"input_name_1":"My Cool Value","input_name_2":"Another cool value"}

Upvotes: 0

Uttam Kumar Roy

Reputation: 2058

here is my approach:

You can use it in other event.

var id;
$("#panel :input").each(function(e){	
  id = this.id;
  // show id 
  console.log("#"+id);
  // show input value 
  console.log(this.value);
  // disable input if you want
  //$("#"+id).prop('disabled', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="panel">
  <table>
    <tr>
       <td><input id="Search_NazovProjektu" type="text" value="Naz Val" /></td>
    </tr>
    <tr>
       <td><input id="Search_Popis" type="text" value="Po Val" /></td>
    </tr>
  </table>
</div>

Upvotes: 13

Paulo Fidalgo

Reputation: 22296

If you are using a framework like Ruby on Rails or Spring MVC you may need to use divs with square braces or other chars, that are not allowed you can use document.getElementById and this solution still works if you have multiple inputs with the same type.

var div = document.getElementById(divID);
$(div).find('input:text, input:password, input:file, select, textarea')
        .each(function() {
            $(this).val('');
        });
$(div).find('input:radio, input:checkbox').each(function() {
    $(this).removeAttr('checked');
    $(this).removeAttr('selected');
});

This examples shows how to clear the inputs, for you example you'll need to change it.

Upvotes: 38

Rob Willis

Reputation: 531

The 'find' method can be used to get all child inputs of a container that has already been cached to save looking it up again (whereas the 'children' method will only get the immediate children). e.g.

var panel= $("#panel");
var inputs = panel.find("input");

Upvotes: 53

mnemosyn

Reputation: 46291

You need

var i = $("#panel input");

or, depending on what exactly you want (see below)

var i = $("#panel :input");

the > will restrict to children, you want all descendants.

EDIT: As Nick pointed out, there's a subtle difference between $("#panel input") and $("#panel :input).

The first one will only retrieve elements of type input, that is <input type="...">, but not <textarea>, <button> and <select> elements. Thanks Nick, didn't know this myself and corrected my post accordingly. Left both options, because I guess the OP wasn't aware of that either and -technically- asked for inputs... :-)

Upvotes: 89