Disappearing Form Values with External JS

JavaScript
1

Hi, I’m attempting to create a to-do list web app for learning purposes and I’m actually finding the PHP easier than the javascript.

What I want is for the value of an input to dissapear when clicked on, and the value to reappear when clicked off, if the value of the input is
“Click here to create a new task” and I want this to be in an external JS file, meaning I dont wan’t any onclick=“” stuff.

I’ve googled in but they are all inline and even something as simple I am finding troublesome.

Any help would be greatly appreciated.

2

You can also do fancy stuff like use DOMContentLoaded and onreadystatecbange on your onPageLoad function, to start executing your JS when the DOM is ready, rather than wait for the entire document to finish loading…

3

The code below should do what you are looking for. You can plug it in and test it, all you need to do is replace the “myClass” CSS class specified in the last line with the class of your choice:

/inputEvents is the JS function that will create the event listeners that will handle your input elements. It consists of jsLogic (the JS logic you want to execute gets placed here), handleClick (the event handler. for more info on event handlers you csn go to http://www.quirksmode.org/js/events_advanced.html) and onPageLoad (that will add the event listeners only after the page has finished loading) The paramter is the target class (all elements that contain this class name will have the event listener added to them)/
var inputEvents = new function inputEvents() {

/Define a variable “e” for the root “this”. I do this because depending on where you are in the source code, “this” can refer to a different object than the one you intended/
var e = this;

/Clear the default text/
var clearText = function(_target) {
if(_target.value == ‘Click here to create a new task’) {
_target.value = ‘’;
}
}

/Show the default text if the input field is empty/
var showDefault = function(_target) {
if(_target.value == ‘’) {
_target.value = ‘Click here to create a new task’;
}
}

this.handleClick = function(targetClass) {

/Place all the input tags in a variable, which will automatically become an array of input elements/
var allInputs = document.getElementsByTagName(‘input’);
/Traverse all the array items and only process those containing the target class/
for(var i = 0; i < allInputs.length; i++) {
if(allInputs[i].className.indexOf(targetClass) > -1) {

var myInput = allInputs[i];
/I do a bit of feature detection using “typeof”, so that broswers that support addEventListener will use it, otherwise fall back to attachEvent (the IE method)/
if(typeof document.addEventListener != ‘undefined’) {
/addEventListener parameters are event, function and true/false (setting false means that the event bubbles)/
myInput.addEventListener(‘click’, function() { clearText(this); }, false);
myInput.addEventListener(‘blur’, function() { showDefault(this); }, false);
}
else {
/attachEvent always bubbles, so the is no true/false parameter. you must use the “with” statement, or else the script will only handle the last item of the array/
with ({ “myInput”: myInput }) {
myInput.attachEvent(‘onclick’, function() { clearText(myInput); });
myInput.attachEvent(‘onblur’, function() { showDefault(myInput); });
}
}

}
}

}

/function that will execute handleClick when the entire page has loaded. There are sexier methods out there, that will detect when the DOM is loaded (faster than doing a window.onload), but I will stay away from these for now. If you want more information on them, you can always google “DOMContentLoaded”(Firefox, an now recently Webkit-based browsers) and “document.onreadystatechange” (IE)./
this.onPageLoad = function(targetClass) {
var myTargetClass = targetClass;
window.onload = function() {
e.handleClick(myTargetClass);
}
}

}

/Execute the onPageLoad function. You can change “myClass” to the class name of your choice/
inputEvents.onPageLoad(‘myClass’);

4

Hi,

Essentially the native JS I wrote does the same thing that JQuery does, but if you are new to JS this is a much more useful exercise, as it teaches you the internals of Javascript.

I believe every beginner should learn native JS first, it will only make you a better JQuery developer because you actually understand what is going on (too many people call themselves JS developers nowadays…).

5

I’m not very good with native JS myself. Off course for learning purpous is good to know, but you might consider to use jQuery or other js library because you cand select dom elements very easy, and events or ajax are now the same in any browser.

6

I am currently at work, but this evening I can break the JS down for you like a fraction.

7

The google search you are looking for is event listeners, which is part of the principles of unobtrusive javascript. In a nutshell you want to use addEventListener (standards complaint browsers) and attachEvent (IE) to attach an event handler to your desired object. You can place the logic in a function/variable in your external JS, as well as a call to that function. For example:

var inputEvents = new function inputEvents() {
var e = this;

var jsLogic = function() {
//write your JS logic
}

this.handleClick = function() {
if(typeof document.addEventListener != ‘undefined’) {
document.getElementById(‘myElem’).addEventListener(‘click’, jsLogic, false);
}
else {
document.getElementById(‘myElem’).attachEvent(‘onclick’, jsLogic);
}
}

this.onPageLoad = function() {
window.onload = function() {
e.handleClick();
}
}
}

var myEvents = inputEvents.onPageLoad();

8

Hey, thankyou for your reply the problem is, I have minimal knowledge about JS at the minute and none of this code is making sense to me.