Advertisements
Home > Information Technology, programming, Software > Javascript Programming: How to Store Elements in HTML Before Submitting to Next Page

Javascript Programming: How to Store Elements in HTML Before Submitting to Next Page

3-12-2009-11-28-50-amHey, are you wondering how does wordpress.com handles adding tags to your post? It seems that when you add a tag and click the “add” button, your inputted tag will straightly go to the bottom of it wihout having to refresh the page. This saves server processing time since you store your tag in your computer first and when you are done writing your post, then your previously stored tags will be passed to the target page to be further processed.

So, how to do this? The answer is by using the power of javascript. Javascript command can help you add dynamic content in your HTML page. It’s a lightweight script and saves the burden of having to reload unnecessary page wholely. Now, I’ll show you how to create your own tag organizer step by step:

Step 1: Create your form

Start your HTML file by defining the usual <html>,<head>, and <body>. Then, create your form to process the input that the user’s type in your <body>:

<p><b><i>Add a Tag:</i></b></p>
<form name="form1" action="form2.php" method="GET">
	<table>
	      <tr>
	         <td><input id="txt1" type="Text" size="10" value="">
		 <td><input type="button" onClick="addTag()" value="Add">
		 <td><input type="submit" value="Submit">
	      </tr>
	</table>
	<div id="tagBuffer" width="200"></div>
</form>
<input type="hidden" id="counter" value="1">

In this code, the “Add” button will trigger the addTag() function in the javascript and the “Submit” button will pass the elements in the form. The tagBuffer div element will be the place where you put the inputted tag in the txt1 text field. The “counter” hidden input will be a unique specifier for defining each tag. The function of this input will be expose in the later step.

Step 2: Add <script> in the HTML file header

To define the javascript function, you have to define it by adding <script> to the HTML file. Actually, you can add this tag in either <body> or <head>, but I personally prefer <head> to provide better reading to the file when it is necessary to debug it. So, in your <head> add this following element:

<script type="text/javascript"></script>

Step 3: Define addTag() function

Now, you are ready to code your javascript program. Start your program by defining the function addTag() since when the “Add” button pressed, it will trigger the addTag() function:

function addTag() {}

In the addTag() function, you need to get 3 items: the txt1 which is the input textfield that user has inputted, the counter hidden input for the tag unique specifier, and the tagBuffer div element for the storage of your tags.

var txt = document.getElementById("txt1").value;
var counter = document.getElementById("counter").value;
var tagBuffer = document.getElementById("tagBuffer");

Now create a new element (you can use div or span) to be appended in your tagBuffer div element.

var newdiv = document.createElement('div');
newdiv.setAttribute('id',counter);
newdiv.innerHTML = "<img src=\'delButton.png\' onClick=delTag("+ counter + ")>" +
			txt + "<input type = \'hidden\' name=\'tags[]\' value=\'" +
			txt + "\'>";
counter++;
document.getElementById("counter").value = counter;
tagBuffer.appendChild(newdiv);

What this code does is it defines a new variable called “newdiv” which is a <div> element. The id of the newdiv is the value of the counter variable (Remember that we need to define a unique specifier to each and every tag created). Next, inside the newdiv, the function will store information of the tag inputted by the user (newdiv.innerHTML is a command to fill a tag). Then, you increment the counter and store the updated value back to the counter hidden input. Then, you append your newdiv to the tagBuffer by executing tagBuffer.appendChild() command.

Step 4: Define delTag function()

Now, I’m sure that after you add a tag in the text field and press the “Add” button, you will have something like this:

3-12-2009-7-18-08-pm

Notice that you have three elements everytime you create a tag: the “X” image which will execute delTag() if you click on it, the tag name, and the tags[] hidden input which is the storage of the tags inputed and will be passed if the submit button is pressed. Remember what I said previously to define a unique specifier for the tags? This is what the purpose for. It is a determinant for the delTag() function, what tag to be deleted if the “X” image is pressed.

Now, since you know what tag to be deleted, start coding your delTag() function:

function delTag(divNum) {
	var tagBuffer = document.getElementById("tagBuffer");
	var tagToRemove = document.getElementById(divNum);
	tagBuffer.removeChild(tagToRemove);
}

This code will delete the div inside the tagBuffer with the specified id passed by the delTag() function in the “X” image. So, there you have it, your own tag organizer form . You can download this mini web application  below:

File Name: addATag

File Size: 5 KB

Download: http://www.4shared.com/file/92483061/4123b95e/addATag.html

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

%d bloggers like this: