Submit form via JavaScript to the correct Post action URL in the background

Question

I have the following form:

<div id="another"><form action='/post' name='submitform' id="submitform" method='post' class='pure-form'>

  [...]

  <textarea columns="40" rows="4" name='entry[body]' id="statement">
  </textarea>

  <input type='submit' id="submitbutton" name="btnSubmit" value="save" class="pure-button pure-button-primary">

</form></div>

When the user clicks on the submit button I want the form to be processed first by a script that will check the contents of #statement and then do a Post request for the form in the background. I prefer to do it in JavaScript (not jQuery).

I tried using

 document.querySelector('#submitform').addEventListener('submit', function(e) {
   e.preventDefault();
   console.log('attempt');
   // so smth to submit the form in background - what?
 });

but it doesn't seem to "catch" the form and it still submits...

What am I doing wrong?

UPDATE - had a typo in html

http://stackoverflow.com/questions/5915893/stop-form-submission-with-submit-eventlistener — orhanhenrik, Apr 12 '15 at 13:34
@Yevgen it still submits for some reason. Maybe it's because of the name of my submit button? — Aerodynamika, Apr 12 '15 at 13:51
Your code works on my end. https://jsfiddle.net/vux3o7jL/ Logs `'attempt'` and doesn't submit. — TiiJ7, Apr 12 '15 at 14:01
Maybe it's because I have this form inside of a DIV? Because when I move it out of that DIV it works, but when it's inside it doesn't - see code update — Aerodynamika, Apr 12 '15 at 14:03
https://jsfiddle.net/vux3o7jL/1/ Doesn't seem to make a difference here — TiiJ7, Apr 12 '15 at 14:12
Probably has to do something with styles - probably this div is loading after i attach the event to the click... so how to deal with that? — Aerodynamika, Apr 12 '15 at 14:15
Is the `div` dynamically generated with JavaScript? If not, putting the `script` after the `div` should work. You can also use the [`DOMContentLoaded`](https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded) event. — TiiJ7, Apr 12 '15 at 14:27
@TiiJ7 Yes, thank you! `DOMContentLoaded` was exactly what I needed. Could you please add the answer so I can accept it and also – is this DOMContentLoaded compatible or is it maybe just better to use `onSubmit` attribute in the form and get a function handling that? — Aerodynamika, Apr 12 '15 at 14:30

raam86 · Answer 1 · 2015-04-12T13:44:40.257

1

Your html is invalid remove the first </form> tag. This way all elements will be associated with the same form.

<form action='/post' name='submitform' id="submitform" method='post' class='pure-form'>
   [...] 
   <textarea columns="40" rows="4" name='entry[body]' id="statement"></textarea>
   <input type='submit' id="submitbutton" name="btnSubmit" value="save" class="pure-button pure-button-primary"> 
</form>

see it working here

edited Apr 12 '15 at 13:44

answered Apr 12 '15 at 13:36

raam86

6,785
2
31
46

sorry i had a typo in html – Aerodynamika Apr 12 '15 at 13:40

score 1 · Accepted Answer · edited May 23 '17 at 12:06

As we deduced in the comments, the code works, but the submit handler was bound before the <form> was fully loaded.

One way to solve this is to put the code inside a listener for the DOMContentLoaded event. Support for DOMContentLoaded is rather good, with only IE8 having problems with it (although it doesn't support addEventListener either anyway).

document.addEventListener("DOMContentLoaded", function(event) {
    // ...
});

Another way is to put the <script> below the <form></form> tag.

There is also the inline onsubmit=..., but inline JavaScript is considered bad practice nowadays for various reasons (mostly maintainability). You should only really use this if you need to support very old browsers that can't bind events otherwise.

As for submitting the form in the "background" you can use AJAX. There are a lot of great resources/tutorials for this.

Submit form via JavaScript to the correct Post action URL in the background

2 Answers2