Button onclick Javascript function fails, but function works

Question

In my html document I have this:

<button onclick="doFunction()" type="submit" ...>Button</button>

The function looks like this:

doFunction() {
    var goToThisUrl = "www.spring_controller_method.com?redirectUrl=this_page";
    window.location.href = goToThisUrl;
}

The the url in the doFunction() is the url of a Java Spring controller method. In that method it manipulates the database and returns a string to redirect to the page it came from: return "redirect:" + redirectUrl.

The problem is that the button doesn't work. When I click the button, the page refreshes but the data in the database isn't manipulated. The reason I know this isn't a problem with the spring controller method is because of two reasons:

I have a breakpoint in the controller method and it isn't being hit.
When I take the same doFunction() code and run it on the Chrome developer console, the controller method breakpoint is hit, and the data in the database is changed.

Is there any idea as to why this would be happening?

I'm guessing your form is submitting (button type="submit"), return false to prevent default action in your function first. — David Nguyen
– David Nguyen, Commented Oct 25, 2013 at 17:19

Manwal · Accepted Answer · 2013-10-25 17:21:49Z

4

Remove type submit from button like

<button onclick="doFunction()" type="button" ...>Button</button>

type="submit" is used for form submission that's why onclick not working.

answered Oct 25, 2013 at 17:21

Manwal

23.9k15 gold badges65 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

talemyn Over a year ago

Just clarifying that changing the type value to "button" (like you did in the answer) is very important . . . if you just remove the type="submit" attribute, it will fall back on the default, which is also "submit". "button" is the only value that has no inherent action associated with it.

Manwal Over a year ago

I have faced that problem if i remove type attribute from button it works like submit. don't know what was problem. then i replace submit to button.

talemyn Over a year ago

Yep . . . it's all here in the HTML specs: w3.org/TR/html401/interact/forms.html#h-17.5 - "This attribute declares the type of the button . . . submit: Creates a submit button. This is the default value."

David Nguyen · Accepted Answer · 2013-10-25 17:28:25Z

-1

Add return false; to prevent the default form submission.

doFunction() {
    var goToThisUrl = "www.spring_controller_method.com?redirectUrl=this_page";
    window.location.href = goToThisUrl;
    return false;
}

edited Oct 25, 2013 at 17:28

answered Oct 25, 2013 at 17:21

David Nguyen

8,5182 gold badges35 silver badges50 bronze badges

2 Comments

talemyn Over a year ago

Putting return false; at the very beginning of your function will stop it from hitting any of the other logic in the function.

talemyn Over a year ago

Yep. :) Alternately, you could do it outside of the function, in the onclick, like this: onclick="doFunction(); return false;"

Collectives™ on Stack Overflow

Button onclick Javascript function fails, but function works

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related