jquery ajax with array of html elements

Question

I have search jquery docs and SO but I can't find exactly what I am after.

I have spans created in php so they follow the pattern of:

<span class="om" id="o_1"></span>
<span class="om" id="o_3"></span>
...

I want to collect all the numbers in the id attribute and send them as an array of data (json if needs be) to the server via ajax and return the result to a function:

$.get("/pages/gOboxMeters", function($("span.om") <-- extract id's here ) {alert(data);} )

I am just alerting it for now.

What is the right code?

Thanks

Adil · Accepted Answer · 2013-04-04 11:21:46Z

1

You can use map,

Live Demo

numbers = $('.om').map(function(){
  return this.id.replace('o_', '');
}).get().join(',');

jQuery.get( "/pages/gOboxMeters", "yourVariable: " + numbers,
     function(){alert(""sent);
});

You can use other delimiter character in join

edited Apr 4, 2013 at 11:21

answered Apr 4, 2013 at 10:58

Adil

148k25 gold badges217 silver badges207 bronze badges

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

2 Comments

karim79 Over a year ago

I would do .replace(/[^0-9]/g, '') for extra robustness but +1. Also, the var keyword to avoid a global.

khany Over a year ago

@karim79 so does the get function do the ajax? (do I put the url in there?) or do I just pass 'numbers' as the data? Excellent concise answer BTW

Adil · Accepted Answer · 2013-04-20 12:22:10Z

1

You can also create an array and push in the value in that array with each function of jQuery

See Demo

var num = new Array;

$(".om").each(function(){
       num.push($(this).attr("id").replace("o_",""));
       $("#result").append($(this).attr("id").replace("o_","")+"<br>"); // just to show result visually
});

edited Apr 20, 2013 at 12:22

Adil

148k25 gold badges217 silver badges207 bronze badges

answered Apr 4, 2013 at 11:03

Dead Man

2,95125 silver badges37 bronze badges

Comments

vinothini · Accepted Answer · 2013-04-04 11:08:48Z

0

You can collect and send the value like this

$(document).ready(function(){
var value = []

$('span.om').each(function(){    
 value.push($(this).attr('id'))});
alert(value);
   $.get("/pages/gOboxMeters",{value : value }, function(){});

});

Example: http://jsfiddle.net/X5r8r/1120/

answered Apr 4, 2013 at 11:08

vinothini

2,6124 gold badges29 silver badges42 bronze badges

Comments

Alberto De Caro · Accepted Answer · 2013-04-04 11:13:48Z

0

You can use the .each() jQuery function:

  var arr = [];
  $('span.om').each(function(index, item){arr.push($(item).attr('id').substring(2));})

In this very same page's console I tried the following, and it works right:

var arr = []
$('.mainnavs a').each(function(index, item){arr.push($(item).attr('id').substring(4));})

After this, use the arr variable for further processing.

answered Apr 4, 2013 at 11:13

Alberto De Caro

5,2139 gold badges50 silver badges77 bronze badges

Collectives™ on Stack Overflow

jquery ajax with array of html elements

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related