Harvard Extension School
CSCI E-12 Fundamentals of Web Site Development | Fall 2019

## Progressive Enhancement for "add another"

- One strategy would be to hide the "Add Another" button and make it visible through JavaScript.
- Alternatively, we could create the "Add Another" node in JS and then adding it to the page via JS.

    $(document).ready(function() {
      $('#addphone').css('display','inline');
      var numberofphones = 1;
      $('#addphone').click(function() {
          numberofphones++;
          newid = 'phone' + numberofphones;
          $('#phone1').clone().attr('id',newid).insertBefore('#addphone');
      });
     });

A browser with JS disabled would display form with a single phone field.

Example: add_another_unobtrusive.html
With JavaScript disabled in browser:

Copyright © David Heitmeyer