send modal data to jquery bootstrap4

Navigation
0

I have a problem sending data from a modal to jQuery. I do not know why the code does not appear, could you help me edit and tell me what the problem is so it does not happen again?

The error I receive is the following ( screenshot of the error ):

  

$ is not defined

This is the code: 

<!doctype html>
<html lang="es">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Default functionality</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
  <!-- Jquery ui -->
  <link rel="stylesheet" href="js/jquery-ui-1.12.1.custom/jquery-ui.min.css">
  <script type="text/javascript">
  $('#formularioeditar').submit(function(e){
    console.log("llegaron los datos");
  });
</script>
</head>
<body>

  <!-- Modal editar-->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">Open modal for @mdo</button>

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="formularioeditar">
          <div class="form-group">
            <label for="recipient-name" class="form-control-label">Recipient:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="form-group">
            <label for="message-text" class="form-control-label">Message:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send message</button>
      </div>
    </div>
  </div>
</div>



  <!-- jQuery first -->
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <!-- tether -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <!-- BOOTSTRAP MIN -->
  <script src="bootstrap/js/bootstrap.min.js"></script>
  <!-- jquery para ui -->
  <script src="js/jquery/jquery-3.2.1.js"></script>
  <script src="js/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
  <!-- codigo del calendario en assets -->
  <script src="assets/calendario/calendario.js"></script>
  <script src="js/index/index.js"></script>
</body>
</html>
    
asked by Carlos Enrique Gil Gil 22.07.2017 в 20:39
source

2 answers

1

I miss adding the following code and put your code inside it to work: 

$(document).ready(function() {

});

Your code would look something like this: 

$(document).ready(function() {
    $('#formularioeditar').submit(function(e){
    console.log("llegaron los datos");
  });
});

Try this method if it does not work tell me, greetings

    
answered by 28.08.2017 / 20:19
source
0

The whole look that you're using a Wordpress,

This error is quite common to see there, what you should do at the beginning of your JS sheet is declare the variable 

var $ = jQuery;

With this you will be declaring the variable $ as the jQuery library, from there you will have no problem.

You can try the following to see if it loaded correctly: 

var $ = jQuery;
$(document).ready(function(){
alert('asd');
})

And if the page loads an Alert it is that JQuery already works on the file.

You tell us how it went.

    
answered by 23.03.2018 в 21:25
Select rows corresponding to a userid How to identify repeated instances?