jQuery input event triggered after page reload only - javascript

Basically I have two divs,
<div id="firstPage"></div>
and
<div id="details">
<div id='searchBox' class='detail--searchBox'>
<input id='txtSearchTerm' name='txtSearchTerm' type='text'>
</div>
</div>
On page load the textbox with id searchBox is hidden and it is shown on click event of div with id firstPage. I have following function which must be triggered on textbox change. But this input event is triggered once page is reloaded.
onSearchBoxOnDetailsChange: function () {
$("#searchBox").on("input", "#txtSearchTerm", function () {
var val = $(this).val().trim();
val = val.replace(/\s+/g, '');
if (val.length > 1) {
console.log(val);
} else {
}
});
},

Write your code like below:
onSearchBoxOnDetailsChange: function () {
$(document).on("input", "#searchBox #txtSearchTerm", function () {
var val = $(this).val().trim();
val = val.replace(/\s+/g, '');
if (val.length > 1) {
console.log(val);
} else {
}
});
},

Related

Css change on value change in input field. jQuery

var footerEmail = $('footer#footer input.email');
var footerEmailLength = footerEmail.val().length;
var footerEmailCaptcha = $("footer#footer .captcha-hide");
footerEmail.focus( function() {
footerEmailCaptcha.css("display","block");
});
footerEmail.blur( function() {
if(footerEmailLength > 0) {
footerEmailCaptcha.css("display","block");
}
else if (footerEmailLength == 0) {
footerEmailCaptcha.css("display","none");
}
});
.captcha-hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<footer id="footer">
<input class='email'>
<div class="captcha-hide">Testing</div>
</footer>
I want to make sure that onblur works when I enter something inside the text (input) field.
First if condition inside the blur function is not working since it is taking the value as '0' which will be initially. When I enter something and click outside of the input field then the css should be display:block
Please guide me how I can proceed further. I am new to jQuery/Javascript. Googling around to learn stuff.
you have to give the var footerEmailLength = footerEmail.val().length; inside blur function.
The blur function should be like this:
footerEmail.blur( function() {
var footerEmailLength = footerEmail.val().length;
if(footerEmailLength > 0) {
footerEmailCaptcha.css("display","block");
}
else if (footerEmailLength == 0) {
footerEmailCaptcha.css("display","none");
}
And if you use class as selector then change the footerEmail.val().length
to footerEmail[0].val().length.
The running code
var footerEmail = $('.email');
var footerEmailCaptcha = $(".captcha-hide");
footerEmail.focus( function() {
footerEmailCaptcha.css("display","block");
});
footerEmail.blur( function() {
var footerEmailLength = footerEmail[0].val().length;
if(footerEmailLength > 0) {
footerEmailCaptcha.css("display","block");
}
else if (footerEmailLength == 0) {
footerEmailCaptcha.css("display","none");
}
});
.captcha-hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<footer id="footer">
<input class='email'>
<div class="captcha-hide">Testing</div>
</footer>

Trying to invoke onchange method set by jQuery

In my code, I am setting a change listener on my checkboxes here
$(".section").change(function() {
if($(this).is(":checked")) {
$("." + this.id).show();
...
Now I am trying to do a "code-driven" click on the checkbox, and I have
$(".secTitle").click(function(e) {
var elem = this;
while(elem) {
if (elem.className && elem.className.indexOf ('DOC_SECTION') != -1) {
var clzes = elem.className.split(" ");
var clzIdx = 1;
if (elem.getAttribute('closeSecClassIdx')) {
clzIdx = parseInt(elem.getAttribute('closeSecClassIdx'));
}
var chk = document.getElementById(clzes[clzIdx]);
chk.checked = false;
alert(chk.onchange);
//chk.changed();
break;
}
else {
elem = elem.parentNode;
}
}
});
I know that I have the right element, as chk.checked = false; is working correctly. After that I'm trying to invoke the change method set earlier but my alert is showing 'undefined'.
You can trigger the change event by calling $(chk).change(). Below I've created a little prototype that shows binding to the change event and invoking it.
jQuery(function($) {
// bind to the change event
$("input").change(function() {
console.log('change triggered!');
});
// now trigger it
$("input").change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />

Need to simulate keypress jquery

I have a function that uses the value of a textbox (prodinput) to hide/show links in a dropdown list. It works when a user types in a string manually but when I want to auto-populate the value by passing a url parameter I'll need to trigger a keyup or keydown to get it to call the function.
Here is the function that does the search (located in the core.js):
prodinput.on('keyup, keydown',function() {
var search = $(this).val().toLowerCase();
$('.support-product .browse-products a').each(function() {
if($(this).text().toLowerCase().search(search) > -1) {
$(this).parent().show();
} else {
$(this).parent().hide();
}
});
});
Here is the function I'm using to trigger the function above (located on the page I'm trying to run it on.
$(function(){
$target = $('.browse-products .display');
$target.val($trimmed);
$('.browse-products').addClass('active');
$target.focus();
var e = jQuery.Event( "keydown" );
$target.trigger(e);
});
I've tried using:
$target.keyup();
and as shown above:
var e = jQuery.Event( "keydown" );
$target.trigger(e);
I'm wondering if it's a problem with the order in which things load on the page.
I'd put your keyup code in a named function.
$(function () {
myFunction();
prodinput.on('keyup, keydown', function () {
myFunction();
})
};
var myFunction = function () {
var search = $('#prodinput').val().toLowerCase();
$('.support-product .browse-products a').each(function () {
if ($(this).text().toLowerCase().search(search) > -1) {
$(this).parent().show();
} else {
$(this).parent().hide();
}
});
};
Assuming you don't need to support ancient browsers you can just listen for the input event which covers keypress and change events. Then after attaching the listener simply trigger the event:
$(function() {
$("#prodinput").on('input', function() {//alternatively you could use change and keyup
var search = $(this).val().toLowerCase();
$('.support-product .browse-products a').each(function() {
if ($(this).text().toLowerCase().search(search) > -1) {
$(this).parent().show();
} else {
$(this).parent().hide();
}
});
}).trigger("input");//trigger the event now
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="search" id="prodinput" value="peanuts" />
<div class="support-product">
<ul class="browse-products">
<li>jam</li>
<li>elephants</li>
<li>peanuts</li>
</ul>
</div>

".check" for radio in JS

here's my code:
document.getElementById("frequencyweekly").checked = function() {
document.getElementById("newsoptions").className = "activesubscription";
};
<div id="newsoptions">
<input type="radio" id="frequencyweekly" name="newsletterfrequency">
<label for="frequencyweekly">Weekly</label>
<input type="radio" id="frequencymonthly" name="newsletterfrequency">
<label for="frequencymonthly">Monthly</label>
</div>
I would like my .newsoptions div have class .activesubscription if #frequencyweekly button is checked. How should I do that?
checked is a boolean, not an event that fires a function, so you probably want
if ( document.getElementById("frequencyweekly").checked ) {
document.getElementById("newsoptions").className = "activesubscription";
}
if you want that in an event handler it would be
var box = document.getElementById("frequencyweekly"),
elem = document.getElementById("newsoptions");
box.addEventListener('change', function() {
if ( this.checked ) {
elem.classList.add("activesubscription");
} else {
elem.classList.remove("activesubscription");
}
}, false);
If you want to do something when clicking a box, you use the onclick attribute. Within that, you can check the checked property.
document.getElementById("frequencyweekly").onclick = function() {
if (this.checked) {
document.getElementById("newsoptions").className = "activesubscription";
} else {
document.getElementById("newsoptions").className = "";
}
}

show div when all input fields have content

I have a form with a few input fields, I only want to show a div when all the input fields got content, when one of the input fields has no content the div should disappear again.
I made it work with one input field, but how do I get it to work when all the input fields are filled in (don't know if its a good clean way?):
$(function () {
$('input').change(function() {
$('.next').toggle($(this).val().length !== 0);
}); });
Fiddle:
http://jsfiddle.net/uQyH9/19/
Try this : http://jsfiddle.net/uQyH9/21/
$(function () {
var _cached=$('input');
_cached.change(function() {
if (_cached.filter(function (){return $(this).val().length }).length==_cached.length)
$('.next').show();
else
$('.next').hide();
});
});
You can use a filter function to check that all the input are filled.
Code:
$(function () {
$('input').change(function () {
$('.next').toggle($("input").filter(function () {
return this.value === "";
}).length === 0)
});
});
Demo: http://jsfiddle.net/IrvinDominin/DwF2P/
UPDATE
You can check the value of the elements by type by cheking type attribute.
Code:
$(function () {
$('input').change(function () {
$('.next').toggle($("input").filter(function () {
var myType=$(this).attr("type");
if (myType === "checkbox") return !$(this).is(":checked");
if (myType==="radio"){
var myName = $(this).attr("name");
if (myName==="") return !$(this).is(":checked");
return $('input[name='+ myName +']:checked').length===0
}
return this.value === "";
}).length === 0)
});
});
Demo: http://jsfiddle.net/IrvinDominin/pqJhg/
Loop over the inputs. If you find one that isn't filled in, then hide the DIV. If you don't, show the DIV.
$('input').change(function() {
var allFilled = true;
$('input').each(function() {
if (this.value === '') {
allFilled = false;
return false; // Terminate the loop
}
}
$('.next').toggle(allFilled);
});

Categories

Resources