I want like this in javascript,when checkbox is visible show message1 else show message2.
Try this:
HTML:
<label><input type='checkbox' onchange='handleChange(this);'>Checkbox</label>
JS:
function handleChange(cb) {
if(cb.checked == true){
alert('Message 1');
}else{
alert('Message 2');
}
}
JSBIN:
http://jsbin.com/abukor/2
Hope this helps.
checkBox.onchange = function () {
console.log("Checked:" + checkBox.checked)
};
if($("#checkbox").is(":checked")){
alert("message1");
}else{
alert("message1");
}
You can use the javascript ternary operator
var msg = ($("#MyCheckbox").is(":checked")) ? 'message1' : 'message2';
alert(msg);
You could of course in-line the ternary to make it really compact
Also checkout this SO answer for some other examples of using the ternary operator.
If you want to show the message if the checkbox itself is visible then you can use the :visible operator which would make the code:
var msg = ($("#MyCheckbox").is(":visible")) ? 'message1' : 'message2';
alert(msg);
Related
when an event is created like below, I wish to know if there has been no change in the event.
'change #id'(e){
if(change){
do this
} else {
do something else
}
}
In current situation when there is no change than the event returns nothing .
if you want to detect change on textbox at keyboard interact from user, we can use keyup :
HTML
<input name='id' id='id' type='text'>
JS
'keyup #id': function (e, tpl) {
e.preventDefault();
if (e.keyCode == 13) {
// Do Your Code If ENTER
} else {
// Others code here
}
},
If you want change on Select Option like Combobox, use change to detect if user choose from list :
HTML
<select name='id' id='id'>
<option></option>
{{#each dataOPTION}}
<option value="{{_id}}">{{nameOptions}}</option>
{{/each}}
</select>
JS
'change #id': function (e, tpl) {
e.preventDefault();
// Your code here
},
I hope this is what you want, like #masterAM says, your question is not clear. But Iam figure out what you want.
GBU
How do I achieve this:-
When user types character like 'abcd' and then '>'(an invalid character for my application), I want to set the text back to 'abcd'. Better if we can cancel the input itself as we do in winforms application. This should happen when user is typing and not on a click of button.
I want this to be applied on all text boxes in my web page. This will be easy if the solution is jQuery based. May be something which will start like this.
$("input[type='text']")
SOLUTION
I used both of the answer provided by #jAndy and #Iacopo (Sorry, couldn't mark as answer to both) as below.
$(document).ready(function() {
//makes sure that user cannot enter < or > sign in text boxes.
$("input:text").keyup(purgeInvalidChars)
.blur(purgeInvalidChars)
.bind('keypress', function(event) {
if (event.which === 62 || event.which === 60)
return (false);
});
function purgeInvalidChars() {
if (this.value != this.value.replace(/[<>]/g, '')) {
this.value = this.value.replace(/[<>]/g, '');
}
}
});
Though one issue still remained i.e. It doesn't allow user to select text in the textbox and this only happens on chrome, work fine on IE (for the first time :D), not tested on firefox. It would be glad if anyone can find solution for that or hope people at Google solves it :D.
UPDATE
I solved it by if (this.value != this.value.replace(/[<>]/g, '')) check. Also updated solution.
Thanks again to all the answerers.
You should catch the 'keyup' and 'blur' events and attach them to a function that bonifies the input: don't forget that the user can paste an invalid sequence of characters.
So for example
$('input[type="text"]').keyup(purgeInvalidChars).blur(purgeInvalidChars)
function purgeInvalidChars()
{
this.value = this.value.replace(/[<>]/g, '');
}
surely you will improve the regexp, maybe replacing all characters except the enabled ones.
Sorry, I can't test my code, so you should take it cum grano salis :-)
Example (keypress):
$(document).ready(function(){
$('input:text').bind('keypress', function(event){
if(event.which === 62 || event.which === 60)
return(false);
});
});
Example (keydown):
$(document).ready(function(){
$('input:text').bind('keydown', function(event){
if(event.which === 226)
return(false);
});
});
Just make use of the preventDefault and stopPropagation functions for events. Those are triggered by returning (false) within an event handler.
In this example, I just check for the keycode of < and > which is thankfully on the same key. If we hit that code, we just prevent the default behavior.
Reference: .preventDefault(), .stopPropagation()
$('#textBox').keyup(function(e){
var myText = $('#textBox').val();
myText = myText.replace(">", "");
myText = myText.replace("<", "");
$('#textBox').val(myText);
});
-- Update --
keyup instead keypress
I'm having a bit of a problem with this code.
The program gives me a list of checkboxes but a user ID. then u user can change his selection and push the save button (id="btnSaveUserIntersts") and i am trying to save in the hidden textbox all the values of the checkboxes that was choosen.
The problem is that i am getting all the time the same selections that came form the database and not getting the new selection that the user made.
Can any one tell me what am i doing wrong here?
$(document).ready(
function()
{
$('#btnSaveUserIntersts').bind(
'click',
function()
{
var strCheckBoxChecked = new String();
$('input[type=checkbox][checked]').each(
function()
{
strCheckBoxChecked += $(this).val();
strCheckBoxChecked += ',';
}
);
$('#hidUserInterests').val(strCheckBoxChecked);
}
);
}
);
10x
Try using:
$('input:checkbox:checked').each(
function()
{
strCheckBoxChecked += $(this).val();
strCheckBoxChecked += ',';
}
);
As the selector instead of what you're currently using.
$('input[type="checkbox"]:checked')
Use .map, it's far prettier:
var strCheckBoxChecked = $('input:checkbox:checked').map(function()
return this.value;
}).get().join(",");
And the selector you are using is close, $('input[type=checkbox][checked=checked]')
As everyone knows, that default button doesn't work in FF, only IE. I've tried to put in the tag or in the and it's not working. I've found a js script to fix this issue, but for some reason it's not working for me. This script for a submit button, i need to use it for a LinkButton, which is should be the same.
Link:
<div id="pnl">
<a id="ctl00_cphMain_lbLogin" title="Click Here to LogIn" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$cphMain$lbLogin", "", true, "Login1", "", false, true))">Log In</a>
<input name="ctl00$cphMain$UserName" type="text" id="ctl00_cphMain_UserName" />
<input name="ctl00$cphMain$UserName" type="text" id="ctl00_cphMain_UserName1" />
</div>
<script>
$(document).ready(function() {
$("#pnl").keypress(function(e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$("a[id$='_lbLogin']").click();
return true;
}
});
});
I know that i can override original function "WebForm_FireDefaultButton"
in This post, but i really wanted to get this one to work.
Thanx in advance!!!
I found the answer to fixing linkbuttons here: http://www.sentia.com.au/2009/03/fixing-the-enter-key-in-aspnet-with-jquery/
$(document).ready(function(){
var $btn = $('.form_submit');
var $form = $btn.parents('.form');
$form.keypress(function(e){
if (e.which == 13 && e.target.type != 'textarea') {
if ($btn[0].type == 'submit')
$btn[0].click();
else
eval($btn[0].href);
return false;
}
});
});
Inspired by Larry Flewwelling's answer or rather Michael Cindric's, I came up with a modified and updated version of that javascript snippet. I've documented more detailed information on why and how in this blog post, but let me summarize the important changes:
Works with dynamically loaded content
Works with any number of "forms" on the same page
And here it is:
$('body')
.off('keypress.enter')
.on('keypress.enter', function (e) {
if (e.which == 13 && e.target.type != 'textarea') {
var $btn = $(e.target).closest('.jq-form').find('.jq-form-submit');
if ($btn.length > 0) {
if ($btn[0].type == 'submit') {
$btn[0].click();
}
else {
eval($btn[0].href);
}
return false;
}
}
});
You could expand your selector.
$("#pnl > input")
Which will then catch the input click for all the controls in the panel.
This is a follow-up question to ASP.NET How to pass container value as javascript argument
Darin Dimitrov has kindly provided his answer using jQuery,
But for some reason, I was not able to select the grid row I wanted to.
Here is the jQuery used to select row.
$(function() {
$('#_TrustGrid input[name^=trustDocIDTextBox]').each(function(index) {
$(this).click(function() {
alert('Hello world = ' + index);
setGridInEditMode(index);
});
});
});
Here is the actual output HTML markup.
<input
id="_TrustGrid_ctl16_ctl05_ctl00_trustDocIDTextBox"
type="text" value="198327493"
name="_TrustGrid$ctl16$ctl05$ctl00$trustDocIDTextBox"/>
I have just started using jQuery tonight and been going through the official jQuery Selectors documentation but have been unsuccessful.
Am I missing something here?
What I did to save the full id of the control I used in my .aspx page:
<input type="hidden"
id="SubcontractorDropDownID"
value="<%= SubcontractorDropDown.ClientID %>" />
You can then just get the value of the id and then use that in your query to know which row to use.
At first glance, I think you just want a '$' instead of '^' and you should be targeting the ID and not the NAME in your selector?
$(function() {
$('#_TrustGrid input[id$=trustDocIDTextBox]').each(function(index) {
$(this).click(function() {
alert('Hello world = ' + index);
setGridInEditMode(index);
});
});
});
I do not know why selecting through #_TrustGrid would not work.
I was able to get around the problem by specifying :input as shown below.
$(function() {
//$('#_TrustGrid input[id$=trustDocIDTextBox]').each(function(index) {
$(':input[id$=trustDocIDTextBox]').each(function(index) {
$(this).click(function() {
alert('Hello world = ' + index);
setGridInEditMode(index);
});
});
});