CODEWITHSUNDEEP
javascriptjqueryhtmldynamic
mario
mario

Reputation: 1543

Dynamic Naming of Fieldset

I'm trying to get a form to dynamically add more input fields with id's that are also dynamically generated. I have most of it working except that the fieldset id's are taking on the name of the last input field instead the original fieldset (If you inspect the fieldset's id it says "fenceType2" instead of "fenceDescription2"). If anyone could explain where I'm going wrong it would be very much appreciated! Thanks so much! Here is a fiddle of the code - http://jsfiddle.net/gv0029/dyJjA/ - and here is the code: HTML:

<div id="inputFence1" class="clonedInputFence">
    <fieldset id="fenceDescripton">
        <legend><strong>Fence Description</strong>

        </legend>Fence Description:
        <select name="fenceHeight" id="fenceHeight">
            <option value="select">Select Fence Height</option>
            <option value="6" id="fH6">6 Ft.</option>
        </select>
        <select name="fenceType" id="fenceType">
            <option value="select">Select Fence Type</option>
            <option value="wr1" id="wr1">WRC #1</option>
        </select>
    </fieldset>
</div>
<input type="button" id="btnAddFence" value="Add Another Fence" />
<input type="button" id="btnDelFence" value="Remove Fence" />

JS:

//Dynamic Fence Input Fields
$('#btnAddFence').click(function () {
    var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
    var newNum = new Number(num + 1); // the numeric ID of the new input field being added

    // create the new element via clone(), and manipulate it's ID using newNum value
    var newElem = $('#inputFence' + num).clone().attr('id', 'inputFence' + newNum);

    //Fence Description 
    newElem.children($("select[name=fenceHeight] option:selected")).attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);
    newElem.children($("select[name=fenceType] option:selected")).attr('id', 'fenceType' + newNum).attr('name', 'fenceType' + newNum);
    $('#inputFence' + num).after(newElem);

    // enable the "remove" button
    //$('#btnDel').attr('disabled','');
    $('#btnDelFence').removeAttr('disabled');

    // business rule: you can only add 5 names
    //if (newNum == 5)
    //$('#btnAdd').attr('disabled','disabled');
});

$('#btnDelFence').click(function () {
    var num = $('.clonedInputFence').length; // how many "duplicatable" input fields we currently have
    $('#inputFence' + num).remove(); // remove the last element

    // enable the "add" button
    //$('#btnAdd').attr('disabled','');
    $('#btnAddFence').removeAttr('disabled');

    // if only one element remains, disable the "remove" button
    if (num - 1 == 1) $('#btnDelFence').attr('disabled', 'disabled');
});

$('#btnDelFence').attr('disabled', 'disabled');

Any and all help is appreciated! Thanks again!

Upvotes: 2

Views: 798

Answers (3)

mario
mario

Reputation: 1543

Hey I actually figured out how to fix this. Firstly I removed the separate id's between the different sections of the code to make it more manageable and then I changed the way I was trying to create the newElements from:

 newElem.children($("select[name=fenceHeight] option:selected")).attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);

to: 

newElem.find(':input[name="railQuantity"]').attr('id', 'railQuantity' + newNum).attr('name', 'railQuantity' + newNum);

the majore problem obviously being my selector. Thanks for y'all help! It was very much appreciated!

Upvotes: 0

Olaf Dietsche
Olaf Dietsche

Reputation: 74058

From .children()

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

Since you give $(...) instead of just a selector string, children seems to select the direct children of the cloned div, which is fieldset.

So, you should make two changes

  • use .find() instead of children
  • use a selector string
newElem.find("select[name=fenceHeight]").attr('id', 'fenceHeight' + newNum).attr('name', 'fenceHeight' + newNum);
newElem.find("select[name=fenceType]").attr('id', 'fenceType' + newNum).attr('name', 'fenceType' + newNum);

See modified JSFiddle

Upvotes: 1

Alex Shilman
Alex Shilman

Reputation: 1547

Like this DEMO

  //Fence Description 
  newElem.children('fieldset').attr('id', 'fenceDescripton'+newNum);
  newElem.children("select[name=fenceHeight] option:selected").attr('id', 'fenceHeight' +  newNum).attr('name', 'fenceHeight' + newNum);
  newElem.children("select[name=fenceType] option:selected").attr('id', 'fenceType' + newNum).attr('name', 'fenceType' + newNum);
  $('#inputFence' + num).after(newElem);

Upvotes: 1

Related Questions