Loop through form fields with JQuery using .submit() event handler.

Question

Hi all.

I'm having a little problem with form submission with jquery. I've submitted a lot of forms with it in the past but I was just thinking, how can I use the event handler .submit() to submit a form and it's elements without callin the forms ID. The problem is that I can't seem to be able to chain elements with $(this) (it's possible using .children() but I just want to use .each() through the input fields).

Here is a code snippet:

$('.editTimeLink').click(function () {
 var id = $(this).attr('rel');
 $.get('<?php echo $config["httpRoot"]; ?>/ajax.php?ajax=1&sec=time&a=edit&id=' + id, {}, function (data) {
  if (data.returnCode == 1) {
   $('#timeBox_' + id).html(data.data);
   $('#timeBox_' + id + ' form').bind('submit', function () {
    //$(this).$(':input').each(function () {
    //$(this).(':input').each(function () {
    $(this).each(':input', function () {
     alert("adsf");
    });

    return false;
   });
  } else if (data.returnCode == 0) {
   alert(data.data);
  }
 }, 'json');

 return false;
});

Like you can see I'm trying to alert the string "asdf" for each input element in the form "this".

You can see where the 2 lines are commented out what I have been trying to manage. The line that isn't commented out doesn't work neither. I know how I can fix this, for instance pass the form selectors name to the lambda function but I was just thinking if there's a more "clean" way to do this?

Thanks in advance. Kristinn.

Answer 1

Why can't you use children()? You can still use each().

$(this).children(':input').each(...);

However, this does not work:

$(this).each(':input', function () {
                                    alert("adsf");
                            });

Because each() only takes one argument, a callback (doc here).

By the way: using a JS debugger, e.g., Firebug, is a good idea to find out why stuff is not working.