dontknow dontknow - 6 months ago 8
Javascript Question

display input values after modal close

I am trying to do something like this.


When the user clicked on the "+" icon, a form inside a modal will be shown.

form image

And when the user clicks the "add member" button, the modal will be closed and the input values entered by the user will be displayed just below the "+" icon. The problem is, when the user clicks the "+" icon again, the form will be shown, but when the "add member" button is clicked, the previous input values will be changed by the latest values entered by the user.

"+" icon

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


Form code snippet

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


When the "add member" button is clicked (I only tried to display 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;

});


I tried to console.log(data) and only the latest input values entered were stored in the data array. I am trying to do something like this, but my form should be in a modal. (http://jsfiddle.net/KsuxV/).

Answer

Replace

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

with

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