Question

I want to create a dynamic amount of fields determined by the value selected in a dropDownList. As this will be executed client side it must be done through Javascript. I know I could achieve this effect by creating ALL of the fields before hand and then simply using css to show/hide each one, but this is a lot of repetitive code.

Through trial and error I’ve got it to kind of work, but it either deletes my values when changing my dropdownlist or adds too many boxes if I don’t have it delete the previously created boxes before creating new ones.

Is there a simple way to accomplish what I’m trying to do, without losing entered values on change of the dropdownlist? My attempt at making something is below.

function doAThing() {
    var attemptsValue = parseInt(document.forms['ProgramApplicationForm'].elements['VerificationPrimaryHomePhoneAttemptsDropDownList'].value);

    if (attemptsValue == null) {
        document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML = null;
    } else if (document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML == null) {
        for (counter = 1; counter < attemptsValue + 1; counter++) {
            document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML += 
            '<label for="VerificationPrimaryHomePhoneAttemptDate' + counter + '">Attempt ' + counter + ' Date:</label><input type="text" name="VerificationPrimaryHomePhoneAttemptDate' +  counter + '" value="" id="p-dod-date-picker" maxlength="10" class="size-ten" placeholder="yyyy-mm-dd" title="yyyy-mm-dd" pattern="\d{4}-\d{2}-\d{2}"/>'; 
        }            
    } else {
        document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML = null;

        for (counter = 1; counter < attemptsValue + 1; counter++) {
            document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML += 
            '<label for="VerificationPrimaryHomePhoneAttemptDate' + counter + '">Attempt ' + counter + ' Date:</label><input type="text" name="VerificationPrimaryHomePhoneAttemptDate' +  counter + '" value="" id="p-dod-date-picker" maxlength="10" class="size-ten" placeholder="yyyy-mm-dd" title="yyyy-mm-dd" pattern="\d{4}-\d{2}-\d{2}"/>';             
        }
    }
}

Answer 1

Use element.removeChild and element.appendChild instead of meddling with innerHTML. This will enable you to remove specific nodes in the DOM:

<form name="ProgramApplicationForm">
<select id="VerificationPrimaryHomePhoneAttemptsDropDownList" name="VerificationPrimaryHomePhoneAttemptsDropDownList">
    <option>0</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
    <div id="VerificationPrimaryHomePhoneAttemptDate"></div>
</form>

function createLabelElement(i){
    /* Create the label */
    var label = document.createElement("label");
    label.appendChild(document.createTextNode("Attempt "+i+" Date:")); // add text

    /* create the input and set all attributes */
    var input = document.createElement("input");
    input.type = "text";
    input.value = "";
    input.id="p-dod-date-picker"; // ids should be unique!
    input.maxlength = 10;
    input.className = "size-ten";
    input.placeholder = "yyyy-mm-dd";
    input.title = "yyyy-mm-dd";
    input.pattern = "\d{4}-\d{2}-\d{2}";

     /* a label doesn't need "for", 
       you can actually put your input into the label element 
    */
    label.appendChild(input);

    return label; // return the created element
}

document.getElementById('VerificationPrimaryHomePhoneAttemptsDropDownList').addEventListener('change',function(){
   var numberOfElements = parseInt(this.value);
   var targetDiv = document.getElementById('VerificationPrimaryHomePhoneAttemptDate');   

   // As long we have to many elements remove them
   while(targetDiv.children.length > numberOfElements ){
        targetDiv.removeChild(targetDiv.lastChild);
   }
   // As long we have not enough elements add more
   while(targetDiv.children.length < numberOfElements){
        targetDiv.appendChild(createLabelElement(targetDiv.children.length + 1));
   }
});

Demo

If you want you can still use innerHTML on the created labels, this will make the first function much smaller. Also note that null isn’t a number, it’s an object.