Question

I have this form where you can click a link to clone the form fields. I also have a selction if radio button at the top of each clone that hides and shows the checkbox with it. I am unable to figure out why I can do it on first iteration and how to make it work for each clone.

my html looks like this

              <tr> // if the first radio button is selected, the checkbox appears and disappears on selecting 2nd
              <td width="250px"><span style="color: #cc0000;">*</span> Please check the costs that apply:</td>
              <td><input id="Cost_1" type="radio" value="15" name="Costs"/> First Cost: $15 <br/>
              <input id="Cost_2" type="radio" value="10" name="Costs"/> Second cost: $10 <br/>
              <tr id="special_offers">
                  <td>
              <input  type="checkbox" value="5" name="special_offers"/> <span id="optional_span">Special Offers: $5

          <tr>
            <td> First name:</td>
            <td><input name="first_name_id_1" type="text" id="first_name_id_1" size="15" class="required"></td>
              </tr>
          <tr>
            <td> Last name:</td>
            <td><input name="last_name_id_1" type="text" id="last_name_id_1" size="15" ></td>
          </tr>
          <tr>

    </tbody>
    <tr>
        <td><a href="#" onClick="addFormField(); return false;">Register additional attendee</a></td>    
      </tr>
      <tr>  

And my functions:

 function addFormField() {

            var currentCount =  $('.multiplerows').length;
              var newCount = currentCount+1;
            var lastRepeatingGroup = $('.multiplerows:last')
            var newSection = lastRepeatingGroup.clone();
            newSection.find('input').val(''); //clears the text fields//
            $('input[type=radio]',newSection).removeAttr('checked');

            $('input[type=checkbox]',newSection).removeAttr('checked');
            newSection.insertAfter(lastRepeatingGroup);
            newSection.find("input").each(function (index, input) {
                input.id = input.id.replace("_" + currentCount, "_" + newCount);
                input.name = input.name.replace("_" + currentCount, "_" + newCount);
            });
            newSection.find("label").each(function (index, label) {
                var l = $(label);
                l.attr('for', l.attr('for').replace("_" + currentCount, "_" + newCount));
            });
            return false;



        };

        $("input[name='Costs']").click(function() {
          if(document.getElementById('Cost_1').checked) {

            $("#special_offers").show();

          } else {

            $("#special_offers").hide();

           ;
          }
        });

For some reason the fiddle ain’t working, but I don’t have problem cloning the elements on this form, my problem is to grey out the check box if user clicks second radio button on top and to have that option available, each time user clicks to register a new attendee.
Hopefully, the fiddle might give you some idea.
http://jsfiddle.net/qnAHq/7/

Answer 1

OK, I’ve patch it up a little bit. There were a few misconceptions that were never make it to work, not in the logic format it was so I had to modify it a little bit.
It’s not pretty but it works and I hope it doesn’t mess your concept.
The onClick attr trigger was not working so I’ve changed the design a little bit. I guess you’ll be able to modify if it has to be the other way, I could help you if any issues.

However If you invest time in event driven designs you’ll be much more error prone. In this manner of js coding you’ll always have problems and it’s not maintainable. Lets say you want to change your logic you’ll have to modify a lot. This time spent for debugging you can put it in improvement of coding.

Here’s the fiddle http://jsfiddle.net/qnAHq/40/ , BR

<table>
    <tbody class="multiplerows">
        <tr>
            <td width="250px"><span style="color: #cc0000;">*</span> Please check the costs that apply:</td>
            <td>
                <input id="Cost_1" type="radio" value="45" name="Costs1" class="costs"
                />Cost 1: $45
                <br/>
                <input id="Cost_2" type="radio" value="15" name="Costs1" class="costs"
                />Cost 2: $15
                <br/>
                <tr id="speial_offers">
                    <td>
                        <input type="checkbox" value="15" name="special_offers" /> <span id="optional_span"> Special Offers</span>

                    </td>
            </td>
            </tr>
            <tr>
                <td>First name:</td>
                <td>
                    <input name="Billing_first_name_id_1" type="text" id="Billing_first_name_id_1"
                    size="15">
                </td>
            </tr>
            <tr>
                <td>Last name:</td>
                <td>
                    <input name="Billing_last_name_id_1" type="text" id="Billing_last_name_id_1"
                    size="15">
                </td>
            </tr>
            <tr>
                <td class="hr" colspan="2">
                    <hr />
                </td>
            </tr>
    </tbody>
    <tr>
        <td><a href="#" id="regCtrl">Register additional attendee</a>

        </td>
    </tr>
</table>

​

js:

(function(window,undefined){

        $(function(){
            $('#regCtrl').click(addFormField);
            $("input.costs").click(costsInpHandler);
        });

        var formcount = 1;

        function addFormField() {
            var lastRepeatingGroup = $('.multiplerows:last');
            var newSection = cloneSection(lastRepeatingGroup);        
            cloneSectionSettings(newSection,lastRepeatingGroup);

            return false;
        };


        function cloneSection(lastRepeatingGroup) {
            var newSection = lastRepeatingGroup.clone();
            var costsInp = $("input.costs", newSection);
            $("input.costs", lastRepeatingGroup).each(function(i){
                var originInpVal = $(this).val();
                $(costsInp[i]).attr("value",originInpVal);
            });
            formcount++;
            costsInp.click(costsInpHandler);

            return newSection;
        }


        function cloneSectionSettings(newSection,lastRepeatingGroup){
            var currentCount = $('.multiplerows').length;
            var newCount = currentCount + 1;
            //newSection.find('input').val(''); This one was clearing your input price values so == '15' never occurs 
            $('input[type=radio]', newSection).removeAttr('checked');
            $('input[type=checkbox]', newSection).removeAttr('checked');
            newSection.insertAfter(lastRepeatingGroup);
            newSection.find("input").each(function (index, input) {
                input.id = input.id.replace("_" + currentCount, "_" + newCount);
                var n = input;
                input.name = input.name.replace("Costs" + currentCount, "Costs" + newCount);
            });
            newSection.find("label").each(function (index, label) {
                var l = $(label);
                l.attr('for', l.attr('for').replace("_" + currentCount, "_" + newCount));
            });

        }


        function costsInpHandler() {
            var parent = $(this).parents('tbody.multiplerows');
            var certCost1 = $(this);
            var inital = certCost1.is(":checked");

            var optionalSpan = $("#optional_span", parent)[inital ? "removeClass" : "addClass"]("gray");
            var optionalCost = $("input[name='special_offers']", parent).attr("disabled", !inital);
            if ($("input.costs:checked", parent).val() == '15') {
                optionalSpan["addClass"]("gray");
                optionalCost.attr("checked", false);
                optionalCost.attr("disabled", true);
            } else {
                optionalSpan["removeClass"]("gray");
                optionalCost.removeAttr("disabled");
            }
        }

    })(window);

​