Javascript Button redirecting to http://127.0.0.1:5000/?

Question

I am new to web technologies, trying to build a basic website. Technology stack: Python+Flask and HTML+CSS+JS on frontend.

I have a button, from which I am trying to redirect to a relative URL: Button html:

<div class="form-group">
    <input type="submit" 
           class="btn btn-primary btn-lg btn-block pb_btn-pill  btn-shadow-blue"
           value="Register"
           onclick="approve()">
</div>

Javascript:

function approve() {
    window.location.href = '/approve';
}

This is not taking me to: http://127.0.0.1:5000/approve rather to: http://127.0.0.1:5000/?

Can anyone please guide?

SOLUTION: Thank you all, this helped: return false https://stackoverflow.com/a/26518061/4253760

I still have a question, what is this URL with ? mark http://127.0.0.1:5000/?

A submit button without form doesn't do anything so your JS should work fine. If you do have a form, then I really wonder why you are redirecting on a submit button, because that doesn't submit anything. In that case just go for the anchor tag to keep the user experience up. — Ivar, Apr 14 '18 at 00:35
Stack Overflow is not a forum for ongoing discussion of problems. If you have another question, start another thread by clicking on the Ask Question button. Also, if one of the answers solved your problem, mark it as so! — Rob, Apr 14 '18 at 00:37
@Ivar in very short: I have a machine learning prediction algorithm hosted on heroku using python+flask. Trying to build an html UI to pass the input features and then return back the result. Honestly, I have no idea of the best practice of UI layer on how to do this and struggling with pretty basic front end things. — sumon c, Apr 14 '18 at 00:58

score 4 · Answer 1 · answered Apr 14 '18 at 00:24

4

Change your input type to use button

<div class="form-group">
    <input type="button" 
           class="btn btn-primary btn-lg btn-block pb_btn-pill  btn-shadow-blue"
           value="Register"
           onclick="approve()">
</div>

Because you were using submit it would have submitted to the form action rather than your javascript.

answered Apr 14 '18 at 00:24

Simon R

3,732
4
31
39

1

Or he can preventDefault(); and do what he want to if his type needs to be submit. – Apr 14 '18 at 00:25

anneb · Accepted Answer · 2018-04-14T00:45:07.787

Your button is of type "submit". This will submit the form. The form has no URL defined, so it assumes the current document, in your case "/". The question mark in "/?" is followed by the form contents (key/values), in your case, the form is empty (it has no input values, only a button)

You should use input of type "button" or the onclick should read "approve(); return false" to prevent the form from being submitted and instead execute your function

Javascript Button redirecting to http://127.0.0.1:5000/?

2 Answers2