• Home
  • About
  • Contact
  • Speaking

Why HTML form with AJAX submit gives 404?

by Piotr Stapp — on javascript 16 Mar 2016

Imagine you have a simple login HTML form on your /Login page. It looks like below:

<form id="loginForm" method="POST">  
  <input id="textinput" type="text" placeholder="login"/>
  <br/>
  <input id="passwordinput" type="password" placeholder="password"/>
  <br/>
  <button type="submit">Submit</button>
</form>  

Because we all love SPA, I/you/they decide to add AJAX login instead of full reload.
Below AJAX call script uses jQuery, but You can replace it with anything you want. It is only a snippet, not a full code:

// attach to form submit
$("#loginForm").submit(function(e) {
    var url = "/ajaxLogin"; // the url where you handle the form input.
    $.ajax({
           type: "POST",
           url: url,
           data: $("#loginForm").serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert("You did it hurray :D"); // do stuff
           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});

If you want to run above code just use bellow snippet: AJAX form causes 404 - JSFiddle

The problem

From time to time, a small and random group of users sends a bug:

After I log in, I have 404 error

You check your landing page, error handling, etc. - but there isn't anything causing 404.
Desperately you decide to search your www servers like Apache or IIS. You find out that some users have 404 error on POST request to /Login page.

What? Why? When?

Let's check the script. The only POST should go to /ajaxLogin -in fiddler example it is /echo/json. This URL is responsible for handling the form. The /Login page can be a static HTML resource or method with only GET implemented.

So what just happened? There are few similar possibilities:

  • scripts loading was slower than user
  • there is an error in the script, which happens occasionally
  • if You have any other idea just put it in the comments

The solutions

Below my ideas for above problems:

Option 1: accept POST on /Login and handle form correctly. It will work perfectly even if there is a problem with JavaScript. But there is one problem. If it isn't a fault in your script on the login page, the user probably will have problems on the "after-login" page.

Option 2: add URL into form and handle full reload in /ajaxLogin. This option is same as above.

Option 3: disable form until JavaScript is ready. For example, we can remove submit button and add it from JavaScript only. Remember: hiding form will not always work correctly especially for passwords managers.

Option 4: remove the form and use only inputs. This is a bad idea because form element is handled well by accessibility tools

If you have more options please put it in the comments or write me a message.

Updated status - what caused my problem

I found out that some chrome extensions broke my JavaScript. It is not compatible with Require.JS and causes bug like below:

If you know that extension, please send me a name.


Follow @ptrstpp950

0%
Why HTML form with AJAX submit gives 404?
words - read.
Recent Posts:

Comments

comments powered by Disqus
Piotr Stapp Author

Piotr Stapp

Developer, engineer, craftsmen, speaker & biker. User of all useful technologies. Believe in people not papers. DevOps & automation adept. In love with web technologies. I speak here for myself only.

Previous post ReAttach - how to easily (re)attach the debugger in Visual Studio In more complicated projects, simple F5 doesn't compile&debug. In cases where you're working with IIS (w3wp process)…
Next post How to split monolith solution - part 1: common myths Do you have a big and heavy solution? Do you want to split it? Are you afraid? I will…
All content copyright Reset your code © 2016 • All rights reserved.
Proudly published with Ghost