Question

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

form image

当用户点击“添加成员”按钮时，模式将被关闭，用户输入的输入值将显示在“+”图标的正下方。问题是，当用户再次单击“+”图标时，将显示表单，但是当单击“添加成员”按钮时，先前的输入值将由用户输入的最新值更改。

“+”图标

       <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>

点击“添加会员”按钮时（我只是尝试显示名字）

    $('#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://jsfiddle.net/KsuxV/）。

Answer 1

替换

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

与

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

Answer 2

你已经在使用jQuery，use jQuery。它会处理content内部但showaddedmemeber的结尾处。

$('#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>";
    }

    $('#showaddedmember').append(content);

 });

模态关闭后显示输入值

2 个答案: