Listener for form submission not working with jQuery

Question

I am having a simple problem with my listener. So the following html is served up by Django upon reaching the homepage of my app:

<!DOCTYPE html>

{% load staticfiles %} 

<html>
    <head>
      {% csrf_token %}
        <title>Tempo</title>

    <link rel="stylesheet" type="text/css" href="{% static "css/styles.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>    
     <script>
        $( "#myform" ).on( "submit", function( event ) {
          console.log("This should fire after form submission")
        });
        $( "#myform" ).submit(function() {
          console.log("This should fire after form submission")
        });
    </script>
</head>
<body>
  <div id="header">
    <img id="logo" src="{% static "img/logo_wt.svg" %}"/>
  </div>
  {% csrf_token %}
  <form id="myform" action="/" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="csvFile">
    <input type="submit" value="Submit">
  </form>  
</body>

I want to carry out a set of actions after the form is submitted, but for some reason I can't get the event listener to fire. I have tried both on and submit methods with no luck. Anyone know whats going on

Related: [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Jonathan Lonowski, Aug 10 '15 at 03:36

Steven Moseley · Accepted Answer · 2015-08-10T03:28:42.413

It's not working, because when the script is executing, #myform doesn't exist yet.

There are two solutions to this:

A. Put the script at the end of your doc, after the form is created.

This is the preferred solution. Placing JS at the end of your body is now considered a best practice, as it allows the DOM to load and paint first, giving the user a slightly faster perceived page-load time.

<!DOCTYPE html>

{% load staticfiles %} 

<html>
<head>
    {% csrf_token %}
    <title>Tempo</title>
    <link rel="stylesheet" type="text/css" href="{% static "css/styles.css" %}">
    <link rel="stylesheet" type="text/css" href="{% static "css/bootstrap.min.css" %}">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>    
</head>
<body>
  <div id="header">
    <img id="logo" src="{% static "img/logo_wt.svg" %}"/>
  </div>
  {% csrf_token %}
  <form id="myform" action="/" method="POST" enctype="multipart/form-data">
    {% csrf_token %}
    <input type="file" name="csvFile">
    <input type="submit" value="Submit">
  </form>  
     <script>
        $( "#myform" ).on( "submit", function( event ) {
          console.log("This should fire after form submission")
        });
        $( "#myform" ).submit(function() {
          console.log("This should fire after form submission")
        });
    </script>
</body>
</html>

B. Alternatively, encase it in a document-ready handler, which will execute after the DOM is fully loaded (see here for more details: https://api.jquery.com/ready/):

<script>
    $(function() {
        $( "#myform" ).on( "submit", function( event ) {
          console.log("This should fire after form submission")
        });
        $( "#myform" ).submit(function() {
          console.log("This should fire after form submission")
        });
    });
</script>

PS - Both of the event-handling methods you used will work. You can eliminate one to prevent duplication of events.

You caught my problem. It wasn't the order of things, but rather I had a syntax error which was not encasing my listeners correctly. Thanks for mentioning both solutions. — theamateurdataanalyst, Aug 10 '15 at 03:31
@theamateurdataanalyst - Either solution should work. As I mentioned in my post, it's considered a best-practice these days to put your JS at the end of body instead of within an onload callback. — Steven Moseley, Aug 10 '15 at 03:33

score 1 · Answer 2 · answered Aug 10 '15 at 03:24

You have added your script before the form is added to the dom so the selector will not be able to find the form element to attache the event handler.

So you can either use a dom ready handler as given below, or move the script to the bottom of the page after the markup of the form element

jQuery(function ($) {
    $("#myform").on("submit", function (event) {
        console.log("This should fire after form submission")
    });
    $("#myform").submit(function () {
        console.log("This should fire after form submission")
    });
})

Listener for form submission not working with jQuery

2 Answers2