<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="name-input" class="col-sm-4 control-label">Name</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="name-input" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="inputselect" class="col-sm-4 control-label">SelectTest</label>
<div class="col-sm-8">
<button class="btn btn-primary dropdown-toggle btn-sm" type="button" id="test-dropdown" data-toggle="dropdown">
<span>Switch Test</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" id="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<button id="accept-btn" type="button" class="btn btn-success btn-default">save</button>
<button id="refuse-btn" type="button" class="btn btn-danger btn-default">cancel</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Javascript:
$('#accept-btn').click(function () {
var name = $('#name-input').val(),
testselected = $('#menu li a').val();
$.ajax({
url: 'sendseletedtest',
method: 'POST',
data: {
name: name, testselected: testselected
},
dataType: 'json',
async: true,
headers: {
'X-CSRF-Token': csrfToken
}
}).done(function ajaxSendDone(data) {
}).fail(function ajaxSendFail() {
});
});