I'm using jQuery to copy the value of one input field to another on blur. Here's my code:
$( "input[id$=token-input-search_field]" ).blur( function() {
$(this).val() = $('input[id$=search_field]').val;
});
But it doesn't seem to work. What am I doing wrong?
$( "input[id$=token-input-search_field]" ).blur( function() {
$(this).val( $('input[id$=search_field]').val() );
});
Related
I am wondering if there's a way to write the following code without the if / else.
Currently, this works fine. But I'm trying to figure out how I can leverage a DRY method and I don't like the fact that the prop is written twice.
I have a text value and the user needs to input that code into the text box. Once the values match, it "enables" the submit button, otherwise it disables it.
$( '#input-code' ).on( 'change keyup paste', function() {
if ( $( this ).val() == $( "#random-code" ).text() ) {
$( '#submit-btn' ).prop( 'disabled', false );
} else {
$( '#submit-btn' ).prop( 'disabled', true );
}
});
You can migrate the if..else into a internal condition to set the attribute,
$( '#input-code' ).on( 'change keyup paste', function() {
$( '#submit-btn' ).prop( 'disabled', this.value !== $( "#random-code" ).text() );
});
Additionally, if you are dealing with modern browsers, you can just use on('input' instead of 'change keyup paste'. Check for browser support though.
You can use the negated expression directly in prop.
This will disable the button when button text and the text inside #random-code will be same.
Make sure you trim the text(), to remove leading and trailing spaces, otherwise it will not match with the button text.
$('#input-code').on('change keyup paste', function() {
$('#submit-btn').prop('disabled', !($(this).val() == $.trim($("#random-code").text())));
});
OR
$('#input-code').on('change keyup paste', function() {
$('#submit-btn').prop('disabled', $(this).val() !== $.trim($("#random-code").text()));
// ^^^
});
$('#input-code').on('change keyup paste', function() {
$('#submit-btn').prop('disabled', function(){
return ( $( this ).val() == $( "#random-code" ).text() );
});
});
for more detail you can check here...
Jquery prop() detail.....
I'm trying to select a div for a click event but not the inputs within said div. I thought this would do it but it does not work. here is a demo. Thank you
html
<div id = "test"><input></div>
js
$('#test:not(input)').click(function(){
alert();
});
You could check to see if the clicked element is an input element using !$(e.target).is('input')
Updated Example
$('#test').on('click', function (e) {
var $target = $(e.target);
if (!$target.is('input')) {
alert('clicked');
}
});
When you click on the input, the click event bubbles to the div above it.
You can stop this by calling stopPropagation or stopImmediatePropagation on the event object.
http://jsfiddle.net/t66f06oL/1/
$( '#test' ).on( 'click', function() {
alert();
} );
$( '#test' ).on( 'click', 'input', function( e ) {
e.stopImmediatePropagation();
} );
When you click on the input control your click event is actually caught by the parent div. You can fix this by changing your code to this:
$('#test:not(input)').click(function(){
alert();
});
$('#test').find('input').click(function(e){
e.stopPropagation();
});
I need to track if an element and if ye which element is changed in a form.
The $( "input" ).change(function () { handler is not firing in Kendo UI. My code is
$( "input" ).change(function () {
alert('aaaa');
event.preventDefault();
});
what am I doing wrong? Or is there a more proper way in kendo?
I think you are looking for keyup event.
$("input").keyup(function () {
alert('aaaa');
});
Demo
Change event for input only fires when focus is lost after changing value. See this
Give your input (for example #target) and them:
jQuery( ".target" ).change(function() {
alert( "aaaaa" );
});
I am populating values into a data table by using a check box group. You check the box and a value shows up in the table. However, I cannot get multiple check boxes to hold their value of 'checked' and not get multiple values to display in the table. Below is my code for the check box. Thanks for the help
<script type="text/javascript">
// - jQuery SHOW/HIDE functions
$(document).ready(function() {
$('#showJobtitles :checkbox').live('click', function() {
var checkboxVal = $('#showJobtitles :checkbox:checked').val();
$('.jobTitleCol_' + checkboxVal).toggle();
$('.jobTitleTD_' + checkboxVal).toggle();
//$( "p" ).toggle( "slow" );
//alert(checkboxVal);
//return this.filter('#showJobtitles, #jobTitleCol_'+checkboxVal+':checkbox').attr("checked", true);
//$('#showJobtitles :checkbox:checked',true).val();
//$('.jobTitleTD').toggle();
return false;
});
});
</script>
first use on
$(document).ready(function() {
$('#showJobtitles').on('click',':checkbox', function() {
// see from here---------------------------------------------------
var chkval=[];
var checkboxVal = $('#showJobtitles :checkbox:checked').find(
function(){
chkval.push($(this).val());
});
alert(chkval.join(","));
//------------------------------------------------
$('.jobTitleCol_' + checkboxVal).toggle();
$('.jobTitleTD_' + checkboxVal).toggle();
//$( "p" ).toggle( "slow" );
//alert(checkboxVal);
//return this.filter('#showJobtitles, #jobTitleCol_'+checkboxVal+':checkbox').attr("checked", true);
//$('#showJobtitles :checkbox:checked',true).val();
//$('.jobTitleTD').toggle();
return false;
});
});
I have index.php and will load index-edit.php with a button click into index.php in a <div class="edit-wrapper"> </div>. I have some input in index.php and some input in index-edit.php. I want to add .active class to them on focus out, but jQuery does not add .active class to the ones in index-edit.php, but rest of them (which are not index-edit.php) works fine.
Look at my script.js.
$( input ).focusout( function() {
$( this ).addClass('active');
});
$( document ).on( "click", ".btn", function() {
$('.edit-wrapper').load('index-edit.php');
});
Since the inputs are added dynamically, you need to use event delegation to register the event handler
// New way (jQuery 1.7+) - .on(events, selector, handler)
$(document).on('focusout', 'input', function(event) {
$(this).addClass('active');
});
Where are you loading script.js ? Try this :
$(document).ready(function(){
$( input ).focusout( function() {
$( this ).addClass('active');
});
$( document ).on( "click", ".btn", function() {
$('.edit-wrapper').load('index-edit.php');
});
});
need to use event delegation
$( document).on('focusout', 'input ', function() {
$( this ).addClass('active');
});