Fork me on GitHub

List of modules

Node

The form below can add as many "Job" fields as you need - check out how it does it!

Your Information:



Male
Female

Last job: 




<form id="jobForm">

  <h4>Your Information: </h4>

  <label class="control-label" for="firstname">First name: </label>
  <input class="form-control" type="text" id="firstname"><br>
  <label class="control-label" for="lastname">Last name: </label>
  <input class="form-control" type="text" id="lastname"><br>
  <input type="radio" name="gender" value="Male"> Male<br>
  <input type="radio" name="gender" value="Female"> Female<br>

  <br>

  <div class="job" id="job1">
    <h4>Last job: </h4>
    <label class="control-label" for="position1">Position: </label>
    <input class="form-control" type="text" id="position1"><br>
    <label class="control-label" for="employer1">Employer: </label>
    <input class="form-control" type="text" id="employer1"><br>
    <label class="control-label" for="dateRange">Dates of Employment: </label>
    <input class="form-control" type="text" id="dateRange"><br>
  </div>

  <input id="submit" type="submit" value="Send" class="btn btn-primary">
  <input id="reset"  type="reset"  value="Reset" class="btn btn-primary">
  <input id="addJob" type="button" value="Add another job" class="btn btn-primary">

</form>
// Create an AUI instance and load the 'aui-node' module
YUI().use(
  'aui-node',
  function(Y) {
    var lastJobNumber = 1;
    var newJobNumber = 2;
    var job = '<div class="job added">' +
      '<h5>Previous job: </h5>' +
      '<label for="position2">Position: </label>' +
      '<input type="text" id="position2"><br>' +
      '<label for="employer2">Employer: </label>' +
      '<input type="text" id="employer2"><br>' +
      '<label for="dateRange">Dates of Employment: </label>' +
      '<input type="text" id="dateRange"><br>' +
    '</div>';

    Y.one('#addJob').on(
      'click',
      function() {
        // Create a new Job node and give it an appropriate ID
        var newJob = Y.Node.create(job);
        newJob.attr('id', 'job' + newJobNumber);

        // Place the node in its spot in the DOM and populate it
        var lastJob = '#job' + lastJobNumber;
        Y.one(lastJob).placeAfter(newJob);

        // Increment the values in case another job is added
        lastJobNumber++;
        newJobNumber++;
      }
    );

    Y.one('#reset').on(
      'click',
      function() {
        // Reset the original number of fields when "Reset" is pressed
        Y.all('#jobForm .added').remove(true);

        lastJobNumber = 1;
        newJobNumber = 2;
      }
    );
  }
);

BSD License.