Question

Related to this question here.

I’m trying to iterate through a series of forms on a page and do some “things” with said forms, but I can’t get it to work. Code is below:

HTML:

<div id="placement">
<h3>Placement</h3>
<form action="" id="placement-form">
  <input type="text" class="site" value="Site" title="Site" onfocus="clickclear(this, 'Site')" onblur="clickrecall(this,'Site')" />
  <input type="text" class="placementdesc" value="Placement description" title="Placement description" onfocus="clickclear(this, 'Placement description')" onblur="clickrecall(this,'Placement description')" />
  <input type="text" class="placementtype" value="Placement Type" title="Placement Type" onfocus="clickclear(this, 'Placement Type')" onblur="clickrecall(this,'Placement Type')" />
  <input type="text" class="size" value="Size" title="Size" onfocus="clickclear(this, 'Size')" onblur="clickrecall(this,'Size')" />
  <input type="text" class="pricing" value="Pricing" title="Pricing" onfocus="clickclear(this, 'Pricing')" onblur="clickrecall(this,'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 id="placement_span"></span>
</form> 
<input type="button" value="+" class="addRow" />   
 </div>

jQuery (this is for the “addRow” button):

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

Here’s the script I’m trying to get to work:

function getPlacement() {
    $('.placement-form').each(function(){
        var site, placement_desc, placementtype, size, pricing, servetype;  
        site = document.getElementById("site").value;
        placement_desc = document.getElementById("placementdesc").value;
        placementtype = document.getElementById("placementtype").value;
        size = document.getElementById("size").value;
        pricing = document.getElementById("pricing").value;
        servetype = document.getElementById("servetype").value;
        document.getElementById("placement_span").innerHTML = '<br />'+site+'_'+placement_desc+'_'+placementtype+'_'+size+'_'+pricing+'_'+servetype;
        return false;
    });
}

My understanding of the .each() function is that it wil loop through the DOM for each instance of that form named “placement-form” and then run the next few statements. Is this incorrect? Would appreciate some help on this!

Answer 1

The mistake you’ve made is that your selector in the .each command uses .placement-form – which looks for any element with the class placement-form… you’re creating elements with the id of placement-form(x).

I would suggest adding a class to each newly created form (as id’s must be unique, but classes have no such requirement).

var formCopy = $("#placement-form").clone().addClass('placement-form');

or just make sure the original has this class:

<form action="" id="placement-form" class="placement-form">

Then your .each should work as-is.

Another option is to use the starts-with selector but i’d consider this the worse option as it’ll be slower:

$('[id^="placement-form"]').each(...)

The above looks for any element where the id starts with placement-form.

---

Edit: Here’s some pointers to getting your getPlacement function working

1) Change the span with the id placement_span to a class. You will end up with many of these and as previously pointed out id’s must be unique. This will also aid you in finding the right one when looping over all placement_form‘s

2) Remove the return false, as this stops the .each at the first matched form (meaning only the first one works)

3) Change getPlacement to use jQuery, especially providing the second parameter to the selector to narrow down the search to the current form. Here’s some working code:

$('.placement-form').each(function(){
    var $form = $(this);
    var site, placement_desc, placementtype, size, pricing, servetype;  
    site =  $(".site",$form).val()
    placement_desc = $(".placementdesc",$form).val();
    placementtype = $(".placementtype",$form).val();
    size = $(".size",$form).val();
    pricing = $(".pricing",$form).val();
    servetype = $(".servetype",$form).val()
    $(".placement_span",$form).html('<br />'+site+'_'+placement_desc+'_'+placementtype+'_'+size+'_'+pricing+'_'+servetype);
    });
}

Live example: http://jsfiddle.net/zu8ZJ/