Iterate Through The Dom And Then Concatenate The Resulting Text Values

this is probably not explained very well but please bear with me, I've also included a fiddle which will help explain what I'm trying to achieve. so I've been working on a little w

Solution 1:

First i removed your inline click and focus handlers... we will bind them with jQuery instead. I also added a class to all the inputs you would call the focus and blur on called inFieldLabel to facilitate easy binding.

HTML

<divid="placement"><h3>Placement</h3><formaction=""id="placement-form"class="placement-form"><inputtype="text"class="site inFieldLabel"value="Site"title="Site" /><inputtype="text"class="placementdesc inFieldLabel"value="Placement description"title="Placement description" /><inputtype="text"class="placementtype inFieldLabel"value="Placement Type"title="Placement Type" /><inputtype="text"class="size inFieldLabel"value="Size"title="Size" /><inputtype="text"class="pricing inFieldLabel"value="Pricing"title="Pricing" /><selectclass="servetype"title="Serve Type"><option>STD – Standard trafficking type (ie, regular display banners)</option><option>SSV – Site-served (no ad server tracking)</option><option>PIX – Pixel</option><option>CCD – Click command</option><option>PCC – Pixel and Click command</option><option>RMV – Rich Media Video</option><option>RME – Rich Media Expand</option><option>RMO – Rich Media Other</option></select><spanclass="placement_span"></span></form></div><inputtype="button"value="+"class="addRow" /><inputtype="button"id="generate"value="Generate" />

So now we have the clickclear and clickrecall functions defined to use as hnadlers for binding. Not sure if you had it in your original code but i added a check to make sure it only recalls/clears if the values are the defaults (eg. the orig. label or an empty string).

The bulk of what ou were having trouble with is in the generatePage function.

JS

var uniqueId = 1;
  var generatePage = function(evt){
    $('.placement-form').each(function(i, frm){
      frm = $(frm); // wrap in jQuery// i is the interation counter// frm is the form elementvar site, placement_desc, placementtype, size, pricing, servetype;    
      site = frm.find(".site").val();
      placement_desc = frm.find(".placementdesc").val();
      placementtype = frm.find(".placementtype").val();
      size = frm.find(".size").val();
      pricing = frm.find(".pricing").val();
      servetype = frm.find(".servetype").val();
      var content = '<br />'+site+'_'+placement_desc+'_'+placementtype+'_'+size+'_'+pricing+'_'+servetype;
      frm.find('.placement_span').html(content);
    });
  };

  var clickclear = function (evt){
    var ele = $(this);
    evt.preventDefault();

    if(ele.val() == ele.attr('title')){
      ele.val(''); // if the value is a "label" then clear it for the user
    }

    returnfalse;
  };

  var clickrecall = function(evt) {
    var ele = $(this);
    evt.preventDefault();


    if(ele.val() == '') {
      // if the user hasnt entered any text then revert to the "label"
      ele.val(ele.attr('title'));
    }

    returnfalse;
  };
  $('.placement-form .inFieldLabel').focus(clickclear).blur(clickrecall);

  $('.addRow').click(function() {
      var formCopy = $("#placement-form").clone(true);
      var formCopyId = 'placement-form'+uniqueId;
      formCopy.attr('id',formCopyId);
      $('#placement').append(formCopy);
      uniqueId++;
  });

  $('#generate').click(generatePage);

See it in action: http://jsfiddle.net/JUfgd/

However, im not sure why you are trying to combine these strings or why you are using multiple forms. I assume you need to submit all this data somewhere at some point and to do that it would make more sense to actually have a single form witht he elements having name attributes in array notation (eg. name="site[0]") then when you submit you can loop through on the server side with everything grouped together. Of course that can be hard to deal with when cloning so an alternate approach would be to leave the actual inputs outside of the form, and then assemble the data with js, similar to how youre already doing - only it would make more sense to use JSON for this instead of your own custom string serialization. If you need more info on any of this post a new question.

---

Well what i would do is assing a unique id to the form or add a wrapper container to the form that has a unique id, then i would use classes instead of Id's for the inputs/controls. This way you can clone the form or its container and all the children then jsut change the one id on that top level element. Then you can use a selector like $(yourUniqueId .theInputClass) which makes it a lot easier to manage.

Then you can just iterate over each form... for eas i would probably add a class to the form too jsut in case there are other non related forms on the same page so it would be something like:

$('.placementForm').each(function(i, formEle){
   // do stuff to the form
});

Solution 2:

The code you wrote to clone all your elements:

$('#' + formId).find('input,select').each(function(){
     $(this).attr('id', $(this).attr('id') + uniqueId);
});

is already in the right neighborhood. Since you're using jQuery, why not do something like this to get a string with all the values of your inputs and selects:

var str = '';
$('#' + formId).find('input, select').each(function(){
     str += $(this).val();
});

And of course if you want to pick up inputs and selects anywhere on the page, instead of just that form, you could do this:

var str = '';
$('input, select').each(function(){
     str += $(this).val();
});