I'd like to create a form with checkboxes. At first it shouldnt be possible to check them. Then if you click submit they should be.
I got it working so its not clickable first with
function(e){ e.preventDefault(); }
But how do i make them clickable again after that?
That means you just want to go the the default behavior what you have removed first time. To this this you just have to do
function(e){ return true; }
Hope this work.
Easiest would be to disable the checkbox, then re-enable it when you're ready:
<input id="chk1" type="checkbox" disabled>
document.getElementById("chk1").removeAttribute("disabled");
If you're using jQuery, it would be easier to work with multiple checkboxes, and the syntax would be:
jQuery("#chk1").prop("disabled", false);
If you set your click handler to a function, just have that function prevent the click, depending on whether or not you want the boxes enabled. In your case, you said when the submit button was clicked, you want to start allowing them:
var _checkBoxesEnabled = false;
function checkBoxClicked(e) {
if (!_checkBoxesEnabled) {
e.preventDefault();
}
}
function submitButtonClicked() {
_checkBoxesEnabled = true;
}
Watch out for cross-browser compatibility - I'm spoiled by jQuery, so I don't remember exactly how the e in click handlers work with old IE versions using regular javascript.
Related
I am using redux-form in my Laravel project (implementing React 15.4.2) and the form I have includes several radio buttons. I need a handleChange function in order for these to remember what is checked (if they are changed from a previous value or selected for the first time) but I don't want to have to write a separate one for each radio button, or implement a huge if else set of rules to handle each one.
Here's one of my fields (just the 'yes' value):
<input type="radio" onChange={this.handleChange.bind(this, 'maintain_licence', 'yes')} checked={maintain_licence.value === 'yes'} id="maintain-licence-yes" value="yes" name="maintain_licence" /><span>Yes</span>
And this is what I have for a single radio button on change, based on the radio button called maintain_licence being interacted with:
handleChange(fieldName, value) {
if(fieldName === 'maintain_licence') {
this.props.fields.maintain_licence.onChange(value);
}
}
This works fine - however, since I have about 20 radios in my form, I can imagine this function getting rather long. Ideally, I'd want something similar to:
handleChange(fieldName, value) {
this.props.fields.fieldName.onChange(value);
}
But as it's trying to find a field actually named 'fieldName' it throws an error stating that it cannot run onChange on an undefined value.
Basically I just need to find a way of using a single function to handle the changes on all radio buttons but I don't know how to do this.
You could use property accessors to get the property you want. Something like:
handleChange(fieldName, value) {
this.props.fields[fieldName].onChange(value);
}
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors
Basic problem is, when user tabs in a specific text input on a form, prefilled "+36" gets selected. I'd like to somehow put the cursor right after it (after the +36), instead of selecting the whole word. I've been thinking about disabling text selection of text inputs but no result yet. Googled a lot for it but couldnt find anything but disabling text selection on web pages, which is not really related. How could I solve this problem?
If you are using Jquery, you can try something like this on document ready
$(document).ready(function() {
$("input").focus(function() {
var input = this;
setTimeout(function() {
input.selectionStart = input.selectionEnd;
}, 1);
});
});
Please find the Jsfiddle for the same Jsfiddle Input Focus
In your form element put autocomplete attribute like below
<form method="post" action="/form" autocomplete="off">
</form>
My greetings !
I am trying to focus on first pagingtoolbar`s button by hot key. For example, when it will be pushed combination CTRL + -->, the focus will be on first enabled button of pagingtoolbar.
At this time I can get fisrt disabled button:
Ext.ComponentQuery.query('pagingtoolbar button{isDisabled()}')[0]
But I need a code like that:
Ext.ComponentQuery.query('pagingtoolbar button{isEnabled()}')[0]
I have thought that there is such method in Ext.button.Button, but I could not find it.
Obviously, I can resolve my problem by another way, for example, I can get all enabled buttons in paging toolbar by this code:
var buttons = Ext.ComponentQuery.query('pagingtoolbar button');
var en_buttons = [];
for(var i=0;i<buttons.length;i++){
if( !buttons[i].isDisabled() )en_buttons.push(buttons[i]);
}
en_buttons[0].focus(false,100);
But I believe that there are no need to write such code, it must be resolved by one line of code.
With regards ,
A
You can use the disabled property.
Disabled buttons:
Ext.ComponentQuery.query('pagingtoolbar button[disabled=true]')
Enabled buttons:
Ext.ComponentQuery.query('pagingtoolbar button[disabled=false]')
I been struggling to reset form once form is submitted. Someone posted this Here which I want to make it work but no success. Here is my My Code Example.
$scope.form.$setPristine(); is not setting Pristine: {{user_form.$pristine}} to true. See example above.
$setPristine() was introduced in the 1.1.x branch of angularjs. You need to use that version rather than 1.0.7 in order for it to work.
See http://plnkr.co/edit/815Bml?p=preview
Had a similar problem, where I had to set the form back to pristine, but also to untouched, since $invalid and $error were both used to show error messages. Only using setPristine() was not enough to clear the error messages.
I solved it by using setPristine() and setUntouched().
(See Angular's documentation: https://docs.angularjs.org/api/ng/type/ngModel.NgModelController)
So, in my controller, I used:
$scope.form.setPristine();
$scope.form.setUntouched();
These two functions reset the complete form to $pristine and back to $untouched, so that all error messages were cleared.
Just for those who want to get $setPristine without having to upgrade to v1.1.x, here is the function I used to simulate the $setPristine function. I was reluctant to use the v1.1.5 because one of the AngularUI components I used is no compatible.
var setPristine = function(form) {
if (form.$setPristine) {//only supported from v1.1.x
form.$setPristine();
} else {
/*
*Underscore looping form properties, you can use for loop too like:
*for(var i in form){
* var input = form[i]; ...
*/
_.each(form, function (input) {
if (input.$dirty) {
input.$dirty = false;
}
});
}
};
Note that it ONLY makes $dirty fields clean and help changing the 'show error' condition like $scope.myForm.myField.$dirty && $scope.myForm.myField.$invalid.
Other parts of the form object (like the css classes) still need to consider, but this solve my problem: hide error messages.
There is another way to pristine form that is by sending form into the controller. For example:-
In view:-
<form name="myForm" ng-submit="addUser(myForm)" novalidate>
<input type="text" ng-mode="user.name"/>
<span style="color:red" ng-show="myForm.name.$dirty && myForm.name.$invalid">
<span ng-show="myForm.name.$error.required">Name is required.</span>
</span>
<button ng-disabled="myForm.$invalid">Add User</button>
</form>
In Controller:-
$scope.addUser = function(myForm) {
myForm.$setPristine();
};
DavidLn's answer has worked well for me in the past. But it doesn't capture all of setPristine's functionality, which tripped me up this time. Here is a fuller shim:
var form_set_pristine = function(form){
// 2013-12-20 DF TODO: remove this function on Angular 1.1.x+ upgrade
// function is included natively
if(form.$setPristine){
form.$setPristine();
} else {
form.$pristine = true;
form.$dirty = false;
angular.forEach(form, function (input, key) {
if (input.$pristine)
input.$pristine = true;
if (input.$dirty) {
input.$dirty = false;
}
});
}
};
I solved the same problem of having to reset a form at its pristine state in Angular version 1.0.7 (no $setPristine method)
In my use case, the form, after being filled and submitted must disappear until it is again necessary for filling another record. So I made the show/hide effect by using ng-switch instead of ng-show. As I suspected, with ng-switch, the form DOM sub-tree is completely removed and later recreated. So the pristine state is automatically restored.
I like it because it is simple and clean but it may not be a fit for anybody's use case.
it may also imply some performance issues for big forms (?) In my situation I did not face this problem yet.
I have a table of checkboxes. At the top is an Administrator box, then below a bunch of other permissions. If the Admin box is checked all other boxes should be checked, and if another box is unchecked then the Admin box should uncheck. I have it working on the initial click but if you click the Admin box it checks all others, then uncheck an other option it unchecks the Admin. Check the Admin a second time and nothing happens.
http://jsfiddle.net/HCpQg/1/
$("#administrator").click(function(){
if ($(this).is(':checked')) {
$('.permissions').attr('checked',true);
}
});
$(".permissions").click(function(){
if ($(this).is(':checked')) {
} else {
$('#administrator').attr('checked',false);
}
});
Use .prop() as opposed to .attr().
http://api.jquery.com/prop/
Just my 2 cents: if you use uniform styling:
$(function () {
$(":checkbox").uniform();
});
then you will need to call
$.uniform.update();
after you dynamically check/uncheck checkbox. I've just spent 6 hours trying until I dug up this bit...