title: Bootstrap 4 Modal with JQuery and AJAX?
body: <p>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. </p>
  
  <p>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.</p>
  
  <p>Could somebody please help?</p>
  
  <p>This is what's giving me problems:</p>
  
  <pre><code>&lt;script&gt;
     $(document).ready(function(){
          $("#save").click(function(){
              $.ajax({            
              //No matter what I put in here, I can't get it to do ANYTHING. 
              });         
          });
     });
  &lt;/script&gt;
  </code></pre>
  
  <p>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.</p>
  
  <p>I have already made the change suggested by gaetanoM below, but it doesn't seem to help.</p>
  
  <pre><code>&lt;script&gt;
  $(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);
              }
          })
      });
  });
  &lt;/script&gt;
  
  
  &lt;script&gt;
     $(document).ready(function(){
          $("#save").click(function(){
              $.ajax({           
                  success: function(res) {
                  console.log(res);
              },
                  error: function(error) {
                  console.log(error);
              } 
              });         
          });
     });
  &lt;/script&gt;
  
  &lt;script&gt;
     $(document).ready(function(){
          $("#save").click(function(){
              $.ajax({           
              //No matter what I put in here, I can't get it to do ANYTHING. 
              });         
          });
     });
  &lt;/script&gt;
  
  &lt;script&gt;
     $(document).ready(function(){
          $("#save").click(function(){
              $.ajax({            
                  $('#myModal').modal('hide'); 
              });         
          });
     });
  &lt;/script&gt;
  
  &lt;script&gt;
     $(document).ready(function(){
          $("#save").click(function(){
              $.ajax({
                  $('#myModal').modal('hide');
              });    
              $('#myModal').modal('hide');
          });
     });
  &lt;/script&gt;
  
  &lt;script&gt;
     $(document).ready(function(){
          $("#save").click(function(){
              $.ajax({
                  $('#myModal').modal('hide');
              });   
  
          });
     });
  &lt;/script&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>I'd like to update the header and ultimately to save the information in an SQLite database. </p>
  
  <p>Note: I'm also using Python and Flask, if that matters.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Title&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"&gt;
  
      &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
      &lt;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"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- I'm trying to update this header as well as a SQLite database whenever the user submits the modal form --&gt;
  &lt;h1 id="display"&gt;Hello World&lt;/h1&gt;
  &lt;button type="button" class="btn" id="showModal" data-toggle="modal" data-target="#myModal"&gt;Show Modal&lt;/button&gt;
  
  &lt;div class="modal fade" id="myModal" tabindex="-1" role="dialog"&gt;
      &lt;div class="modal-dialog" role="document"&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;h5&gt;Modal title&lt;/h5&gt;
                  &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                      &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                  &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;form method="post"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="myInput"&gt;Input&lt;/label&gt;
                          &lt;input type="text" id="myInput" placeholder="Input Here"&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="button" class="btn btn-primary" id="save"&gt;Save changes&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Obviously, this just hides the modal, atm --&gt;
  &lt;script&gt;
     $(document).ready(function(){
          $("#save").click(function(){
              $('#myModal').modal('hide');
          });
     });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>