显示动态生成的输入字段的输入值

Question

我有一个表格，用户可以动态添加多个地址部分以输入其不同的办公地点。填写完表格后，用户可以“预览”他们输入的信息。我可以显示输入到原始地址部分的数据。但是，我还需要显示输入到动态生成的地址部分中的数据。我将如何显示他们输入到新生成的地址部分的信息？ 任何帮助将不胜感激。

$(document).ready(function() {
  //Variables
  var x = 0;
  var address = document.getElementById('inputAddress');
  var address2 = document.getElementById('inputAddress2');
  var city = document.getElementById('inputCity');
  var state = document.getElementById('state');
  var zip = document.getElementById('inputZip');
  var phone = document.getElementById('phone');
  var cell = document.getElementById('cell');
  var email = document.getElementById('email');
  var fax = document.getElementById('fax');

  //Add another address section
  $('#add_location_btn').click((e) => {
    e.preventDefault();
    appendLocation(); // Append New Form Section
    x++; // Increment Counter
  });

  //Construct and append the new address section
  let appendLocation = () => {
    $('#location_wrapper').append(
      '<section class="location-section">' +
      '<hr>' +
      '<div class="form-row">' +
      '<div class="form-group col-sm-12">' +
      '<button type="button" id="delete-location-btn-' +
      x +
      '" class="btn btn-danger deleteBtn shadow-none float-right"><i class="glyphicon glyphicon-trash">Delete Location</i></button>' +
      '</div>' +
      '</div>' +
      '<div class="form-row">' +
      '<div class="form-group col-sm-12">' +
      '<div class="field">' +
      '<label for="inputAddress1-' +
      x +
      '">Address1</label>' +
      '<input type="text" id="inputAddress1-' +
      x +
      '" class="form-control location" name="inputAddress1-' +
      x +
      '">' +
      '</div>' +
      '</div>' +
      '</div>' +
      '<div class="form-row">' +
      '<div class="form-group col-sm-12">' +
      '<div class="field">' +
      '<label for="inputAddress2-' +
      x +
      '">Address2</label>' +
      '<input type="text" id="inputAddress2-' +
      x +
      '" class="form-control location" name="inputAddress2-' +
      x +
      '">' +
      '</div>' +
      '</div>' +
      '</div>' +
      '<div class="form-row">' +
      '<div class="form-group col-md-6">' +
      '<div class="field">' +
      '<label for="inputCity-' +
      x +
      '">City</label>' +
      '<input type="text" class="form-control location" id="inputCity-' +
      x +
      '" name="inputCity' +
      x +
      '">' +
      '</div>' +
      '</div>' +
      '<div class="form-group col-md-4">' +
      '<div class="field">' +
      '<label for="state-' +
      x +
      '">State</label>' +
      '<select id="state-' +
      x +
      '" class="custom-select location" name="state-' +
      x +
      '">' +
      "<option selected>filler state</option>" +
      "</select>" +
      '</div>' +
      '</div>' +
      '<div class="form-group col-md-2">' +
      '<div class="field">' +
      '<label for="inputZip-' + x + '">Zip</label>' +
      '<input type="text" class="form-control location" id="inputZip-' + x + '" name="inputZip-' + x + '">' +
      '</div>' +
      '</div>' +
      '</div>' +
      '<div class="form-row">' +
      '<div class="form-group col-md-3">' +
      '<div class="field">' +
      '<label for="phone-' + x + '">Phone</label>' +
      '<input type="text" class="form-control location" id="phone-' + x + '" name="phone-' + x + '">' +
      '</div>' +
      '</div>' +
      '<div class="form-group col-md-3">' +
      '<div class="field">' +
      '<label for="cell-' + x + '">Cell</label>' +
      '<input type="text" class="form-control location" id="cell-' + x + '" name="cell-' + x + '">' +
      '</div>' +
      '</div>' +
      '<div class="form-group col-md-3">' +
      '<div class="field">' +
      '<label for="email-' +
      x +
      '">Email</label>' +
      '<input type="email" class="form-control location" id="email-' +
      x +
      '" name="email-' +
      x +
      '">' +
      '</div>' +
      '</div>' +
      '<div class="form-group col-md-3">' +
      '<div class="field">' +
      '<label for="fax-' +
      x +
      '">Fax</label>' +
      '<input type="text" class="form-control location" id="fax-' +
      x +
      '" name="fax-' +
      x +
      '">' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</section>'
    )
  };

  // Remove sections and button control
  $('#location_wrapper').on('click', '.deleteBtn', function(e) {
    e.preventDefault();

    // find div and delete based on the closest parent section
    $(this)
      .closest('section, deleteBtn')
      .remove();
    // decrement the counter for form.
    x--;
  });

  //Preview the entered data, prior to submission
  $('#preview_button').click(function(e) {
    e.preventDefault();
    document.getElementById('displayAddress1').innerText = address.value
    document.getElementById('displayAddress2').innerText = address2.value
    document.getElementById('displayCity').innerText = city.value
    document.getElementById('displayState').innerText = state.value
    document.getElementById('displayZip').innerText = zip.value
    document.getElementById('displayPhone').innerText = phone.value
    document.getElementById('displayCell').innerText = cell.value
    document.getElementById('displayEmail').innerText = email.value
    document.getElementById('displayFax').innerText = fax.value
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="previewModal" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="profilePreview" aria-describedby="Profile Preview" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Profile Preview</h5>
        <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button> -->
      </div>
      <div class="modal-body">
        <div class="container-fluid">
          <div class="row">
            <div class="col-md-3">Address:</div>
            <div class="col-md-9 ml-auto">
              <span id="displayAddress1"></span>
              <br>
              <span id="displayAddress2"></span>
              <br>
              <span id="displayCity"></span>
              <span id="displayState"></span>
              <span id="displayZip"></span>
              <br>
              <div id="dynamicAddress"></div>
            </div>
          </div>
          <div class="row">
            <div class="col-md-3">Phone:</div>
            <div class="col-md-9 ml-auto"><span id="displayPhone"></span></div>
            <div class="col-md-3">Cell:</div>
            <div class="col-md-9 ml-auto"><span id="displayCell"></span></div>
            <div class="col-md-3">Email:</div>
            <div class="col-md-9 ml-auto"><span id="displayEmail"></span></div>
            <div class="col-md-3">Fax:</div>
            <div class="col-md-9 ml-auto"><span id="displayFax"></span></div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" id="acceptProfile" class="btn btn-primary" data-dismiss="modal">Accept</button>
        <button type="button" id="rejectProfile" class="btn btn-danger" data-dismiss="modal">Reject</button>
      </div>
    </div>
  </div>
</div>
<form name="addProfileForm" id="addProfileForm">
  <fieldset>
    <div class="form-card">
      <div class="form-row">
        <div class="col-12">
          <h4>Enter Office Locations</h4>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-sm-12">
          <div class="field">
            <label for="inputAddress">Address</label>
            <input type="text" class="form-control" id="inputAddress" name="inputAddress">
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-sm-12">
          <div class="field">
            <label for="inputAddress2">Address 2</label>
            <input type="text" class="form-control" id="inputAddress2" name="inputAddress2">
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-6">
          <div class="field">
            <label for="inputCity">City</label>
            <input type="text" class="form-control" id="inputCity" name="inputCity">
          </div>
        </div>
        <div class="form-group col-md-4">
          <div class="field">
            <label for="state">State</label>
            <select id="state" class="custom-select location" name="state">
              <option selected>Test State</option>
            </select>
          </div>
        </div>
        <div class="form-group col-md-2">
          <div class="field">
            <label for="inputZip">Zip</label>
            <input type="text" class="form-control" id="inputZip" name="inputZip">
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-3">
          <div class="field">
            <label for="phone">Phone</label>
            <input type="text" class="form-control" id="phone" name="phone">
          </div>
        </div>
        <div class="form-group col-md-3">
          <div class="field">
            <label for="cell">Cell</label>
            <input type="text" class="form-control" id="cell" name="cell">
          </div>
        </div>
        <div class="form-group col-md-3">
          <div class="field">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email" name="email">
          </div>
        </div>
        <div class="form-group col-md-3">
          <div class="field">
            <label for="fax">Fax</label>
            <input type="text" class="form-control" id="fax" name="fax">
          </div>
        </div>
      </div>
      <div id="location_wrapper"></div>
      <div class='form-row'>
        <div class="form-group col-sm-12">
          <button type="button" id="add_location_btn" class="btn btn-primary shadow-none float-right">Add
                    Location</button>
        </div>
      </div>
      <div class="form-row">
        <div class="col-sm-12">
          <div class="d-flex justify-content-center">
            <button type="button" id="preview_button" class="btn btn-primary shadow-none mr-4" data-toggle="modal" data-target="#previewModal">Preview</button>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
</form>

Answer 1

这是一种方法

  $('#preview_button').click(function(e) {
    e.preventDefault();
    const preview = $(":input").map(function() {
      return `${this.name}:${this.value}` 
    }).get().join('<br/>')
    $("body").append(preview);
  });

$(document).ready(function() {
  //Variables
  var x = 0;
  var address = document.getElementById('inputAddress');
  var address2 = document.getElementById('inputAddress2');
  var city = document.getElementById('inputCity');
  var state = document.getElementById('state');
  var zip = document.getElementById('inputZip');
  var phone = document.getElementById('phone');
  var cell = document.getElementById('cell');
  var email = document.getElementById('email');
  var fax = document.getElementById('fax');

  //Add another address section
  $('#add_location_btn').click((e) => {
    e.preventDefault();
    appendLocation(); // Append New Form Section
    x++; // Increment Counter
  });

  //Construct and append the new address section
  let appendLocation = () => {
    $('#location_wrapper').append(
      '<section class="location-section">' +
      '<hr>' +
      '<div class="form-row">' +
      '<div class="form-group col-sm-12">' +
      '<button type="button" id="delete-location-btn-' +
      x +
      '" class="btn btn-danger deleteBtn shadow-none float-right"><i class="glyphicon glyphicon-trash">Delete Location</i></button>' +
      '</div>' +
      '</div>' +
      '<div class="form-row">' +
      '<div class="form-group col-sm-12">' +
      '<div class="field">' +
      '<label for="inputAddress1-' +
      x +
      '">Address1</label>' +
      '<input type="text" id="inputAddress1-' +
      x +
      '" class="form-control location" name="inputAddress1-' +
      x +
      '">' +
      '</div>' +
      '</div>' +
      '</div>' +
      '<div class="form-row">' +
      '<div class="form-group col-sm-12">' +
      '<div class="field">' +
      '<label for="inputAddress2-' +
      x +
      '">Address2</label>' +
      '<input type="text" id="inputAddress2-' +
      x +
      '" class="form-control location" name="inputAddress2-' +
      x +
      '">' +
      '</div>' +
      '</div>' +
      '</div>' +
      '<div class="form-row">' +
      '<div class="form-group col-md-6">' +
      '<div class="field">' +
      '<label for="inputCity-' +
      x +
      '">City</label>' +
      '<input type="text" class="form-control location" id="inputCity-' +
      x +
      '" name="inputCity' +
      x +
      '">' +
      '</div>' +
      '</div>' +
      '<div class="form-group col-md-4">' +
      '<div class="field">' +
      '<label for="state-' +
      x +
      '">State</label>' +
      '<select id="state-' +
      x +
      '" class="custom-select location" name="state-' +
      x +
      '">' +
      "<option selected>filler state</option>" +
      "</select>" +
      '</div>' +
      '</div>' +
      '<div class="form-group col-md-2">' +
      '<div class="field">' +
      '<label for="inputZip-' + x + '">Zip</label>' +
      '<input type="text" class="form-control location" id="inputZip-' + x + '" name="inputZip-' + x + '">' +
      '</div>' +
      '</div>' +
      '</div>' +
      '<div class="form-row">' +
      '<div class="form-group col-md-3">' +
      '<div class="field">' +
      '<label for="phone-' + x + '">Phone</label>' +
      '<input type="text" class="form-control location" id="phone-' + x + '" name="phone-' + x + '">' +
      '</div>' +
      '</div>' +
      '<div class="form-group col-md-3">' +
      '<div class="field">' +
      '<label for="cell-' + x + '">Cell</label>' +
      '<input type="text" class="form-control location" id="cell-' + x + '" name="cell-' + x + '">' +
      '</div>' +
      '</div>' +
      '<div class="form-group col-md-3">' +
      '<div class="field">' +
      '<label for="email-' +
      x +
      '">Email</label>' +
      '<input type="email" class="form-control location" id="email-' +
      x +
      '" name="email-' +
      x +
      '">' +
      '</div>' +
      '</div>' +
      '<div class="form-group col-md-3">' +
      '<div class="field">' +
      '<label for="fax-' +
      x +
      '">Fax</label>' +
      '<input type="text" class="form-control location" id="fax-' +
      x +
      '" name="fax-' +
      x +
      '">' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</section>'
    )
  };

  // Remove sections and button control
  $('#location_wrapper').on('click', '.deleteBtn', function(e) {
    e.preventDefault();

    // find div and delete based on the closest parent section
    $(this)
      .closest('section, deleteBtn')
      .remove();
    // decrement the counter for form.
    x--;
  });

  //Preview the entered data, prior to submission
  $('#preview_button').click(function(e) {
    e.preventDefault();
    const preview = $(":input").map(function() {
      return `${this.name}:${this.value}` 
    }).get().join('<br/>')
    $("body").append(preview);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="addProfileForm" id="addProfileForm">
  <fieldset>
    <div class="form-card">
      <div class="form-row">
        <div class="col-12">
          <h4>Enter Office Locations</h4>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-sm-12">
          <div class="field">
            <label for="inputAddress">Address</label>
            <input type="text" class="form-control" id="inputAddress" name="inputAddress">
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-sm-12">
          <div class="field">
            <label for="inputAddress2">Address 2</label>
            <input type="text" class="form-control" id="inputAddress2" name="inputAddress2">
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-6">
          <div class="field">
            <label for="inputCity">City</label>
            <input type="text" class="form-control" id="inputCity" name="inputCity">
          </div>
        </div>
        <div class="form-group col-md-4">
          <div class="field">
            <label for="state">State</label>
            <select id="state" class="custom-select location" name="state">
              <option selected>Test State</option>
            </select>
          </div>
        </div>
        <div class="form-group col-md-2">
          <div class="field">
            <label for="inputZip">Zip</label>
            <input type="text" class="form-control" id="inputZip" name="inputZip">
          </div>
        </div>
      </div>
      <div class="form-row">
        <div class="form-group col-md-3">
          <div class="field">
            <label for="phone">Phone</label>
            <input type="text" class="form-control" id="phone" name="phone">
          </div>
        </div>
        <div class="form-group col-md-3">
          <div class="field">
            <label for="cell">Cell</label>
            <input type="text" class="form-control" id="cell" name="cell">
          </div>
        </div>
        <div class="form-group col-md-3">
          <div class="field">
            <label for="email">Email</label>
            <input type="email" class="form-control" id="email" name="email">
          </div>
        </div>
        <div class="form-group col-md-3">
          <div class="field">
            <label for="fax">Fax</label>
            <input type="text" class="form-control" id="fax" name="fax">
          </div>
        </div>
      </div>
      <div id="location_wrapper"></div>
      <div class='form-row'>
        <div class="form-group col-sm-12">
          <button type="button" id="add_location_btn" class="btn btn-primary shadow-none float-right">Add
                    Location</button>
        </div>
      </div>
      <div class="form-row">
        <div class="col-sm-12">
          <div class="d-flex justify-content-center">
            <button type="button" id="preview_button" class="btn btn-primary shadow-none mr-4" data-toggle="modal" data-target="#previewModal">Preview</button>
          </div>
        </div>
      </div>
    </div>
  </fieldset>
</form>