I have a list of urls(div) underneath an input field(div). I need the ability to come down in the list and than by hitting enter this will trigger some function designated to the url. This is the fidle: the script
Over the last days I have tried to much things to explain, but in conclusion none of it worked. Help would be appreciated.
After this line of code :
// set timers to do automatic hash checking and suggestions checking
setInterval(checkHash,500);
setInterval(checkSuggest,500);
Insert this :
$('#searchbox').keyup(
function (e){
var curr = $('#suggest').find('.current');
if (e.keyCode == 40)
{
if(curr.length)
{
$(curr).attr('class', 'display_box');
$(curr).next().attr('class', 'display_box current');
}
else{
$('#suggest li:first-child').attr('class', 'display_box current');
}
}
if(e.keyCode==38)
{
if(curr.length)
{
$(curr).attr('class', 'display_box');
$(curr).prev().attr('class', 'display_box current');
}
else{
$('#suggest li:last-child').attr('class', 'display_box current');
}
}
if(e.keyCode==13)
{
var search_terms = $('.current a').text();
// perform a search with this text...
doSearch(search_terms,true,false);
//update the search textbox
$('#searchbox').val(search_terms);
}
})
And don't forget to delete the previous code at the bottom...
Related
I am currently trying to synchronize two checkboxes on a page.
I need the checkboxes to be synchronized - to this end, I'm using a Tampermonkey userscript to pick up when one of them is clicked. However, I'm at a loss as to how to do it.
I believe they are not actually checkboxes, but ExtJS buttons that resemble checkboxes. I can't check whether they're checked with JQuery because of this: the checked value is appended to a class once the JS behind the button has run.
I have tried preventDefault and stopPropagation, but either I'm using it wrong or not understanding its' usage.
I'm not quite clever enough to just call the JS behind the box instead of an onclick event. Otherwise, that would solve my issue.
This is my code:
//Variables - "inputEl" is the actual button.
var srcFFR = "checkbox-1097";
var destFFR = "checkbox-1134";
var srcFFRb = "checkbox-1097-inputEl";
var destFFRb = "checkbox-1134-inputEl";
//This checks if they're synchronised on page load and syncs them with no user intervention.
var srcChk = document.getElementById(srcFFR).classList.contains('x-form-cb-checked');
var destChk = document.getElementById(destFFR).classList.contains('x-form-cb-checked');
if (srcChk == true || destChk == false) {
document.getElementById(destFFRb).click();
} else if (destChk == true || srcChk == false) {
document.getElementById(srcFFRb).click();
}
//This is where it listens for the click and attempts to synchronize the buttons.
$(document.getElementById(srcFFRb)).on('click', function(e) {
e.preventDefault();
if (document.getElementById(srcFFR).classList == document.getElementById(destFFR).classList) {
return false;
} else {
document.getElementById(destFFRb).click();
}
});
$(document.getElementById(destFFRb)).on('click', function(e) {
e.preventDefault();
if (document.getElementById(srcFFR).classList == document.getElementById(destFFR).classList) {
return false;
} else {
document.getElementById(srcFFRb).click();
}
});
I'm at a bit of a loss...any help would be greatly appreciated.
Figured it out - I was comparing class lists without singling out what I wanted to actually match.
My solution:
$(document.getElementById(srcFFRb)).on('click', function(){
if (document.getElementById(srcFFR).classList.contains('x-form-cb-checked')
== document.getElementById(destFFR).classList.contains('x-form-cb-checked')) {
return false;}
else {
document.getElementById(destFFRb).click();;
}});
$(document.getElementById(destFFRb)).on('click', function(){
if (document.getElementById(srcFFR).classList.contains('x-form-cb-checked')
== document.getElementById(destFFR).classList.contains('x-form-cb-checked')) {
return false;}
else {
document.getElementById(srcFFRb).click();;
}});
I've been trying to get this working for days and am just going around in circles, no matter what resource I read. I think I'm going to have a ton of errors in my code but I just can't figure it out.
I've got a form that I'm wanting to break down into smaller parts, on the click of a next button it will validate all the data in that section then hide it and show the next section. I've also got the issue of my form adds in sections depending on if the person has a partner or children. I'm not sure on how to handle that so would really appreciate some tips.
Here's my validation function, the jfiddle for the full code is below
$(".next").click(function() {
$('#travelform').find(":visible").find("input[required]").each(function(){
var myPattern = $(this).attr('pattern');
var myPlaceholder = $(this).attr('placeholder');
var isValid = $(this).val().search(myPattern) >= 0;
var isEmpty = true;
var abort = false;
$("div.error").remove();
//traverse through each required field to ensure it's been filled in
$(':input[required]').each(function() {
if($(this).val()==='') {
$(this).after('<div class="error">This is a required field</div>');
abort = true;
}
});
if (abort) { return false;} else {return true;}
});
});
Fiddle: https://jsfiddle.net/gq4kyhs3/
Why don't you add a class to all the inputs that have been validated and have a value and then check for this each time next is pressed like this:
$(".next").click(function() {
$('#travelform').find(":visible").find("input[required]").each(function(){
var myPattern = $(this).attr('pattern');
var myPlaceholder = $(this).attr('placeholder');
var isValid = $(this).val().search(myPattern) >= 0;
var isEmpty = true;
var abort = false;
$("div.error").remove();
//traverse through each required field to ensure it's been filled in - Added this check in to see if it has already been checked...if not then continue...
if ($(this).hasClass('checked-and-filled') {
$(':input[required]').each(function() {
if($(this).val()==='') {
$(this).after('<div class="error">This is a required field</div>');
abort = true;
} else {
// if the value is not empty then we know its been checked and it has a value
addClass('checked-and-filled');
}
});
if (abort) { return false;} else {return true;}
}
});
Also a quick comment about your HTML. I noticed this in your fiddle but I think you might have this error in your actual code...
On all of the part sentences you start with a h3 tag but end with a h2:
<h3 class="center">Part 1 of 5</h2>
I am not really sure what code to post here because I don't know what could cause this and the code for this page is quite long, there is still no live version.
Basically it's a form with a few panels, only 1 is visible, when you click next the user is moved to the next screen. What happens is that when you click next there is an unwanted scroll to the footer, any idea what could cause this? view gif below:
EDIT: This is the button code:
Next
and jQuery:
$('.btn-next').on('click', function(e){
if (!$("[name='amount_tobe_charged']").val()) {
alert('Please fill in amount');
} else if($("[name='amount_tobe_charged']").val() < 1) {
alert('Please enter amount');
} else {
var tab = $(this).closest('.tab-pane');
var nxt = $(tab).next();
var empty = $(tab).find('.required').filter(function(){
if($(this).attr('type') === 'email'){
return this.value.indexOf('#') < 0;
} else {
return $.trim(this.value) === '';
}
});
var error = $(empty[0]).attr('data-error') || 'Please fill in all fields';
if(nxt.attr('id') === 'finish-tab'){
submitForm(tab, nxt);
} else {
if(!empty.length) {
changeTab(tab, nxt);
} else {
alert(error);
}
}
}
You can see it happening in your gif. It's because you're hiding a column that comes before the form, therefore once the column does not exist. It will push you down. You can add a scroll to get around with issue with jQuery (or vanilla but I will only provide jQuery's smooth scroll). Either implement the below and remove the style="display: none;" that's causing it to shift.
$('html, body').animate({
scrollTop: $(".form-elem").offset().top
}, 2000);
You'll want to place this after the column is hidden in your JS code.
$(document).ready(function (){
var postcode = $('#postcode-form').val();
function errors(){
if(postcode == ""){
$('#postcode-form').addClass("form-error");
}else{
$('#postcode-form').removeClass("form-error");
}
}
$('#submit-form').click(errors);
});
The class adds when the form is empty but doesn't remove when I enter details in the form. I don't understand why?
Move the postcode chunk of code within your function. Otherwise it gets the value only once when the page loads. By placing it within the function, it'll check the value on each click.
function errors() {
var postcode = $('#postcode-form').val();
if (postcode == "") {
$('#postcode-form').addClass("form-error");
} else {
$('#postcode-form').removeClass("form-error");
}
}
So now you know why it isn't working. I would take advantage of the blunder though, and refactor to cache the selector!
$(document).ready(function (){
var $postcode = $('#postcode-form');
function errors(){
if($postcode.val() == ""){
$postcode.addClass("form-error");
}else{
$postcode.removeClass("form-error");
}
}
$('#submit-form').click(errors);
});
can you please tell me how to get Tab key event in jquery ? Actually If user click Tab key while entering text in input field I want to show alert .
I am using this But not working ..
var myInput = document.getElementById("caseName");
if(myInput.addEventListener ) {
myInput.addEventListener('keydown',this.keyHandler,false);
} else if(myInput.attachEvent ) {
myInput.attachEvent('onkeydown',this.keyHandler); /* damn IE hack */
}
function keyHandler(e) {
alert("Hi")
var TABKEY = 9;
if(e.keyCode == TABKEY) {
this.value += " ";
alert("Tab")
if(e.preventDefault) {
e.preventDefault();
}
return false;
}
}
Just remove the this keyword in the following lines:
myInput.addEventListener('keydown',this.keyHandler,false);
and change it to :
myInput.addEventListener('keydown',keyHandler,false);
Check this fiddle out.