Add new input lines to HTML entry form

Enable users to add a row of fields to an HTML input form. In this code, after the HTML loads, addForm() is called. Clicking the Add Line button calls a function, addLine(), which calls addField() once for each field in the new input line. The elements, label and input, are formatted using CSS.

Generate array of objects

Loop through HTML form lines and store the data into an array of objects

Generate a table containing data from array of objects

Local Name Local DOB Local Age Local Zodiac

Things Javascript and jQuery Do Differently

  1. Javascript is a language (with a standard library and DOM API), whereas jQuery is a library built as a wrapper for Javascript.
  2. jQuery uses the $ to replace Javascript's document.getElementById, reducing the amount of typing necessary for any code.
  3. jQuery is able to select elements of the DOM with CSS selectors, for instance $("#p01") would select the element with ID "p01". Javascript would require a document.getElementById("p01") to achieve the same effect.
  4. jQuery has built in animations such as slideDown() or slideUp(). Getting the same effects in Javascript would require a lot more work.
  5. jQuery's framework has been designed to work well with all browsers, Javascript may or may not work in some browsers, depending on how it's written.