javascript event handling - javascript

I am building a web form for a login. I've decided to add in a few features I wouldn't normally. However I can't seem to get them to work in every instance. So, here's my problem.
On the form, as you progress through each of the inputs a javascript box on the side of the page scrolls down and notifies you about that input i.e. what they can enter, how many characters they have left.
It works great with text boxes, because i can use an onfocus and onblur event handler. However when you reach, for example, a div that has multiple check-boxes you can't exactly use the above event handlers for each input, because then they would have to select an option before the box tells them what it is about.
Ive tried using the onMouseOver and onMouseOut event handlers for the whole div, but it doesn't work fluidly.
So any suggestions? Maybe, is there a way to active a function if a users puts their cursor on a certain part of the screen?
hope this make sense,
thanks

could make a little ? icon or something next to it for someone to hover over, and attach the event to that...
...anyways...you sure you doing it right? post some code...for example, this works just fine..when I hover over the 2nd checkbox, I get the alert
<form>
<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />
<input onmouseover="alert('test');" type="checkbox" name="vehicle" value="Car" /> I have a car
</form>

You should still have the focus/blur events on the checkboxes I think, for people using the keyboard.
Are you working with a js framework? With jQuery, you can simply do:
$(function() {
$(".div_around_the_checkboxes").hover(function() {
// show
},
function() {
// hide
});
});

Related

How to automatically disable a text field after checkbox is ticked

I am currently working on a project, that requires me to implement the following:
I've got 2 input fields - a regular text field, and a checkbox.
What I want to do is - if the user fills in the text field, the checkbox should be automatically disabled. If the checkbox is checked instead, the text field should be disabled.
What I've come up with so far is:
<input type="text" name="num-input1" id="dis_rm" value=""
onblur="document.getElementById('dis_per').disabled = (''!=this.value);" >
<input type="checkbox" name="num-input2" id="dis_per" value=""
onblur="document.getElementById('dis_rm').disabled = (''!=this.value);" >
If I fill in the text field, the checkbox is successfully disabled. However, if I tick the checkbox, the text field remains available.
What am I missing?
If I were you I would:
Move my JS code out of the HTML and into a separate file or at least into a script element.
Use document.getElementById to find an item in the DOM. See https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById
Once you have the element from the DOM, add an event listener for the blur events like this myElement.addEventListener('blur', myCallbackMethod). See https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener for more info.
Inside your callback method you can use event.target.checked to see if the element you've added the event listener to is checked.
Here is a little snippet to get you going:
const
textInput = document.getElementById('element-ID-here'),
checkbox = document.getElementById('element-ID-here');
function onTextInputBlurHandler(event) {
// if textinput value is empty then
// set disabled for checkbox to false
// else
// set disabled for chexbox to true
}
textInput.addEventListenet('blur', onTextInputBlurHandler);
<input type="text" name="num-input1" id="dis_rm" value=""/>
<input type="checkbox" name="num-input2" id="dis_per" value=""/>
With this info you should be able to get (a little) further. When you do, update your question with your JavaScript code and I am sure people will be happy to help you further.
People are bringing up great suggestions in the comments and answers for better code design and quality, but from a purely functional point of view, there are two core things that you should do to get the functionality that you are describing:
1) As mentioned by Paul S. use the checked property for your checkbox logic. Right now, you are checking to see if the checkbox value is not an empty string, but it will always be an empty string, because that's the value that you've assigned to the element:
<input type="checkbox" name="num-input2" id="dis_per" value="" <----- *here*
Nothing else in your code is changing that, so it will always fail the logic check.
However, the checked property automatically switches between true and false as you check and uncheck the input. To do the logic check that you are looking for using that, do this for your JavaScript!
document.getElementById('dis_rm').disabled = this.checked;
2) Switch the event that you are binding for (at least) the checkbox to the "change" event instead of "blur". For checkboxes, the "change" event will trigger when you click on the checkbox (or hit space bar), but the element still maintains its focus. The blur event Will only fire once the user moves the focus to another element of the page.
I'd also recommend using "change" for the text field (there's no point in running the check, if the value is the same when you leave the field as it was when you entered it), but it's not as important since, from a timing point of view, when the "change" event fires, it happens immediately after the "blur" event, so, from the user's point-of-view, the behavior would be the same.
When it's all said and done, if you made no other changes to your code to improve the code design/quality (Thijs made some great suggestions, BTW), this is the minimum change that you would need to get the functionality that you want:
<input type="text" name="num-input1" id="dis_rm" value=""
onblur="document.getElementById('dis_per').disabled = (''!=this.value);" >
<input type="checkbox" name="num-input2" id="dis_per" value=""
onchange="document.getElementById('dis_rm').disabled = (this.checked);" >

onkeyup vs onchange for number type input

