Tong Tong - 4 months ago 27
jQuery Question

How to insert value into a html table row by row from a popup modal using jQuery

I have a textbox for user input and after submit the textbox does not show the result. The textbox only show the result if I click on the textbox again. It means every time I type, the textbox shows null. After I click again the submit button, it only shows again the result.

But what I want is when I finished filled up the information, the information will automatically appear when I click the "Next"button.

Here I provide my code in jsfiddle:



$('.contactSelectDiv').off('click').click(function () {

$('#contactInfoModel').openModal();

})

$('#btnNextContactInfoModel').click(function () {
$("body").find('input[name="email"]').val($('#contacttype').val()+ " " + " " + $('#contact').val());

$('#contactInfoModel').closeModal();


})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="striped">
<h5>Contact</h5>
<thead>
<tr>
<th> </th>
<th>Type</th>
<th>Contact Info</th>
</tr>
</thead>

<tbody>
<tr>
<td>1.</td>
<td>Email 1</td>
<td>
<div class="input-field col s12 m20 l20 contactSelectDiv">
<div class="input-wrapper">
</div>
<input id="email1" name="email" type="text" readonly>

</div>
</td>
</tr>
<tr>
<td>2.</td>
<td>Email 2</td>
<td><div class="input-field col s12 m20 l20 contactSelectDiv">
<div class="input-wrapper">
</div>
<input id="email2" name="email" type="text" readonly>

</div></td>
</tr>
<tr>
<td>3.</td>
<td>Email 3</td>
<td><div class="input-field col s12 m20 l20 contactSelectDiv">
<div class="input-wrapper">
</div>
<input id="email3" name="email" type="text" readonly>

</div></td>
</tr>
<tr>
<td>4.</td>
<td>Handphone 1</td>
<td><div class="input-field col s12 m20 l20 contactSelectDiv">
<div class="input-wrapper">
</div>
<input id="handphone1" name="handphone" type="text" readonly>

</div></td>
</tr>
<tr>
<td>5.</td>
<td>Handphone 2</td>
<td><div class="input-field col s12 m20 l20 contactSelectDiv">
<div class="input-wrapper">
</div>
<input id="handphone2" name="handphone" type="text" readonly>

</div></td>
</tr>
</tbody>
</table>

<div id="contactInfoModel" class="modal modal-fixed-footer" style="max-height:100%;height:80%;width:60%;margin-left:20%;">
<div class="modal-content">
<div class="bread-crumbs-header">
<div class="bread-crumbs-section">
<!--<i class="header-icon small mdi-image-hdr-weak"></i>-->
<div class="header truncate modal-header">
<span data-i18n="personal-particular-update.msg_lookup_contact_info"></span>
</div>
</div>
</div>
<div class="row">
<div class="input-field col s12 m3 l3">
<select id=contacttype>
<option value="" disabled selected>Please select</option>
<option value="1">Type 1</option>
<option value="2">Type 2</option>
<option value="3">Type 3</option>
</select>
<label data-i18n="personal-particular-update.msg_type"></label>
</div>
<div class="col s12 m3 l3">
<td>Contact Info</td>
<div id="Contact Info" >
<input id="contact" name="contacts" type="text">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button id="btnNextContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light blue darken-2 right" type="button">
<i class="mdi-navigation-check"></i>
<span>Next</span>
</button>
<button id="btnCloseContactInfoModel" class="btn-large btn-form-2 btn-floating waves-effect waves-light red darken-2 left" type="button">
<i class="mdi-navigation-close"></i>
<span >cancel</span>
</button>
</div>
</div>





And I provide explanation of my problem in figure, too.

Problem Explanation in Figure

Answer

Change your jquery code, something like this and let me know.

$('.contactSelectDiv').off('click').click(function () {

    $('#contactInfoModel').openModal();
});

$('#btnNextContactInfoModel').click(function () {

    $("#contactInfoModel").closeModal();            
    $("body").find('#email'+ $("#contacttype").val()).val($("#contact").val());
});
Comments