I have a page where all inputs are assigned a behavior:
$("input").blur(function () {
and I need to exclude a checkbox that has a specific id:
<input type="checkbox" id="allButMe" onchange="billingSameChanged();" value="true"/>
thx
Use jQuery's not selector like this:
$("input:not(#allButMe)").blur(function() { });
use jQuery not here
$("input").not("#allButMe").blur(function() {});
Related
Maybe I'll start with what I want to achieve: I have a form with a required field. By default it should not display any error. The error should be displayed if a user touches the field. So my field looks more or less like this:
<ion-input .... (ionBlur)="updateDispayedErrors()"></ion-input>
But I don't know how to test it because:
Running fixture.debugElement.nativeElement.blur() does not triggers ionBlur handler (the same with ....dispatchEvent(new Event('blur')))
Plain angular (blur) does not work (i.e. if I change the code to (blur)="updateDisplayErrors()" then it does not work)
It seems that calling blur() method on native <input .../> element that is created in the browser would work but... the problem is that when I run the tests fixture.debugElement.nativeElement.childNodes is empty... So the native <input .../> is not created
Please let me know if you would like to see a full example to illustrate it.
If you add a selector to ion-input like:
<ion-input .... (ionBlur)="updateDisplayedErrors()" id="specialInput"></ion-input>
Then you can use fixture.debugElement.triggerEventHandler:
import { By } from '#angular/platform-browser';
...
it('should emit ionBlur', () => {
const ionDe = fixture.debugElement.query(By.css('#specialInput'));
const ionBlurResult = spyOn(component, 'updateDisplayedErrors');
ionDe.triggerEventHandler('ionBlur', {});
expect(ionBlurResult).toHaveBeenCalled();
});
I have been trying to figure out how to bind a value to a textbox in Angular2. Currently I have a textbox with a placeholder that is loaded with a predetermined value.
<input id="textbox" class="k-textbox" placeholder={{label}} />
But once I change a value of a date component, I would want the placeholder value to be updated to the date value selected. So far i wrote this but this doesn't seem to be working. Please advice.
date-component.html
<input id="datepicker" (input)="changeLabel()"/>
date-component.ts
label:string;
constructor() {
this.label = 'Select Date';
}
changeLabel() {
this.label = 'Date Selected';
}
}
use an click event to propagate the changes.
date-component.html
<input id="datepicker" (click)="changeLabel()"/> //<-- click event
You could use two way databinding with NgModel.
https://angular.io/docs/ts/latest/guide/template-syntax.html#!#ngModel
Basically this would make "label" change to whatever the user types.
<input [(ngModel)]="label" id="datepicker" />
You will also need to import FormsModule in your app.
Plunker to show what I mean:
https://plnkr.co/edit/CfmalT7GesrP5lzBsNFx?p=preview
use keyup Event
<input (keyup)="changeLabel()">
enter the value its call the keyup event
I am building a small landing page with a simple demo e-mail signup form. I want to have the form field open up when focused, and then shrink back down on blur.
However the problem I'm facing is when you click the submit button this instigates the blur function, hiding the button and shrinking the form. I need to find a way to stop the .blur() method only when the user is clicking to focus on the submit button. Is there any good workaround for this?
Would appreciate any help I can get!
I know this question is old but the simplest way to do it would be to check event.relatedTarget. The first part of the if statement is to prevent throwing an error if relatedTarget is null (the IF will short circuit because null is equivalent to false and the browser knows that it doesn't have to check the second condition if the first condition is false in an && statement).
So:
if(event.relatedTarget && event.relatedTarget.type!="submit"){
//do your animation
}
It isn't the prettiest solution, but it does work. Try this:
$("#submitbtn").mousedown(function() {
mousedownHappened = true;
});
$("#email").blur(function() {
if (mousedownHappened) // cancel the blur event
{
mousedownHappened = false;
}
else // blur event is okay
{
$("#email").animate({
opacity: 0.75,
width: '-=240px'
}, 500, function() {
});
// hide submit button
$("#submitbtn").fadeOut(400);
}
});
DEMO HERE
Try this inside .blur handler:
if ($(':focus').is('#submitbtn')) { return false; }
why not rely on submit event instead of click? http://jsbin.com/ehujup/5/edit
just couple changes into the html and js
wrap inputs into the form and add required for email as it obviously suppose to be
<form id="form">
<div id="signup">
<input type="email" name="email" id="email" placeholder="me#email.com" tabindex="1" required="required">
<input type="submit" name="submit" id="submitbtn" value="Signup" class="submit-btn" tabindex="2">
</div>
</form>
in js, remove handler which listen #submitbtn
$("#submitbtn").on("click", function(e){
e.stopImmediatePropagation();
$("#signup").fadeOut(220);
});
and use instead submit form listerer
$("#form").on("submit", function(e){
$("#signup").fadeOut(220);
return false;
});
you may use $.ajax() to make it even better.
Doing this you gain point in terms of validation and the native browser's HTML5 validator will make check email format where it is supported.
I have a location search form that uses jQuery UI autocomplete.
When the user starts typing into the input, our list of locations appear as a drop down menu just below the input. If the user clicks one of the locations, the page redirects to the landing page for that location. The user can also click "enter" on the keyboard instead of explicitly clicking on the item.
Here's the probelm. I can't figure out how to get autocomplete to work if the user clicks the SUBMIT button. I'm not allowed to simply remove the submit button because it's a "call to action". The markup & code look like this: (I'm writing this from memory, so it may not be exact)
<form id="locationSearch">
<input type="text" id="enterLocation" />
<input id="goButton "type="submit" value="GO" />
</form>
<script>
var locations = [<br />
{'value': 'Brooklyn', 'url': '/ny/brooklyn/browse'}
{ 'value' : 'Hoboken; , 'url' : /nj/hoboken/browse'}
];
$('#enterLocation').autocomplete({
autoFocus: true,
source: 'locations',
select: event, ui (function() {
window.location.url
});
});
</script>
What I need to do is something like this:
$('#goButton').click(function() {
// trigger automcomplete select
});
Any suggestions are greatly appreciated!
Try using
$('#enterLocation').trigger("autocompleteselect", function(){});
$(document).ready(function() {
$("input:txtAge1").click(function(event) {
if ($(txtAge1).attr("checked") == true) {
$(txtAge2).attr("checked", "unchecked");
$(txtAge2).attr("checked") == false)
}
if ($(txtAge2).attr("checked") == true) {
$(txtAge1).attr("checked", "unchecked");
$(txtAge1).attr("checked") == false)
}
});
});
<input type="checkbox" id="txtAge1" name="option1" value=""/>21<br>
<input type="checkbox" id="txtAge2" name="option2" value=""/>55<br>
I am trying to select either one checkbox or the other. So if one box is UNchecked, it should either be not allowed or force the
other box to BE checked ...in other words, enforce either one or the other but never allow
a "undefined" condition
Maybe I'm dumbing down the issue a bit, but why not try using radio buttons?
You can set one to be selected to avoid the user submitting an empty value.
Update: Since your customer wants checkboxes, here's a solution in jQuery:
$(document).ready(function(){
$('.radioButton').click(function() {
$('.radioButton').prop("checked", false);
$(this).prop("checked", true);
});
});
That's the jQuery code. You should set your input boxes up like this:
<input type="checkbox" id="txtAge1" class="radioButton" name="option1" value=""/>21
<input type="checkbox" id="txtAge2" class="radioButton" name="option2" value=""/>55
That should work, but it's untested. I might've missed something.
One solution is to add two click events, one for each checkbox. When one is clicked, the other is unclicked.
$("#checkbox1").click(function() {
$("#checkbox2").prop('checked', false);
});
$("#checkbox2").click(function() {
$('#checkbox1').prop('checked', false);
});
I ran into this issue recently, except I needed checkboxes instead of radio buttons as having both options unchecked was a requirement. I resolved it with something like this (adapted to the OP's code):
<input type="checkbox" id="txtAge1" />21
<input type="checkbox" id="txtAge2" />55
$(document).ready({
$("#txtAge1").click(function() {
if($("#txtAge1").is(':checked')) {
$("#txtAge2").prop('checked', false);
}
});
$("#txtAge2").click(function() {
if($("#txtAge2").is(':checked')) {
$("#txtAge1").prop('checked', false);
}
});
)};
Might not be that pretty, but it works.
I also wanted to note the excellent link http://rndnext.blogspot.com/2009/08/mutually-exclusive-html-select-elements.html here.
One caution though, I used it to mutex two dynamically generated select lists inside a div. . Since the content to be manipulated is not available at page load, it was not working as expected. Following solutions at jQuery - selecting dynamically created divs helped resolve the issue.
I would use this function. Allows mutual exclusion and allows uncheking:
$('#divId').find(':checkbox').click(function() {
var state=$(this).prop("checked");
$(':checkbox').prop("checked", false);
$(this).prop("checked", state);
});
$("input[type=checkbox]").click(function () {
$(this).siblings().prop("checked", false);
})