.each function skips hidden element and uses multiple selectors in onchange funtion

Question

$('#step1 input').change(function(){ $('#step1 input').each(function(){ console.log($(this).val()); }); }); $('#step2 input').change(function(){ console.log($(this).val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="step1"> Father Details: &nbsp&nbsp&nbsp <input name="hiddenelement" type="text" hidden="hidden" value="This is Father name" /> <input name="First Name" type="text" placeholder="Enter First Name" /> </div> <div id="step2"> Mother Details: &nbsp&nbsp&nbsp <input name="First Name" type="text" placeholder="Enter First Name" /> </div> 

I have the following HTML:

 <div id="step1"> Father Details: &nbsp&nbsp&nbsp <input name="hiddenelement" type="text" hidden="hidden" value="This is Father name" /> <input name="First Name" type="text" placeholder="Enter First Name" /> </div> <div id="step2"> Mother Details: &nbsp&nbsp&nbsp <input name="First Name" type="text" placeholder="Enter First Name" /> </div> 

Using jquery I'm trying to get the name of father and mother with the following code:

 $('#step1 input').change(function(){ $('#step1 input').each(function(){ console.log($(this).val()); }); }); $('#step2 input').change(function(){ console.log($(this).val()); }); 

But when I give an input like: Father's middle name as Father and Mother are called Mother, I get a conclusion like:

 Father Father Mother Mother 

I have two doubts. Firstly, why the hidden element is skipped, and secondly, why changing one div is reflected in the output for both divs. May I find out where I am wrong. It would be very helpful Thanks in advance.

Answer 1

 $('#step1 input').change(function(){ $('#step1 input').each(function(){ console.log($(this).val()); }); }); $('#step2 input').change(function(){ console.log($(this).val()); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="step1"> Father Details: &nbsp&nbsp&nbsp <input name="hiddenelement" type="text" hidden="hidden" value="This is Father name" /> <input name="First Name" type="text" placeholder="Enter First Name" /> </div> <div id="step2"> Mother Details: &nbsp&nbsp&nbsp <input name="First Name" type="text" placeholder="Enter First Name" /> </div> 

Answer 2

I'm not sure, but maybe your hidden input is incorrectly encoded? I always thought that they should be set to type="hidden" , for example <input name="hiddenelement" type="hidden" />

Answer 3

 $('#step1 input').each(function(){ $(this).change(function(){ console.log($(this).val()); }) });