I am using bootstrap 3 with bootstrap Switch for checkbixes and radio buttons. I am trying to alert selected value(when switched) but no alert. Here is my code:
$(document).ready(function () {
$('#preAuth').on('switch-change', function (e, data) {
alert(data.value);
});
});
HTML
<div class ="form-group">
<label class="col-sm-3 control-label">Does payment profile exists ?</label>
<label class="checkbox-inline">
<input type="checkbox" id="preAuth" name="preAuth" data-on="primary" data-off="info" data-on-label="YES" data-off-label="NO" >
</label>
</div>
Original documentation for Switch
If you see Toggle State sample, if you click on "State!" button, it is showing alert but am not able to understand how tha tis displaying the alert. I cannot find code that is calling an alert when clicked on button.
I think you are forgetting to create the switch first. You need this:
$(document).ready(function () {
$('#preAuth').bootstrapSwitch(); //create the switch
//Now you can call it:
$('#preAuth').on('switch-change', function (e, data) {
alert(data.value);
});
});
Fiddle
Related
I have a checkbox on a dialog box that is opened when clicking a button in an AngularJS widget in my HTML form:
<form class="m-body" role="form" data-ng-submit="preview($event)" novalidate>
...
<div data-ng-if="widget.name === 'display-box'" ng-dige="hideWidgetHeading()">
<div class="divider"></div>
<div class="row">
...
</div>
...
<div class="row ui-checkbox-row">
<label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label>
<div class="col-sm-8 col-xs-6">
<label class="ui-checkbox">
<input type="checkbox" name="noWidgetHeading" ng-true-value= true ng-false-value= false ngChange="hideWidgetHeading()" ng-click="hideWidgetHeading()" >
<span></span>
</label>
</div>
</div>
</div>
...
In the ctrl.js file, I have the following function:
angular.module('app.widget').run(function($templateCache){
...
}).controller('WidgetPickerCtrl', function($scope, $timeout, fxTag, gPresets, appWidget){
...
$scope.widget = undefined;
...
$scope.checkboxModel = {
value1 : true,
value2 : false
};
...
var widgetHeadingCheckbox = document.getElementById("noWidgetHeading");
console.log(widgetHeadingCheckbox);
$scope.$watch('widgetHeadingCheckbox', function(){
console.log("Value of checkbox has changed: ", widgetHeadingCheckbox);
});
function hideWidgetHeading(){
if(widgetHeadingCheckbox){
console.log("Value of widgetHeadingCheckbox in 'if': ", widgetHeadingCheckbox);
return widgetHeadingCheckbox;
} else {
console.log("Value of widgetHeadingCheckbox in 'else: ", widgetHeadingCheckbox);
return widgetHeadingCheckbox;
}
}
Currently, when I load the page, and click the button to open the dialog box, the checkbox is displayed on the dialog box unchecked. When I click it, it shows that it is checked, and if I click it again, it becomes unchecked again, as you would expect.
I am trying to use the hideWidgetHeading() JS function above to perform a different action when the dialog box 'Submit' button is pressed, depending on whether the checkbox is selected or not.
At the moment, if I select the checkbox (i.e. it's checked- its value should be true), and click the 'Submit' button on the form, I get the following output in my console:
null
Value of checkbox has changed: null
Value of widgetHeadingCheckbox in else: null
I also get the same output in the console if I click the submit button when the checkbox is not checked...
Why is the value of my checkbox always null... I would expect it to be either true or false, but never null... Do I need to initialise it somewhere? I thought I had already done that in the HTML, when setting its ng-true-value & ng-false-value...
Edit
Following what dcrux has said in their answer, I have changed the HTML for the dialog box on which the checkbox is displayed to:
<div data-ng-if="widget.name === 'umw-tag-box'" ng-hide="hideWidgetHeading">
...
<div class="row ui-checkbox-row">
<label class="col-sm-4 col-xs-6" data-i18n="Hide widget heading:"></label>
<div class="col-sm-8 col-xs-6">
<label class="ui-checkbox">
<input type="checkbox" ... ng-model="hideWidgetHeading">
<span></span>
</label>
</div>
</div>
</div>
When I click the 'settings' button on the widget, the dialog box opens:
However, when I then check the 'Hide widget heading' checkbox, what it actually hides is stuff from the dialog, rather than from the widget:
What I want it to hide is the title bar of the widget itself, not anything from the dialog box:
How can I get it to hide something from the widget, rather than from the dialog box?
use ng-model in your input tag
<input type="checkbox" name="noWidgetHeading" ng-true-value= true ng-false-value= false ngChange="hideWidgetHeading()" ng-model="noWidgetHeading" ng-click="hideWidgetHeading()" />
keep ng-model in your input tag ng-model="noWidgetHeading"
And also instead of reading from document
var widgetHeadingCheckbox = document.getElementById("noWidgetHeading");
console.log(widgetHeadingCheckbox);
Try reading from scope
var widgetHeadingCheckbox = $scope.noWidgetHeading;
console.log(widgetHeadingCheckbox)
It's just suggestion try and let me know
You'll want to change that ngChange to ng-change. Also, the clue is in the method name getElementById() - the id is missing, you have the name, but not the id.
I would fist add ng-model="noWidgetHeading" back to the input.
Then change:
var widgetHeadingCheckbox = document.getElementById("noWidgetHeading");
console.log(widgetHeadingCheckbox);
$scope.$watch('widgetHeadingCheckbox', function(){
console.log("Value of checkbox has changed: ", widgetHeadingCheckbox);
});
to just:
$scope.$watch('noWidgetHeading', function(){
console.log("Value of checkbox has changed: ", $scope.noWidgetHeading);
});
Next:
On you HTML- the input does not require ng-true-value or ng-false-value as using 'true' and 'false' is the default. If you not want to use the default ensure you are using an expression so: ng-true-value="'YES'"
Ensure usage of directives is correct: ngChange should be ng-change.
hideWidgetHeading() is not exposed to the scope so can not be called from the front end. Consider binding it to $scope: $scope.hideWidgetHeading = function(){...}
See if these changes fix the problem.
I have some pre-written code by a developer, Which I have to modify, In that code, A directive is created using textboxe is used inside label, And I added another custom directive in that directive. So the final rendered HTML looks like.
<label class="myClass">
<div><input type="text" ng-model="someModel"></div>
<my-custom-tag>
<div class="customDropdown">
dropdownBox
</div>
</my-custom-tag>
</label>
As this div.customDropdown is inside label, whenever I click on dropdown, that click is going to textbox also.
So My question is, Is there any way to disable label feature of focusing input elements?
You can prevent the default action of the label's click event using jQuery.
$('label.myClass').click(function(e) {
e.preventDefault();
});
This does it in vanilla JavaScript:
document.body.addEventListener('click', function(e) {
if(e.target.className === 'customDropdown') {
e.preventDefault();
}
});
document.body.addEventListener('click', function(e) {
if(e.target.className === 'customDropdown') {
e.preventDefault();
}
});
<label class="myClass">
<div><input type="text" ng-model="someModel"></div>
<my-custom-tag>
<div class="customDropdown">
dropdownBox
</div>
</my-custom-tag>
</label>
I recommend you to use div or span at the place of the label and if you want you can write it before or inside that ..
I know its not simple but you can do it ..
I have a form with few inputs and all those inputs are required..I am using bootstrap..
Sample
<input type="email" require="yes">
It works fine it ask for a proper email if it is empty a little warming appears saying wrong email format or this field is required.
All this check happens when the user clicks on submit button... what on the submit button I also want to
add a confirm box like "Are sure ? "...
I added the confirm action using bootbox and it works fine but my problem is that:
When the users click the inputs are checked the warning appears for a second and the confirm box too ... so my problem is that I dont want the confirm box appears unless all the inputs pass the checks ..
Thanks I hope I was clear...
<script src="js/bootbox.min.js"></script>
<script>
// Confirm Box ..
$(document).on("click", ".confirm", function(e) {
bootbox.confirm("Are you sure?", function(result) {
console.log("Confirm result: "+result);
});
});
</script>
<input type="email" placeholder="email" class="contact-input" required="yes">
<button id="contact-input" name="request_meet" class="btn btn-primary confirm">Send</button>
If you add a submit event to your button in javascript you can catch the submit before opening the confirm:
$('form').submit(function(e) {
if (!$('#emailField').val()) {
e.preventDefault();
return false;
}
});
I am trying to undo an event handler/listener that is added in an linked JS file in the header of the webpage.
The basic setup:
<form id="form_enter_giveaway" action="" method="post">
<input type="hidden" name="form_key" value="04b931caff99a0a688241e6da5f09839">
<input type="hidden" name="enter_giveaway" value="1">
Enter to Win! (1P)
</form>
JS file (http://www.steamgifts.com/js/header_functions.js):
$('.submit_entry, .remove_entry').click(function(){
$('#form_enter_giveaway').submit();
return false;
});
There is nothing native that should run if I click that link, and searching every reference to that link and that form in general seems to show that that single piece of JS is the only thing that could possibly be causing the form to submit.
But I have tried $('.submit_entry, .remove_entry') .unbind(), .off(), die() with the console; All with and without 'click', and every time I click that link tag it still submits. And it is interfering with the event I want to have run in its place.
Try this
var $selector = $('.submit_entry, .remove_entry');
// Binding the event using on so that it can be unbinded later
// that triggers the submitForm handler
$selector.on('click', submitForm);
function submitForm() {
$('#form_enter_giveaway').submit();
return false
}
// Unbind the event using off
$selector.off('click');
// Bind the event and prevent the default action of anchor
$selector.on('click', function(e) {
e.preventDefault();
});
Check Fiddle
I have a input text field inside a div(x-editable form). I need to call a Jquery function on the button click. How to do so.?
This is my div
<div class="input-append"><input type="text" id="WorkloadName" placeholder="enter your workload name" name=""></div>
This is my jquery function for x-editable form
jQuery.noConflict();
(function($) {
$(function() {
jQuery.fn.editable.defaults.mode = 'inline';
jQuery('#WLElementName').editable();
});
})(jQuery);
In x-editable form after clicking the textfield a form will appear, i need to call the function on the click of the submit button (blue button with tick mark, I could not post the image here since I don't have enough reputation score)
I tried calling the function using the class name of the button but its not coming. please help me to fix this
In your .editable declaration, add a dictionary parameter
url: function(params) {}
and perform your task in there.
See http://vitalets.github.com/x-editable/docs.html#editable for further documentation.