我一般如何使用jQuery遍历表单中的输入元素？

Question

I'm trying to loop through the input elements in a form using jQuery so that I can do some lightweight client-side validation. I'm using Django to generate the pages server side and the problem I'm having is that the particular page has many forms dynamically generated so I don't know the id of them before hand. If I did I could easily do the validation.

So in my javascript I'm trying to capture the submit action of the form and when that's found, somehow get the input elements so that I can check the parameters. Here's what I've tried amongst other things:

$(".s-inputs").submit(function(event){      
  $(this).filter(':input').each(function(){
    console.log("Doesn't work");
  });
  event.preventDefault();
});

I tried including the django code that generates the html forms below but something in the templating system was throwing off Stack Overflow's formatting of it. I don't think it would have been very instructive anyway. Essentially my html is just an arbitrary number of forms on the page each with an arbitrary number of inputs, all dynamically generated server side. The only thing they share in common is the class "s-inputs."

Thanks for any help.

Answer 1

You should use find() , not filter() :

$(this).find(':input').each(function(){
  console.log("Doesn't work");
});

filter() attempts to filter the currently selected element(s) (which is currently just your form element) and remove anything which isn't what is being filtered on. This will return nothing, as your form element isn't matched by :input .

find() on the other hand searches for any matching selector contained within the currently selected elements. This will match any matching :input element contained within your form .