I'm having a small issue dealing with number inputs on forms, specifically when trying to call a validation js function when the user modifies them.
<input type="number" name="somenumber" onkeyup="validateForm()" />
This method only calls if the user types a number in the box and is ignored when the user uses the up/down buttons supplied by the browser. So it isn't fully effective.
<input type="number" name="somenumber" onchange="validateForm()" />
This method works great for users using the up/down buttons, but if they type a number into box, it won't execute until they move to another element or click outside the box. It's not the end of the world, but I'd like users to be able to type in the box and immediately be able to click the currently disabled submit button, rather than having to click elsewhere to enable the button.
<input type="number" name="somenumber" onchange="validateForm()" onkeyup="validateForm()" />
So to get the best possible user experience, I'm doing this. The problem is that the function often gets called twice. It works fine I guess. The users don't even notice it's running twice. Still, it seems like I'm missing something and there must be some "right" way to deal with this.
Is there? Or is this just one of those things we have to work around?
You could use the oninput event.
function validateForm() {
console.log('changed');
}
<input type="number" name="somenumber" oninput="validateForm()" />

Unable to click a label programatically with javascript

I have a js problem. This site: http://befwifi.bobevans.com/Mobile.aspx (not my site)
How can you simulate a click on the “I AGREE TO THE TERMS” label with js programmatically?
The simulated click must do exactly what a real click does. ie Make the box look checked, without refreshing the page.
For example none of these work!
document.getElementsByTagName("label")[0].click()
$(document.getElementsByTagName("label")[0]).click()
$(document.getElementsByTagName("label")[0]).trigger("click")
(Site uses jquery)
Purpose:
I am creating a generic js script to record all clicks and inputs on a page. You can then replay those events when you land on the page again. I got stumped by this page because although i can easily record the onclick to the label, when i replay the click() programmatically it doesn't do the same as when i click on the element myself.
Try clicking the checkbox instead of the label. This will do what you want.
document.getElementById("chkAcceptTerms").click();
You need to raise click on the related input, e.g. with an ID selector;
$("#" + $("label").attr("for")).click();
the webpage uses jquery mobile
<input id="chkAcceptTerms" type="checkbox" name="chkAcceptTerms"/>
<label for="chkAcceptTerms">I AGREE TO THE TERMS</label>
to simulate click event try this:
$("#chkAcceptTerms").click();

Jquery - Disable textbox, but still capture click event on the area

Like the question says, I am trying to capture a click on a textbox that is disabled.
Now, there may be a better way to do this, but right now I don't know it. Basically I have a textbox that is disabled sitting in a div. It is merely a placeholder. I have an event that captures the click on anywhere within it's parent div. Because the textbox is disabled, this does not work.
Does anyone know of a way to either:
Keep textbox enabled but don't allow the user to enter any input or display a cursor. (Essentially make it just a static textbox that the user can't interact with at all)
or
Disable textbox like I am now, but continue to capture the click events.
This is what the input looks like:
<li id="test_id" class="selected">
<label id="" for=""> Untitled</label>
<input id="text" type="textbox" name="default" disabled="disabled">
<div class="field_actions">
<span class="propertiesTip"></span>
</li>
and this is what the click event handler looks like:
$('#parent').on('click' , 'li, label, textbox', function (event) { /*...*/ }
This handles a click anywhere inside the div. It doesn't work on the textbox if it is disabled. Anyone encounter this before and have a solution? Thanks in advance
I know this was mentioned, but I would use read only. You can use CSS to style it to look disabled, and even to change the cursor to whatever you want like so:
input.myDisabledInput {
color: grey;
background-color: lightgray;
cursor:default
}
Instead of disabled, make it readonly.

javascript text input change event not firing

I have a text type input field and a checkbox.
If I change the text and then click outside the input box (or press enter or tab) the change event is thrown. But if I enter some text and then click directly on the checkbox using the mouse, only the checkbox change event seems to be thrown.
I have the following code:
<input type="text" name="text" class="update">
<input type="checkbox" name="check" class="update">
and this jQuery:
$('.update').change(function(){
console.log($(this));
});
Is this a known problem, and how can I make sure all change events are fired/thrown/caught in this setup?
To fire user changes, use the input event:
$('input').on('input',function(){...})
To fire code changes, use the DOMSubtreeModified event:
$('input').bind('DOMSubtreeModified',function(){...})
If you want to fire both user and code changes:
$('input').bind('input DOMSubtreeModified',function(){...})
The DOMSubtreeModified event is marked as deprecated and sometimes quite CPU time consuming, but it may be also very efficient when used carefully...
I'm not sure if I get it. But for me when I try to type in textfield and then click checkbox by mouse both events are fired. But you have to keep in mind that event 'change' for text input means that this input has to loose focus, as long as field is focused no change event ever will be triggered. This somehow might be your case. Checkboxes/radioboxes work different way tho. No need to loose focus.
Cheers.
P.S.
My test case:
http://dl.dropbox.com/u/196245/index16.html
The change event fires for both because you're listening to the update class.
The change event will not fire unless the input focus switched to other controls

Categories

Resources