CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
user908759
user908759

Reputation: 1355

JQuery selector for multiple sub level inputs elements of a div

I am trying to select all the inputs that are in a particular div. The div has inputs at a child depth of 1 and 2. I a able to get the inputs for the first level, but not the second. Here is my code:-

HTML

<div class="col-xs-11 ajax-form">
  <input type="hidden" name="user_id" value="4">
  <label class="checkbox-inline"><input name="2" type="checkbox" value="Sudo"> Sudo</label>
  <label class="checkbox-inline"><input name="1" type="checkbox" value="Admin"> Admin</label>
  <label class="checkbox-inline"><input name="3" type="checkbox" value="Client"> Client</label>
</div>

JS:

$(document).ready(function() {
  var data = $('.ajax-form :input').serialize();
  console.log(data);
});

My output:

user_id=4

Here is my jsfiddle

Thank you for any and all help.

Upvotes: 1

Views: 313

Answers (3)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

Reason why your code not working:-

1.In your code when document is ready, no check-box is checked, that's why there values are not coming in serialized data.

Solution:- Add checked attribute to the check-boxes like below:-

Example:-

$(document).ready(function() {
  var data = $('.ajax-form :input').serialize();
  console.log(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-xs-11 ajax-form">
  <input type="hidden" name="user_id" value="4">
  <label class="checkbox-inline"><input name="2" type="checkbox" value="Sudo" checked> Sudo</label>
  <label class="checkbox-inline"><input name="1" type="checkbox" value="Admin" checked> Admin</label>
  <label class="checkbox-inline"><input name="3" type="checkbox" value="Client" checked> Client</label>
</div>

Another option to do same:-

2.Create a button and on the button click try to serialized the div elements data.Then no need to add checked attribute. It will work dynamically.

Example:-

$(document).ready(function() {
  $('#serialize_div_data').click(function(){
      var data = $('.ajax-form :input').serialize();
      console.log(data);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="col-xs-11 ajax-form">
      <input type="hidden" name="user_id" value="4">
      <label class="checkbox-inline"><input name="2" type="checkbox" value="Sudo"> Sudo</label>
      <label class="checkbox-inline"><input name="1" type="checkbox" value="Admin"> Admin</label>
      <label class="checkbox-inline"><input name="3" type="checkbox" value="Client"> Client</label>
</div>
<input type="button" id = "serialize_div_data" value="Click Me to serailized the div data">

Upvotes: 1

Gohel Dhaval
Gohel Dhaval

Reputation: 820

Your code not work because when you load form your checkbox not check so it is not consider form value

try below code when you get data when load page 


    <div class="col-xs-11 ajax-form">
        <input type="hidden" name="user_id" value="4">
        <label class="checkbox-inline"><input name="2" type="checkbox" value="Sudo" checked> Sudo</label>
        <label class="checkbox-inline"><input name="1" type="checkbox" value="Admin" checked> Admin</label>
        <label class="checkbox-inline"><input name="3" type="checkbox" value="Client" checked> Client</label>
    </div>

Upvotes: 0

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

You are using:

$('.ajax-form :input')

this will get value of those check-box which are checked.

Check the update JSFiddle Link

In this I have put the checked attribute in one checkbox, and you will get its value in jquery code. So to get the chekbox value you have to handle the checked / unchecked event also.

Upvotes: 0

Related Questions