Essentially, I've got a form inside a modal. I need to get the information out of the modal so I can use it in the rest of my app.
I've tried following some tutorials I found that use JQuery and AJAX to handle the information, but I can't seem to get them to work.
Could somebody please help?
This is what's giving me problems:
<script>
$(document).ready(function(){
$("#save").click(function(){
$.ajax({
//No matter what I put in here, I can't get it to do ANYTHING.
});
});
});
</script>
As requested, things I've tried (not all at once obviously). For all of them, when I click the save button, absolutely nothing happens. I don't get any output to the console, I can't get the modal to close, nothing.
I have already made the change suggested by gaetanoM below, but it doesn't seem to help.
<script>
$(document).ready(function(){
$("#save").click(function(){
$.ajax({
url: '/test',
data: {
display: $('#myInput').val(),
},
type: 'POST',
success: function(res) {
$('#myModal').modal('hide');
},
error: function(error) {
$('#myModal').modal('hide');
console.log(error);
}
})
});
});
</script>
<script>
$(document).ready(function(){
$("#save").click(function(){
$.ajax({
success: function(res) {
console.log(res);
},
error: function(error) {
console.log(error);
}
});
});
});
</script>
<script>
$(document).ready(function(){
$("#save").click(function(){
$.ajax({
//No matter what I put in here, I can't get it to do ANYTHING.
});
});
});
</script>
<script>
$(document).ready(function(){
$("#save").click(function(){
$.ajax({
$('#myModal').modal('hide');
});
});
});
</script>
<script>
$(document).ready(function(){
$("#save").click(function(){
$.ajax({
$('#myModal').modal('hide');
});
$('#myModal').modal('hide');
});
});
</script>
<script>
$(document).ready(function(){
$("#save").click(function(){
$.ajax({
$('#myModal').modal('hide');
});
});
});
</script>
Below is a very, very stripped down version of what I'm trying to do. At the moment, all the save button does is hide the modal.
I'd like to update the header and ultimately to save the information in an SQLite database.
Note: I'm also using Python and Flask, if that matters.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</head>
<body>
<!-- I'm trying to update this header as well as a SQLite database whenever the user submits the modal form -->
<h1 id="display">Hello World</h1>
<button type="button" class="btn" id="showModal" data-toggle="modal" data-target="#myModal">Show Modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5>Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post">
<div class="form-group">
<label for="myInput">Input</label>
<input type="text" id="myInput" placeholder="Input Here">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="save">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Obviously, this just hides the modal, atm -->
<script>
$(document).ready(function(){
$("#save").click(function(){
$('#myModal').modal('hide');
});
});
</script>
</body>
</html>
