模式关闭后显示输入值

Question

我正试着做这样的事。
当用户单击“+”图标时，将显示模态内部的表单。

并且当用户点击“添加成员”按钮时，模态会关闭，用户输入的输入值会显示在“+”图标的正下方。问题是，当用户再次点击“+”图标时，表单会显示出来，但当点击“添加成员”按钮时，以前的输入值会被用户输入的最新值所改变。

“+”图标

       <div class="form-group">
                 <span><b>Members:</b></span>
                 <a data-toggle="modal" data-target="#memberModal"><span class="fa fa-plus pull-right"></span></a>
                <div class="row" id="showaddedmember">
                     // DISPLAY ADDED MEMBER HERE
                </div>
       </div>

表单代码段

       <div class="form-group row input_field">
                <label class="col-lg-4" style="text-align: right;">Firstname</label>
                <div class="col-lg-8"><input type="text" class="form-control" name="firstname[]" id="firstname" placeholder="Firstname"></div>
        </div>
        <div class="form-group row input_field">
                <label class="col-lg-4" style="text-align: right;">Middlename</label>
                <div class="col-lg-8"><input type="text" class="form-control" name="middlename[]" placeholder="Middlename"></div>
         </div>
         <div class="form-group row input_field">
                <label class="col-lg-4" style="text-align: right;">Lastname</label>
                <div class="col-lg-8"><input type="text" class="form-control" name="lastname[]" placeholder="Lastname"></div>
         </div>
         <div class="form-group row input_field">
                <label class="col-lg-4" style="text-align: right;">Extension Name</label>
                <div class="col-lg-8"><input type="text" class="form-control" name="extension_name[]" placeholder="Extension Name"></div>
          </div>

          <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                 <button type="button" class="btn btn-default" id="addmember_btn">Add Member</button>
           </div>

单击“添加成员”按钮时（我只尝试显示firstname）

    $('#wrapper').on('click', '#addmember_btn', function(e){
           e.preventDefault();

            var data = new Array();
            var content = "";

            var fname = document.getElementById('firstname').value;

             data[data.length] = fname;

            for(var i = 0; i < data.length; i++) {
                 content +=data[i]+"<br>";
             }

             document.getElementById('showaddedmember').innerHTML = content;

     });

我尝试了console.log（数据），只有输入的最新输入值存储在数据数组中。我正在尝试做这样的事情，但我的形式应该是模态。（http://jsfidle.net/ksuxv/）。

Answer 1

替换

document.getElementById('showaddedmember').innerHTML = content;

与

document.getElementById('showaddedmember').innerHTML += content;