How to submit ajax form on page load

Question

I want my page to send ajax on page load, but as I'm really new, I tried to use someone's else code.

I wanted you to help me know why it's not working. Note: I get Uncaught TypeError: Object #<HTMLFormElement> has no method 'ajaxSubmit'

Here's the code:

{% if my_data %}
  <form id="data-form-1" action="/dta/import/" method="post">
    {% csrf_token %}
    <input type="hidden" name="current_data" value="{{ my_data }}" />
  </form>
{% endif %}

And here's the script:

<script>document.getElementById('data-form-1').ajaxSubmit({
        dataType : 'json',
        success : function(response, statusText, xhr){
          if(response.result.toLowerCase() == 'ok')
          {
            $(".list-empty").remove();
            addDataArray(response.data);
            btnStatus('success');
          }
          else
            btnStatus('error');
        },
        error : function(xhr, statusText, errorThrown){
          btnStatus('error');
        }
      });
</script>

Hope you can help me.

Note 2: I don't use PHP, just js and HTML

Answer 1

The ajaxSubmit function is jQuery, not a regular JavaScript function on a form, so you need a jQuery object. Change

document.getElementById('data-form-1').ajaxSubmit(...

to

$('#data-form-1').ajaxSubmit(...

Answer 2

document.getElementById('data-form-1') is not a Jquery object. ajaxSubmit can be invoked only on converting the same into a jquery object using $('#data-form-1')