Javascript Dynamic Conditionals
<p>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.</p>

<p>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.</p>

<p>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.</p>

<pre><code>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 &lt; attemptsValue + 1; counter++) {
            document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML += 
            '&lt;label for="VerificationPrimaryHomePhoneAttemptDate' + counter + '"&gt;Attempt ' + counter + ' Date:&lt;/label&gt;&lt;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}"/&gt;'; 
        }            
    } else {
        document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML = null;

        for (counter = 1; counter &lt; attemptsValue + 1; counter++) {
            document.getElementById('VerificationPrimaryHomePhoneAttemptDate').innerHTML += 
            '&lt;label for="VerificationPrimaryHomePhoneAttemptDate' + counter + '"&gt;Attempt ' + counter + ' Date:&lt;/label&gt;&lt;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}"/&gt;';             
        }
    }
}
</code></pre>
