Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Juliana Madrone
Juliana Madrone
8,552 Points
Posted by Juliana Madrone
Juliana Madrone
8,552 Points

Getting a 405 error when I try to submit my form

I'm building a form with select elements. When the user hits the submit button, I want to use some jQuery to deal with the information and return a result. But when I'm testing the submit button all I get is a 405 error, so I can't even get to working on the jQuery. Any thoughts on what I'm doing wrong?

I've tried putting different action attributes in there too, like "#" or "index.html"

Here's the code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>If Your Boss Were A Composer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <form method="post">
      <h1>Take the Quiz: How to Succeed in Business by Tapping into your Boss' Composer Alter Ego.</h1>
      <h2>Which Composer is your Boss' Counterpart? Find out, and get some tips to stay on your boss' good side!</h2>

      <fieldset>
        <legend>A Few Questions...</legend>

        <label for="name">Name:</label>
        <input type="text" id="name" name="user_name">

        <label for="drink">1. What is your boss' morning beverage of choice?</label>
        <select id="drink" name="boss_drink">
          <option value="1">a. Tea</option>
          <option value="2">b. Coffee, preferably single-origin, pour-over.</option>
          <option value="3">c. Triple, skinny, sugar-free vanilla latte with extra foam</option>
          <option value="4">d. Green as grass smoothie</option>
          <option value="5">e. I have no idea; by the time the office opens my boss has been up for at least 4 hours, run a 10k, read the Wall Street Journal cover to cover, and fired the interns... again.</option>
        </select>

        <label for="car">2. How does your boss get to work?</label>
        <select id="car" name="boss_car">
          <option value="1">a. A stroll through the neighboring park, past the bakery, </option>
          <option value="2">b. A fixed gear bike, helmut optional.</option>
          <option value="3">c. A brand new car parked in the reserved space in front.</option>
          <option value="4">d. The bus, or if the boss misses the bus, then the subway, or the streetcar, or maybe just hitching a ride.</option>
          <option value="5">e. A black Lincoln with tinted windows and a driver on staff.</option>
        </select>

        <label for="">3. </label>
        <select id="" name="">
          <option value="1">a. </option>
          <option value="2">b. </option>
          <option value="3">c. </option>
          <option value="4">d. </option>
          <option value="5">e. </option>
        </select>

        <label for="">4. </label>
        <select id="" name="">
          <option value="1">a. </option>
          <option value="2">b. </option>
          <option value="3">c. </option>
          <option value="4">d. </option>
          <option value="5">e. </option>
        </select>

        <label for="">5. </label>
        <select id="" name="">
          <option value="1">a. </option>
          <option value="2">b. </option>
          <option value="3">c. </option>
          <option value="4">d. </option>
          <option value="5">e. </option>
        </select>

      </fieldset>
      <button id="getAnswer" type="submit">Submit!</button>
    <p id="composera">Your boss is Composer A. Do this.</p>
    <p id="composerb">Your boss is Composer B. Do this.</p>
    <p id="composerc">Your boss is Composer C. Do this.</p>
    <p id="composerd">Your boss is Composer D. Do this.</p>
    <p id="composere">Your boss is Composer E. Do this.</p>
    </form>

  </body>
</html>

4 Answers

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

Hey Juliana Madrone,

What's happening is that when you click the submit button, it is wanting to send that data somewhere, but since Workspaces doesn't allow you to send data back to the server, you are getting that 405 not allowed error.

What you need to do is prevent that event from occuring. How we do that is by using an event variable that is used with every single event, and you can name this whatever you'd like. I'm calling it "event" for simplicity's sake. Then, you call its "preventDefault()" method like so:

//You can call the "event" variable whatever you wish
$("#getAnswer").click(function(event) {
//Prevent the default action of the event: in this case, prevent form from submitting data 
  event.preventDefault();
//Other code for click event here
});
Marcus Parsons
Marcus Parsons
15,719 Points

Another way to do this, as well, is to prevent the default action of the form itself:

//You can call the "event" variable whatever you wish
$("form").submit(function(event) {
//Prevent the default action of the event: in this case, prevent form from submitting data 
  event.preventDefault();
//Other code for click event here
});
Juliana Madrone
Juliana Madrone
8,552 Points
Juliana Madrone
Juliana Madrone
8,552 Points

Thanks Marcus, these are very clear answers. Unfortunately I've already tried both scenarios, with no luck! Any other ideas?

Marcus Parsons
Marcus Parsons
15,719 Points

I tested your code with both of those scenarios, and it has prevented that 405 error from occurring; however, I'm suspecting the problem might lay within "app.js". If you want to go ahead and post that, I can take a look at it and see if there are any conflicts.

Juliana Madrone
Juliana Madrone
8,552 Points
Juliana Madrone
Juliana Madrone
8,552 Points

Hi Marcus, Thanks for the help, and sorry about the delayed response. The only thing I have in the "app.js" file right now is the following code- meant to help me see if the button is working before I add any more complicated functionality into it. I'm still getting the 405 error.

$("#getAnswer").click(function(event) {
  event.preventDefault();
  alert("Hello from jQuery");
});
Marcus Parsons
Marcus Parsons
15,719 Points

Well, I originally didn't suggest this, but I should have read your original question a little bit more thoroughly lol But, you can take that button and discard the type attribute. It only needs that type attribute if you're using it to submit data to a server, but since you're only using jQuery, a simple id will suffice. And that will definitely get rid of your 405 error, I am 96.31% positive! lol

Marcus Parsons
Marcus Parsons
15,719 Points

It's still very interesting that you're getting a 405 error. Are you even seeing the alert that is supposed to pop up?

Juliana Madrone
Juliana Madrone
8,552 Points
Juliana Madrone
Juliana Madrone
8,552 Points

Nope, which makes me think I've set something up wrong - but you see all the code, I can't think what it would be. Loved your last suggestion too, but it also didn't solve the issue! I'm about ready to simply move on to another project- maybe this one will become clear later down the road!

Marcus Parsons
Marcus Parsons
15,719 Points

Are you doing this in Workspaces or on your local machine? Thanks by the way haha If I made ya laugh, then I've done a good service for today! lol