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()'
Related
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.
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>
How can I add action = "/#" to a button without using <form>?
For example, I want to do
<button type="submit" action = "/logout" class="btn btn-default">Logout</button>
instead of:
<form action = "/logout">
<button type="submit" class="btn btn-default">Logout</button>
</form>
Here is the current code:
<div class="navbar-form navbar-right btn-group">
<button type="button" class="btn btn-default">Score</button>
<button type="button" class="btn btn-default" href="#menu-toggle" id="menu-toggle">Favorites</button>
<button type="submit" class="btn btn-default">Logout</button>
</div>
You can't use action attribute on a button it only works with HTML form. type="submit" is used on a form element to submit the form data. An element with this type will appear as a button by default.
If you don't want to use HTML form you can use anchor tag to send user on any page. You can also do it with JavaScript or jQuery
I have one Input button control i want to call javascript function with parameter.
parameter is object of my Asp.Net repeater.
here is my Button
<input id="btnAddNew" class="btn btn-primary pull-left" type="button" value="Add More" onclick="AddFileUpload(<%# Eval("PrimaryID")%>)" />
and JavaScript Function is like this
function AddFileUpload(PrimaryID) {
document.getElementById('<%= hdnField.ClientID %>').setAttribute('value', PrimaryID);
}
I assume that your <%# Eval("PrimaryID")%> is returning non-numeric value so this would generate the syntax error.
replace
onclick="AddFileUpload(<%# Eval("PrimaryID")%>)"
with
onclick="AddFileUpload('<%# Eval("PrimaryID")%>')"
I hope this will work fine if not then post your error here.
You can try this
<input id="btnAddNew" class="btn btn-primary pull-left" type="button" value="Add More" onclick="AddFileUpload('<%# Eval(\'PrimaryID\')%>')">
Hope it works for you..
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);" />