How to implement javascript code in django template?

Question

I am trying to prevent the submission of a button when pressed. But with my javascript code, the button still refreshes the page when the submit button is pressed. Here's my code (doesn't work):

<html>
   <head>
       <title>tangina</title>
   </head>

   <body>
       <form action="POST" class='user-signup-form'>
           {% csrf_token %}

           <input type="text">
           <button type="submit">submit</button>
       </form>


       <script>
           $(document).ready(function(){
               var userForm = $(".user-signup-form")

               userForm.submit(function(event){
                   event.preventDefault();
               })
           });
       </script>

       <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
       <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
       <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
   </body>
</html>

this is just a simple code, I'm just trying to try to prevent the button from submitting form when pressed. What am I doing wrong here?

This is purely a javascript issue. – bruno desthuilliers Dec 18 '19 at 09:40 — bruno desthuilliers, Dec 18 '19 at 09:40

score 0 · Accepted Answer · answered Dec 18 '19 at 08:33

0

Try just your html code first, you will notice there is nothing to deal with django.

The $ is not defined yet. because the jquery is not loaded yet.

Just see this answer to understand your error :

$(document).ready(function(){}); vs script at the bottom of page

Moreover you can open the console (by pressing F12) to get more informations about your problem.

answered Dec 18 '19 at 08:33

Christophe Debove

6,088
20
73
124

Ok, now I get it, the page should load the jquery scripts first before my own script. My mistake here is, putting my code before the jquery script tag. Thank you for your help! – newbie programmer Dec 18 '19 at 08:47

score 0 · Answer 2 · answered Dec 18 '19 at 08:39

Problem occurred because you try to execute jQuery code before loading jQuery library js file Move your following code snipet bellow all other script.

   <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
       $(document).ready(function(){
           var userForm = $(".user-signup-form")

           userForm.submit(function(event){
               event.preventDefault();
           })
       });
   </script>

How to implement javascript code in django template?

2 Answers2