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
Related
<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>
I have a button that triggers the below jquery function. Currently the function works and hides/shows the form element as desired. However it is tripping the html 5 validation (which I want on submit). Is there a reason it is triggering and a way I can prevent this? I experimented with having a return at the end of the function but no luck. Also neither form is required as part of the validation. I keep getting a pop up telling me previous items are required when I hide/show the form elements..
<button class="col-sm-2 btn btn-success" onclick ="hideFormField ()">Hide</button>
function hideFormField (){
if(!$("#trail").is(":visible"))
{
$("#trail").show();
$("#blazers").hide();
}else{
$("#trail").hide();
$("#blazers").show();
}
}
Try this:
<button class="col-sm-2 btn btn-success" onclick ="hideFormField ();return false;">Hide</button>
Try:
<button class="col-sm-2 btn btn-success" onclick="hideFormField();event.preventDefault();">Hide</button>
Jonathan Lonowski was correct in his comment. Buttons are submit-type by default so you need to explicitly define a button with type="button" attribute if you don't want any additional effects when the button is clicked.
A small example that illustrate the activation of HTML5 form validation through default button behavior is in this jsfiddle: http://jsfiddle.net/zk3jr9vn/
by default button is submit type so add Type to button
like
<button type="button" class="col-sm-2 btn btn-success" onclick ="hideFormField ()">Hide</button>
I have a form with two states: editing and visible. When you click an icon to edit the form two buttons (acting like submit) at the bottom appear to save or cancel. When I click them the form is updated (or cancelled) and the buttons disappear. The problem is when I re-open the form to edit it (and the buttons are visible again) the last one clicked still has it's hover state applied in Chrome.
<div>
<div class="col-xs-5">
<button class="btn btn-primary pull-right" ng-click="save(true)">Save</button>
</div>
<div class="col-xs-5 cancel-btn">
<button class="btn btn-primary pull-left" ng-click="cancel()">Cancel</button>
</div>
</div>
For simplicity here is just the cancel function...
$scope.cancel = function() {
//set a flag for angular to hide/show editing mode in HTML
$scope.editMode = false;
};
As mentionned in an earlier comment (runTarm), this is because of the active/focused state of the buttons.
To change it :
.btn-primary:active,
.btn-primary:focus {
// place your 'default' styling over here
}
You will probably need to be more specific with your declaration because what I posted will override all the items with class btn-primary.
Hope this helps !
Suppose a form has multiple submit buttons:
...
<button type="submit" value="deletefoo">Delete Foo</button>
<button type="submit" value="deletebar">Delete Bar</button>
<button type="submit" value="Edit">Edit</button>
...
I am intercepting the clicks for only the 2 delete buttons and disabling the form submit to trigger a custom modal dialog which has OK and CANCEL buttons on it to confirm user choice. If user presses OK, I want to submit the form. If cancel, then dialog dismissed and nothing happens.
I have the first part wired up to trigger the dialog but I am at a loss on how to get the OK button in the dialog to trigger the form submit contingent on which original submit button was pressed (e.g. if Delete button pressed, I want to confirm with user they want to delete, then if so, submit the form as normal.
I've searched around and look at jQuery docs but haven't found the answer yet so I must be missing something really straightforward.
Update: I don't want to use JS confirm function. In my original question above I'm looking to use a custom modal dialog for various reasons.
Check out the JS confirm function and put it as an onclick event.
You have a nice example here.
Why not have them be regular buttons and then onclick set a variable to determine the action type and then when the form submits include this hidden variable and check that to find what you're supposed to do
First, you'd have to intercept both (all) the buttons, you could do this easily by fetching any of the submit buttons within a specific form, then you can ask your question and given you still have the current event handler, you can figure out what button was pressed and do the callback you'd like. For example:
<form id="myform">
<button type="submit" value="delete">Delete</button>
<button type="submit" value="Edit">Edit</button>
</form>
--
$(function() {
$("form#myform button[type='submit']").click(function(ev) {
ev.preventDefault();
if (confirm("you sure")) {
var action = $(ev.currentTarget).val();
console.log(action);
}
});
});
JSLint is here: http://jsfiddle.net/r48Cb/
Basically, console.log(action) will output either "delete" or "Edit" based on the original click. How you handle that value is up to you. A switch statement, a simple if block could work, but it's up to you, I don't know the scope of your app.
The window.confirm function returns a true if the user selects okay and a false if the user cancels. Using this logic you could do something like this:
<button id="delete" type="submit" value="delete">Delete</button>
<button type="submit" value="Edit">Edit</button>
var question;
$("#delete").click(function(){question=window.confirm("Are you sure?");)
if (question){
//Submit the form here
}
else{
alert("Not deleted!");
}
I think you are making it too complex, you can do something as simple as:
<form >
<input name="foo" value="foo">
<button name="sub0" value="sub0" onclick="
return window.confirm('sure?');
">submit 0</button>
<button name="sub1" value="sub1" onclick="
return window.confirm('sure?');
">submit 1</button>
</form>
If the user clicks OK on the confirm dialog, the form submits from whichever button was pressed. If not, it doesn't.
My 2c:
... (edited: removed the value parameter. buttons don't need that)
<button onclick='deleteFoo(); ' >Delete Foo</button>
<button onclick='deleteBar(); ' >Delete Bar</button>
<button onclick='allowEdit(); ' >Edit</button>
...
function deleteFoo() {
do-your-modal-whichever-way-you-want;
if confirmed,
$('#form-id').attr('action','your-action-for-delete-foo');
$('#form-id').submit();
else-just-return
}
function deleteBar() {
do-your-modal-whichever-way-you-want;
if confirmed,
$('#form-id').attr('action','your-action-for-delete-bar');
$('#form-id').submit();
else-just-return
}
function allowEdit() {
whatever
}
I am trying to issue a form reset to clear the contents back to there initial state. What is happening however, is that the form clears but also the browser refreshes. I have also tried putting the code inside a document ready but still the same. Can someone explain to me why this is happening. Thanks
<button id="AUSR_reset" class="resetbutton icon-right ui-state-default2 ui-corner-all"><span class="ui-icon ui-icon-circle-plus"></span>Reset</button>
<script language="javascript" type="text/javascript">
$("#AUSR_reset").click(function() {
$("#AUSR_adduser").get(0).reset();
});
In order to rest the form elements use a reset button within the form. It will reset all the form elements without any js help.
<input type="reset" value="Reset" />
Add type="button" to the button. Otherwise it acts as a submit button.
<button type="button" id="AUSR_reset" class="resetbutton icon-right ui-state-default2 ui-corner-all">