Popup Message Box Form

How to display a popup form from a button/link click in a webpage

I was trying to figure out how to get a popup form to appear from a button click in a table, with the form making use of data from the row in which the button is clicked. Apparently this is a modal form which took me a while to find out!

The Button

The button is actually a a link within a table cell styled by bootstrap.

<td><a class="btn btn-default btn-sm" id="message" href="#">Message</a></td>

The Form

The form is just standard html and can be placed anywhere in the page, it will be hidden by the modal classes.

<div class="modal fade"
     id="modalMessage">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button"
				        class="close"
				        data-dismiss="modal"
				        aria-label="Close">
					<span aria-hidden="true">×</span>
				</button>
				<h4 class="modal-title">Message</h4>
			</div>
			<div class="modal-body">
				<textarea class="form-control"
				          id="messageContent"
				          rows="3"
				          required><
				          textarea>
			</div>
			<div
			     class="modal-footer">
				<button type="button"
				        class="btn btn-default"
				        data-dismiss="modal">Cancel</button>
				<button type="button"
				        class="btn btn-primary"
				        id="messageSubmit">Send Message</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

The Handler

The javascript handler isn’t necessary to get this working but it is needed to bring through the first name of the customer from the third column of the data table (id=”datatable”).

<script type="text/javascript">
	$('table tbody tr td a#message').on('click', function () {
		$("#modalMessage").modal("show");
		var table = $('#datatable').DataTable();
		var data = table.row(this.closest("tr")).data();
		$("#messageContent").attr('placeholder', 'Hi ' + data[2]);
	});
	
	$('#messageSubmit').click(function (e) {
		$(this.form).submit();
		$('#modalMessage').modal('hide');
	});
</script>