Question

my first post here. I’m not new to JQuery, but I find complex coding quite difficult (naturally!). I will explain my problem as clearly as possible. I’m using elgg so some code here will be elgg specific. That will not be an issue.

I’m creating a page that allows my users to add questions to something. They can add questions using the following method:

echo "<div id='ques_holder'>";
echo "<table><tr><td style='width:380px;padding-right:10px;'>";
    echo "<b>Question:</b> ";
    echo elgg_view("input/text", array('internalname' => 'ques_','internalid' => 'ques_'));
echo "</td><td style='width:90px;'>";
    echo "<b>Answer:</b> ";
    echo elgg_view("input/pulldown", array('internalname' => 'ans_','internalid' => 'ans_', 'options_values' => array('true' => 'True', 'false' => 'False')));
echo "</td></tr></table>";
echo "</div>";

I now want to make it possible to add more than one question at a time so I use the following cloning code to accomplish this:

var quescount = 0;

function add_question() {
quescount++;
var clone = $("#ques_holder").clone(false);
$("*", clone).add(clone).each(function() {
    if (this.id) {
        this.id = this.id + quescount;
    }
    if (this.name) {
        this.name = this.name + quescount;
    }
});
$("#interact_input_questions_adder").append(clone);
}

This is all working fine. New questions are added and their ids and names are updated with a number (quescount) as well as their child elements as well. The problem comes with the following part. I’m trying to get all the input names and values together for sending via ajax to a php file. This is where my code is breaking. I was trying a double .each() call (one inside the other), but something in my coding isn’t working. The code is below:

function save_questions(){
    var qrange = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
    var activity = "<?php echo $activity;?>";
    datastr = "&activity=" + activity;
    jQuery.each(qrange , function(index,value){
        $("#ques_holder"+value).find('input').each(function(){
            datastr += $(this).attr('name');
        });
    });
    alert(datastr);
}

Things to Consider
The types of inputs coming in could change each time (the one I gave is just one example)
The elgg coding is not breaking things
The qrange array is simply to restrict the number of questions (which I haven’t put into the add_question() function just yet)

I guess what I’m wondering is…can you do a .each() inside a jQuery.each(), and according to my coding, how can I get the names of all those inputs found inside those each calls?

Any help much appreciated. Don’t feel shy to ridicule me for my ugly coding, I taught myself through trial and error from sites like stackoverflow. 😉

EDIT: after severe face-palming I realised the mistake was an oversight of not using an “onclick” when I should be. The final stuff is as follows and was actually supplied by RightSaidFred who for some reason then removed his answer.

function save_questions(){
    var qrange = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20];
    var activity = "<?php echo $vars['activity'];?>";
    datastr = "&activity=" + activity;
    jQuery.each(qrange , function(index,value){
        $("#ques_holder"+value).find('input').each(function(input_idx, input){
            datastr += "&" + $(input).attr('name') + "=" + $(input).attr('value');
        });
    });
    alert(datastr);
}

Answer 1

Why don’t you put a class to all the ‘ques_holder’ divs, for example

  <div id='ques_holder' class='holder'>

Then, you just have to do one each to grab all the inputs

 $("div.holder input").each(function() {
      var name = $(this).attr('name'); // if you need the name
      var val = $(this).val();   // if you need the value
      var parent = $(this).closest('div.holder').attr('id'); // if you need to know the parent number
});