<div ng-app="myApp" ng-controller="myCtrl">
<button type="submit" class="btn btn-primary pull-left" ng-
disabled="captchaError">Submit</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.captchaError = true;
});
</script>
Here is my code.
I set captcha error to true and it disabled the button. My question is when this page will run and if user inspect that button and remove disabled="disabled" from the element then the button will start working. Is there any way to prevent this and button will not start working on removing disabled="disabled"
You can disable the f12(most of the users are doing)key on the screen or disable the prevent option.
How can I block F12 keyboard key in jquery for all my pages and elements?
Note: But still you can't control it because Users can also edit the elements by using these below ways as well.
If the user press Control+shift+i -> It opens developer panel .
Top right square in chrome -> More tools -> Developer tools ,it opens
So the better way is , you can use ng-if to restrict to create DOM elements instead of disabling.
The ng-if directive removes the HTML element if the expression evaluates to false
<button type="submit" class="btn btn-primary pull-left" ng-
if="!captchaError">Submit</button>
Related
I have problem with sign up button while registering as user, Actually there is check box for T&c. After checking that check box only button should enable.
Everything is going well But, when I am refreshing page I am not able to see button, I able to see all other elements even check box.
here are Html tags I used for check box and Sign Up button and I also used flags.
<p class="terms"> <div class="chckbx-cntnr zeromargin" style = "padding:2px;vertical-align:middle"><input type="checkbox" id="rd" name="check" class="flashadmin" ng-model="user.tnc" ng-click="setbuttonFlag(user.tnc)" class="flashadmin"><label class="cstmchk_lbladmin" for="rd"></label></div>
I agree to the Terms of Use and Privacy Policy.</p>
<button ng-if="buttonFlag==true" id="signup"class="btn btn-default btn-block btn-login" type="submit" >Sign up</button>
<button ng-if="buttonFlag==false" id="signup" class="btn btn-default btn-block btn-login" disabled >Sign up</button>
here is validation i wrote for flag
$scope.buttonFlag=false;
$scope.setbuttonFlag =function(checkbox){
if(checkbox == true){
$scope.buttonFlag=true;
}else{
$scope.buttonFlag=false;
}
};
I am getting in console
Error: $injector:unpr
Unknown Provider
First thing is your code looks clumsy!
Below mistake you did, you misunderstood the concept completely.
Why you required for two submit button in your html? Also no need separate click event for changing button flag.
Now coming to your question:
When I am refreshing page I am not able to see button
This is because your are using ng-if directive in button element at the same time while initiating your controller you set $scope.buttonFlag=false so obviously you can't see button while refresh..
Below snippet will work for you!
angular.module("app", []).controller("testCtrl", function($scope) {
$scope.buttonFlag = false;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="testCtrl">
<input type="checkbox" ng-model='buttonFlag'> I agree to the Terms of Use and Privacy Policy.
<button ng-disabled='!buttonFlag' id="signup" class="btn btn-default btn-block btn-login">Sign up</button>
</div>
</div>
Well upon refresh you are manually setting buttonFlag to false hence the button disappears.Store buttonFlag in localStorage and check the state of buttonFlag unlike setting it to false as you have done.
if(localStorage.getItem('buttonFlag')){
buttonFlag = localStorage.getItem('buttonFlag');
}
else{
buttonFlag = false;
}
also instead of using two different button for signup use ng-disabled to disable or enable a button
I have issue I'm making asp .net application any on my view page I got problem.
When I run application in Chrome everything works perfect, but when I run it in Mozilla it just somehow add's disabled="" on my button - when I see page source attribute is added.
Here's my button code:
<button class="btn btn-warning btnBid" value="Bid" type="button" id="#Html.Raw("btn" + item.IDAuc)">
Bid
</button >
I still don't know why this happened, but as one solution I've called initialize() function in JavaScript in which I've just set all buttons' class to be btn and simply just call:
$(".btn").prop("disabled", false);
I have this portion of code that creates a button group:
<div class="btn-group btn-group-lg">
<button id = "Image" type="button" class="btn btn-primary">Click1</button>
<button id = "Text" type="button" class="btn btn-primary">Click2</button>
</div>
I want to make it dynamic, in a sense that each button will take me to a different URL. I have come across this post:
How do I navigate to another page on button click with Twitter Bootstrap?
However, I cannot use <a></a> when dealing with a button group (or at least cannot think of a way to do so). So I guess I need a JS file with a function? How do I do that with AngularJS?
You can use a simple Javascript function such as:
go(path) {
window.location = path;
}
Then call it from your button with:
ng-click="go('index.html')"
Im actually having a problem with html5 button in visualforce pages. I have a requirement where when i click on a button, it should redirect to a certain page (user do not want link). For some reason which i don't know, the function i'm executing do not work with HTML5 button (in fact the page only refresh but do not redirect) but when i use input of type button, the function is executed as expected.
I want to use the html5 button as there are some specific css already defined for button in the plugin im using. Find below codes for my button and javascript function :
<button class="butt" onclick="newContact()" >Nouveau</button>
<script type="text/javascript">
function newContact(){
window.location = "/apex/VFP01_NewContact";
}
</script>
What did I do wrong here, and what is the limitation of html5 button ?
Got to know the answer. In visualforce page, the html5 button execute a submit of my form. A way to prevent this, was to specify the attribute type="button".
You really have two options.
You could consider wrapping a element with an anchor tag that points to the URL that you want to target as seen below :
<!-- Target the "YourAction" action in your "YourController" controller -->
<a href='#Url.Action("YourAction","YourController")'>
<input type="Button" id="mybutton" name="url button" value="Next" />
</a>
or you could handle this purely through Javascript and perform your navigation that way :
<!-- The onclick event will trigger a Javascript call to navigate -->
<input type="Button" id="mybutton" name="url button" value="Next" onclick="window.location.href='#Url.Action("YourAction","YourController")';" />
I'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages.
Below is my code
<form action="MyPage">
<button type="submit" value="More Options">
</form>
redirect to an other page.What I can do?
First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!
<form action="MyPage">
<button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>
<script type="text/javascript">
function addMoreStuff(button) {
/* your code here */
}
</script>
Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.
HTML
<button type="submit" value="More Options" id="more">
JavaScript (jQuery)
// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)
function add_options() {
//code here to add more options
}