iterate through form elements in javascript/jquery

Question

I am trying to iterate through all form elements with id that begins with a specified prefix and create an xml string with results, but it is getting a bit complicated as forms form input types seem to have different behaviors . Does this functionality already javascript, jQuery or third party jQuery module?

 function fnPreIterate(){                
         var XMLstring;
         $(':input[id*="f1"]').each(function() {             
            XMLstring += (" <" +this.name+ '>' + this.value + "</"  + this.name + "> " );       
        });         
        $('#XMLstring').html("<pre>" + fnEncodeEntities(string) + "</pre>");
};

Edgar Villegas Alvarado · Accepted Answer · 2011-07-06 10:22:43Z

2

If you use:

$(this).val()

instead of

this.value

you'll save a lot of headaches with difference in form elements.

Another way to iterate is to use .serializeArray():

$.each($('#form').serializeArray(), function() {             
            string += (" <" +this.name+ '>' + this.value + "</"  + this.name + "> " );      
        });

Hope this helps. Cheers

PS: To select by prefix, you should do $(':input[id^="f1"]') (use ^ instead of *)

edited Jul 6, 2011 at 10:22

answered Jul 6, 2011 at 10:12

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ThiefMaster Over a year ago

You shouldn't use something.each() if something is not a jQuery object. Use $.each(something, function(idx, obj) { ... }) instead. Besides that, the callback is pretty incorrect since you are't iterating over DOM objects anymore.

Edgar Villegas Alvarado Over a year ago

You're totally right, I don't know what I was thinking. I've updated my answer. Thanks

ThiefMaster · Accepted Answer · 2011-07-06 10:10:40Z

1

Use $(this).val() to get the value.

Additionally you mixed up XMLString and string which results in your code creating a global variable and failing when it's called a second time.

answered Jul 6, 2011 at 10:10

ThiefMaster

320k85 gold badges608 silver badges648 bronze badges

Comments

malko · Accepted Answer · 2011-07-06 10:13:53Z

1

Using jQuery you should try:

function fnPreIterate(){                
  var XMLstring='';
  $(':input[id^="f1"]').each(function() {             
    var e = $(this), name=e.attr('name'), val=e.val();
    XMLstring += (" <" +name+ '>' + val + "</"  + name + "> " );      
  });         
  $('#XMLstring').html("<pre>" + fnEncodeEntities(XMLstring) + "</pre>");
};

I think it should work

answered Jul 6, 2011 at 10:13

malko

2,3921 gold badge19 silver badges26 bronze badges

Comments

Mark McLaren · Accepted Answer · 2011-07-06 10:11:58Z

0

You could make use of jQuery's serializeArray.

answered Jul 6, 2011 at 10:11

Mark McLaren

11.5k3 gold badges52 silver badges81 bronze badges

Comments

biluriuday · Accepted Answer · 2011-07-06 10:14:58Z

0

What is the problem you are facing? try using $(this) selector in your function instead. something like this $(this).attr('name') and $(this).val()

answered Jul 6, 2011 at 10:14

biluriuday

4281 gold badge7 silver badges16 bronze badges

Collectives™ on Stack Overflow

iterate through form elements in javascript/jquery

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related