How do I use Jquery to select multiple forms and their children and alert their values?

This is how far I've gotten:

  $('form').each(function() {
    $(this).submit(function() {
      event.preventDefault()
      $(this).children('input.required').each(function() {
        alert($(this).val())
      })
    })
  })

The event.preventDefault() is working because the form doesn't submit. But after that it won't do anything. I tried this

alert($(this).attr('id'))

right under

$(this).submit(function() {

and it worked too, it alerted the correct form id when I clicked submit. But for some reason I just can't get the children to work. After some reading I also tried

 $('form').each(function(index,element) {
    $(element).submit(function() {
      event.preventDefault()
      $(element).children('.required').each(function(ind开发者_高级运维,ele) {
        alert($(ele).val())
      })
    })
  })

but that didn't work either.

I need to select specific inputs with the "required" class to check their value. Thanks.

My bet is that your input elements are not child nodes of the form but descendant nodes. That is to say, there are other nodes in the tree between the form and the input, perhaps table or p elements.

You should use find instead:

$(element).find('.required').each(function() {
    alert($(this).val());
});

This finds all descendant nodes matching a selector, not just direct children.