Question

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 web app that concatenates strings of text (taken from input boxes and drop down boxes). This is achieved by hitting a “generate” button, which in the background runs the functions to concatenate said strings. It was working fine but I have just recently introduced an “addRow” button, which using JQuery clones one of the forms and all its contents and then changes the id for each element in the row (by adding a 1, then 2, then 3, depending on the number of times the ‘+’ button is clicked.

Once there is more than one row, how can I iterate through the function that concatenates the string for the row that is replicated? My code will probably explain this better:

JSFiddle [here][1]

UPDATE:

So I’ve amended my code to use classes for the inputs/text boxes and now just cloned the forms (as they have a unique ID). I’m having trouble iterating through each form instance to do “something” (i.e. concatenate the strings)!

Here’s an updated fiddle. The code to actually concatenate the strings is done, I just don’t know how to use the .each() function in JQuery properly!

Answer 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

<div id="placement">
    <h3>Placement</h3>
    <form action="" id="placement-form" class="placement-form">
      <input type="text" class="site inFieldLabel" value="Site" title="Site" />
      <input type="text" class="placementdesc inFieldLabel" value="Placement description" title="Placement description" />
      <input type="text" class="placementtype inFieldLabel" value="Placement Type" title="Placement Type" />
      <input type="text" class="size inFieldLabel" value="Size" title="Size" />
      <input type="text" class="pricing inFieldLabel" value="Pricing" title="Pricing" />
      <select class="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>
      <span class="placement_span"></span>
    </form>   
</div>
<input type="button" value="+" class="addRow" />
<input type="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 element
      var 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
    }

    return false;
  };

  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'));
    }

    return false;
  };
  $('.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
});