顯示動態生成的輸入字段的輸入值

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>