I have a number of checkboxes. Each of them is associated with one input field. When the checkbox is checked, I would like to set the input field is editable, i.e. disabled attribute as false. Otherwise, the input field is readonly. Code for one pair of such checkbox and input field is like below (all these code is included in one section called competencies :
<label class="checkbox span3">
<input id="IT_OS_checkbox" type="checkbox" value="IT_OS" name="competency_checkbox[]">
IT - OS
</label>
<div class="controls">
<input id="IT_OS_input" class="input-xxlarge" type="text" name="competency_input[]" disabled="true" placeholder="mots clés séparés par virgule">
</div>
So I am trying to use Jquery's on method to fire the event for each checkbox. Code is as below :
$("#competencies").on('change', '.checkbox', function (event) {
var orig_val = event.target.parent().next('div').find('input').attr('disabled');
alert(orig_val);
});
For simplicity, I just want to check the selector works fine, however, this code doesn't work. and in firebug, error message is TypeError: event.target.parent is not a function.
Can anyone help me figure this out ?
Try this:
$("#competencies").on('change', '.checkbox', function (event) {
var orig_val = $(event.target).parent().next('div').find('input').attr('disabled');
alert(orig_val);
});
Just need to wrap the event.target to get the jQuery object.
Related
I have the following
<form id="formie">
<label class="block-label form-inline" id="color">
<input type="radio" name="color" value="custom">
Custom (RAL Colors)
</label>
<input type="text" class="form-control" id="custom_color" name="custom_color" value="" onChange="select_color(this)" placeholder="RAL code">
</form>
(the onChange(select_color(this)) doesn't do anything to the issue, if I remove it, it's still the same)
And code
$('#formie').change(function(){
str = $('#formie :input[value!=""]').serialize();
alert($('#custom_color').val());
});
If user clicks on the radio, it fires the .change() event and str = "color=custom", alert is blank. If user fills the text field, event is fired again, but the str value is still the same (value of text field doesn't get serialized), alert says what was filled in the field correctly.
If I remove the value="" from text field tag, the text field always gets serialized - just after clicking radio button str = "color=custom&custom_color=". If you then fill in something, it gets serialized properly, eg. str = "color=custom&custom_color=kek".
Why it doesn't serialize when I want to filter out the empty?
I found a lot of answers that used your code. Some said it's working and some said it's not.
Please try this code instead, it should work with any jQuery version:
var str = $("#formie").find(":input").filter(function ()
{
return $.trim(this.value).length > 0;
}).serialize();
I have some HTML like this:
<input ng-controller="cboxCtrl" type="checkbox"
ng-model="hideCompleted" ng-change="hideChanged()"/>
and a controller like this:
angular.module('simple-todos').controller('cboxCtrl', ['$scope',
function ($scope) {
console.log("starting");
$scope.hideChanged = function () {
console.log("in hideChanged() ");
};
}]); // end controller
It works fine and I see the message on the console when I click the checkbox. However, if I add a label around the checkbox:
<label>
<input ng-controller="cboxCtrl" type="checkbox"
ng-model="hideCompleted" ng-change="hideChanged()"/>
Some text to explain the checkbox
</label>
The ng-change function does not run when I click the checkbox. I expect it has something to do with scoping but I cannot figure out what. If I replace labels with divs (which of course does not give a "nice" laýout), the ng-change function is again executed as expected.
I just created a jsfiddle with your code and it works for me.
https://jsfiddle.net/jfplataroti/hphb8c4v/5/
angular.module('simple-todos', []).controller('cboxCtrl', ['$scope', cboxCtrl]);
function cboxCtrl($scope) {
console.log("starting");
$scope.hideChanged = function() {
console.log("in hideChanged() ");
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="simple-todos">
<label>
<input ng-controller="cboxCtrl" type="checkbox" ng-model="hideCompleted" ng-change="hideChanged()" />some text for the label
</label>
</div>
would you mind sharing your complete code?
clicking on label also triggers ng-change, you can click the label of a checkbox/radio to check/uncheck It should trigger the scoped function.
Please check for the browser you are trying to run this code. Also do check it on other browsers you have installed. AngularJS no longer supports IE8 or earlier.
link here: https://docs.angularjs.org/guide/ie
You need to move your ng-change on the checkbox to the surrounding label's ng-click
<label ng-click="hideChanged()">
<input ng-controller="cboxCtrl" type="checkbox" ng-model="hideCompleted" />
Some text to explain the checkbox
</label>
I have an ng-repeater with each row having an input of type checkbox, as well as 3 text fields. I want to allow the checkbox to be selected ONLY if the user enters some text in each of the 3 text fields. If the user tries selecting a checkbox without entering data first, I want to display a warning message.
I am assuming I have to do some checking for the three ng-models (for text fields) is null or undefined or something, but not sure how to do it in the HTML.
My HTML looks something like this:
<div ng-repeat="o in objects">
<input type="checkbox" class="myClass" ng-click="doSomething(argument)>
....
....
<input ng-model="model1">
<input ng-model="model2">
<input ng-model="model3">
EDIT: Found an answer here AngularJS - Form Custom Validation - Check if at least one input is empty
You could disable them and use ng-change to monitor that all 3 of the text inputs have value.
Sample html:
<input type="text" ng-model="data.item3" ng-change="update()"/>
<input type="checkbox" ng-model="data.model1" ng-disabled="checksDisabled"/>
Example Controller
.controller('MainCtrl',function($scope){
$scope.checksDisabled=true;
var data = $scope.data ={ };
$scope.update=function(){
$scope.checksDisabled = !(data.item1 && data.item2 && data.item3);
}
});
DEMO
I'm 95% there in writing an HTML5 'required' attribute fallback, I'm having a small issue and I've come to the end of the road in my knowledge!
What works:
Detecting 'required' attributes, looping through and alerting the user in several ways (onsubmit and entering data into the field).
Problem:
I'm taking the form one step further and want to make checkboxes and radio buttons required as well. By doing this, I need to add a required attribute to each radio/checkbox. I need to find out how to differentiate the group of buttons, as currently you need to tick/untick both sets of buttons for the form to validate and let you submit. So in a nutshell, I have three required radios for example, each will need to be ticked, how can I detect whilst looping through the inputs that one of the required radios/checked is ticked - I assume this would be done by matching the 'name' attribute, and if none in the name group are selected then alert just one error.
Here's the state of my loop, you can see I detect the input type as well, just unsure of the next steps forward. a jsFiddle is also below if anyone would be kind enough to help out. Many thanks.
// loop through class name required
$('.required').each(function () {
// this
var self = $(this)
// check shorthand if statement for input[type] detection
var checked = (self.is(':checkbox') || self.is(':radio')) ? self.is(':not(:checked)') : false
// run the empty/not:checked test
if (self.val() === '' || checked) {
// show error if the values are empty still (or re-emptied)
// this will fire after it's already been checked once
self.siblings('.form-error').show()
// stop form submitting
e.preventDefault()
// if it's passed the check
} else {
// hide the error
self.siblings('.form-error').hide()
}
})
Here's my jsFiddle: http://jsfiddle.net/zykF9/
With class selectors you could archive it
http://jsbin.com/owokuw/1/edit
UPDATE
to make easier to understand, here a update:
<input type="radio" name="myradio" class="myradio" />
<input type="radio" name="myradio" class="myradio" />
<input type="radio" name="myradio" class="myradio" />
<input type="radio" name="myradio" class="myradio" />
<input type="hidden" id="selectedRadioYes" />
<input type="button" id="botton" value="Botton" />
Jquery
$(".myradio").click(function(){
$("#selectedRadioYes").val(1);
});
$("#botton").click(function(){
if($("#selectedRadioYes").val() === "1")
alert("you can go on");
else
alert("need select one radio");
});
http://jsbin.com/owokuw/2/edit
I have a form with a unique identifier field that the user needs to enter, when passing this value it needs to appear in different field id. so for instance. the field that user enters the unique code in is called "unique" and the copy needs to be in "message", how can i achieve that?
<div data-role="fieldcontain">
<label for="pins" id="pinLabel"><span style="color:#f22300">*</span> Unique Code:</label>
<input data-mini="true" name="pins_r" id="pins" placeholder="9 alphanumeric characters"/>
</div>
<input type="hidden" id="msg" name="msg" value=pins>
Thanks
There are two ways to do this with JavaScript.
Method 1)
Have an onchange event on the unique field such that whenever the value is changed, change it in a hidden field called message.
<input type="text" id="unique" name="unique" onchange="setMessage(this);">
<input type="hidden" id="message" name="message">
function setMessage(field) {
document.getElementById('message').value = field.value;
}
Method 2)
Use ajax to post the form instead, that way you can build the fields yourself.
ie. post message= document.getElementById('unique').value
Both the above are greatly improved if you use JQuery or another JS helper framework.
If you want your values to be set in the label at the same time, it is entered.
You can do some thing like this.
$(document).ready(function() {
$('#pins').keypress(function() {
setTextValueForPins(this);
});
});
function setTextValueForPins(textPin)
{
$('#pinLabel').text($('#textPin').val());
}
If you want the value to be set after the user have entered the value, you can use the change event.
PS: Not tested the code , let me know if you face any Issues.