Develop Reference

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

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/?

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

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.

Execute a function, if a condition is fulfilled. Angular.js

I am currently validating a form. I have a function called "myFunction".
<button class="btn btn-lg btn-primary btn-block" type="submit" ng-click='myFunction()' >SEND</button>
I want the function to run when is clicked, if the form is valid, ie if
Form.$valid == true.
I need to do this directly in the html view, I should not and do not want to put anything in the controller. How can I do it?
http://jsfiddle.net/f8cqp791/

<button class="btn btn-lg btn-primary btn-block" type="submit" ng-click='Form.$valid && myFunction()'>SEND</button>
In this case, if the form is not valid then nothing happens, otherwise, myFunction() is called.

You can use this in your html
ng-click='form.$valid && myFunction()'

HTML forms with two buttons

i have a html form with two buttons , one to submit the data via post .. and other to invoke a javaScript function. but both when clicked results in submitting.
<button onclick="validateData()" class="btn btn-warning" > Get Price Ranges </button>
<button type="submit" class="btn btn-warning" >Search</button>
is it not possible have two buttons inside the same form ?

I dont know what code is inside your validateData() function but try once like this...
<button onclick="validateData(); return false" class="btn btn-warning" > Get Price Ranges </button>
But the best way is do like this..
<form action= "" onsubmit="validateData();return false" method="">
In action define URL and in method may be either post or get.by removing this
<button onclick="validateData()" class="btn btn-warning" > Get Price Ranges </button>

Prevent customer from double submitting order?

I have an ecommerce website that uses jQuery 1.9.1 and Bootstrap 2.3.2
I'd like to prevent customers from double-submitting orders on accident (hitting submit twice).
Any ideas on how to do this?
My input submit is simply:
<input type="submit" class="btn btn-orange pull-right" value="Place Order">
Is there anything I can do to prevent this from occurring? I don't want to hinder other customers, I just don't want folks to submit, wait, get impatient, submit again, and they are double charged for their order. That's sloppy.
Thanks.

Here is a little trick:
<input type="submit" class="btn btn-orange pull-right" value="Place Order" onClick="this.disabled=1">

Disable the button when form is submitted. You can do something like this:
$('.pull-right').click(function() {
// Code to submit the form
$(this).attr('disabled', true);
});
This SO Question might help
How-to-prevent-calling-of-en-event-handler-twice-on-fast-clicks

You can do it like this:
<input type="submit" class="btn btn-orange pull-right" value="Place Order" onclick="$(this).attr('disabled', true);">

Some times you may want to also run a function like: OnSubmit function (or a validation) you can do this:
<input type="submit" class="btn btn-orange pull-right" value="Place Order" onclick="this.disabled=true;OnSubmit(this.parentNode);" />

value of button using javascript

I have 3 buttons in my form.
All the button actions goes to a same page after clicking it depending upon what button is clicked.
My query is: The name of the buttons are 'add','edit' and 'remove'
When the 'add' button is clicked, using js I need to get the value of that button and similarly for the other two buttons....
Can you please help?

<form>
<script type="text/javascript">
function doAction(value)
{
// Don't really have anything to set...just show the value
alert(value);
}
</script>
<input type="button" value="Add" onclick="doAction(this.value)">
<input type="button" value="Edit" onclick="doAction(this.value)">
<input type="button" value="Remove" onclick="doAction(this.value)">
</form>
There are other ways that involve not even passing the button's value, but they're not as compatible across browsers (IE uses a slightly different event model).
Of course, if you can get by without doing it in Javascript, and can just pass the clicked button to the server, it gets even easier than that...
<form>
<input type="submit" name="action" value="Add">
<input type="submit" name="action" value="Edit">
<input type="submit" name="action" value="Remove">
</form>
and whichever button you click gets put into the url as action=Add or whatever.

What about:
var buttonValue = document.getElementById('IdOfYourButton').value

have you tried: document.getElementById('button_id').value in the js function that you'll call when the button is clicked?

There is target property which you can use.It targets the element which caused the event to occur.
button.addEventListener('click',function(e){
console.log(e.target.value);
});