Ruelicke.net » JavaScript http://www.ruelicke.net ...when coding passion, gaming addiction, Internet surfing syndrome and the real life collide... Mon, 05 Apr 2010 17:11:25 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 JavaScript – Playing with a Form http://www.ruelicke.net/2007/09/09/javascript-playing-with-a-form/ http://www.ruelicke.net/2007/09/09/javascript-playing-with-a-form/#comments Sun, 09 Sep 2007 17:26:24 +0000 Marco http://www.ruelicke.net/2007/09/javascript-playing-with-a-form/ JS - JavaScriptI assume you already saw one of those forms which show something like “Enter query” in one of the input fields and as soon as you enter a letter or press a key on the keyboard, the “Enter query” vanishes.

As I needed such a feature for a project of mine, I decided to write this tutorial to share a couple of techniques you can use for such an interesting form.

Form #1

The first form has the mentioned feature that removes the text in the input field as soon as you hit a key:
<script type="text/javascript">
<!--
function clear_input($input)
{
if (document.getElementById($input).value == "Name" || document.getElementById($input).value == "Password")
{
document.getElementById($input).value = '';
};
}
window.onload = document.getElementById("name-1").value="Name";
window.onload = document.getElementById("password-1").value="Password";
//-->
</script>

Put this code at the bottom of the page, replace the getElementByID values and IDs with the ones you are using, then add the event onkeypress="" to the input box you want to have using this feature. Inside the onkeypress="" you add clear_input('id of the input field');return true;.
For my example it would be for the “name” input field: onkeypress=" clear_input('name-1'); return true;"

The “return true” is a bug fix for some browsers which won’t clear the input field as we want it.

Form #2

This form will check the input data before it submits it:
<script type="text/javascript">
<!--
function check_input()
{
if (document.getElementById("name-2").value != "Name" && document.getElementById("name-2").value != "" && document.getElementById("password-2").value != "Password" && document.getElementById("password-2").value != "")
{
return true;
}
else
{
return false;
}
}
function clear_input($input)
{
if (document.getElementById($input).value == "Name" || document.getElementById($input).value == "Password")
{
document.getElementById($input).value = '';
};
}
window.onload = document.getElementById("name-2").value="Name";
window.onload = document.getElementById("password-2").value="Password";
//-->
</script>

As you see I’m using the clear_input() function again and added a check_input function. Add onsubmit="return check_input;" to the opening form tag and make sure you are using the right IDs in your script.

If everything is working, your form should behave like mine.

Wrap Up

I hope this tutorial gave you an idea or two on how to improve your form a little bit. An idea which just pops up right now is to combine the clear_input method with Ajax to provide search suggestions, if it is a search form. Or you add a check_mail variant which validate an inserted email on the fly.

There are many options. Do you know a special one and have no idea how to achieve it? Or do you want to share an idea or script? I’m happy about any kind comment!

]]> http://www.ruelicke.net/2007/09/09/javascript-playing-with-a-form/feed/ 0 JavaScript – Hello World http://www.ruelicke.net/2007/09/03/javascript-hello-world/ http://www.ruelicke.net/2007/09/03/javascript-hello-world/#comments Mon, 03 Sep 2007 10:00:11 +0000 Marco http://www.ruelicke.net/2007/09/javascript-hello-world/ JS - JavaScriptUnlike my PHP and HTML tutorials this tutorial will be different.

Although I know JavaScript I don’t use it often because of a few reasons. So I’m using this “tutorial” to
1. refresh my knowledge about JavaScript
and
2. teach you the one or the other useful thing.

Let’s begin

For this “tutorial” you should have some basic understanding about HTML and CSS, later it could be useful to know PHP, but that’s some time later…

To use JavaScript in an HTML document you have 2 methods:

  • Using an external JavaScript file.
  • Having the JavaScript code right on the page.

Which method you use is up to you but at the end you need to use more or less same technique to include the JavaScript in the HTML page.
To embed a JavaScript you are using:

<script type="text/javascript" src="path/to/file"></script>

The above example is used when you have an external javascript file. Otherwise you will be using this code:

<script type="text/javascript">
<!--
...javascript code...
//-->
</script>

You place this HTML code either in the <head> or <body> part of the page, then you are ready to write your first Javascript script.

Hello World!

We want to write our first script and we want to execute it as soon as the page is loaded. The JavaScript event handler we need for this is onload() although we could also do it in a different way.

Our “hello world” script will bring up an alert box with the message “Hello world!”:
<script type="text/javascript">
<!--
function hello_world()
{
alert("Hello world!");
}
//-->
</script>

Note: If you are using an external file, just take the javascript inside the html comments and put it into the external file.

We got our first function and now we need to call it somehow. As I said already, we will be using the onload() handler.
To make sure that the code works as intended, you have to put the code in the <head> part of your HTML page.
Now add onload="hello_world();" in the opening body tag. Save the page and load it in a browser.
To have a comparison, try my “Hello world” alert.

The onload() handler is useful, but is often abused. I recommend you only use it when you have to. Same applies for the alert() message.

Better “Hello World!”

Depending on the amount of your JavaScript code, the page needs longer to load. If you put the code into the head, it will take some time before the visitors see any content of your page. It is recommended to put the JavaScript into the foot part of the body.
If you try it, you will see that onload() will not work, so we have to use a different approach:
<script type="text/javascript">
<!--
function hello_world()
{
alert("Hello world!");
}
window.onload = hello_world();
//-->
</script>

Now the script will be executed after everything on the page is loaded.

Wrap up and some hints

This is all I want to teach you for now. Have a look at w3school’s JavaScript Tutorial if you can’t wait to go on with learning JavaScript. Before you visit this page, please listen to my hints as these are based on my knowledge of coding nice, user-friendly websites:

  • Never ever use JavaScript to open PopUps without informing the user before.
  • Only use JavaScript if it increases the experience of the website.
  • Try to avoid excessive use of JavaScript just because you can do that.
  • Don’t use JavaScript to “link” to another page. It can break the browser history and result in a bad experience of the user.
  • Never ever use JavaScript to resize the browser window of the user
  • When using JavaScript, make sure that those who disabled JavaScript won’t miss parts of the website someone with JavaScript enabled would be able to see.

I know, if you read this list you will most likely not know how to create the mentioned effects. I suggest you keep this list in mind when I continue with my tutorial because then I will show you some of those things you shouldn’t do just for the purpose of showing it.

I hope you enjoyed this introduction to my JavaScript tutorials. If you want to be informed on the publish of new tutorials, subscribe to my RSS Feed or sign up for the newsletter.

]]> http://www.ruelicke.net/2007/09/03/javascript-hello-world/feed/ 0