computergeek67
Administrator
Joined: 31 Jul 2007
Posts: 144
Tokens: 147
Location: US
|
 Posted: Sun Oct 28, 2007 11:11 am Post subject: Button Adding Text to a Textbox |
 |
|
This is a very useful technique for smileys and bbcode. It makes a website easier to use and adds to its functionality. Basically, there are two ways of doing this: the first method includes giving an onclick attribute to a normal button. This just adds the desired text to the textbox straightway. The second method invloves using a function using the same basic code.
Essentially, they both uses the same principles, and both accomlish the same result. However, I would reccommend not using a function as it's rather tedious and sometimes not worth the hassle.
In this tutorial, we will at how to make a button which adds text to a textbox without using a function, and then how to use an image to add text.
A simple button which adds text to a textbox
Suppose you had a simple form like this: | Code: | <form name="myform" method="POST">
<textarea rows="2" name="mytextbox" cols="20">your text here</textarea><br>
<input type="submit" value="Submit">
</form> |
Just a form with a textarea and a submit - nothing special. Note that the form's name is "myform" and the textarea's name is "mytextbox". Now, to add a button which adds your desired text into the textarea, add this code inside the form: | Code: | | <input type=\"button\" onClick=\"document.myform.mytextbox.value+='[url=http://linkhere.com]Link text[/url]'\" value=\"URL\" name=\"url\" title=\"Add Hyperlink\" > |
Nothing to difficult there. The code above just adds a button which creates a null button (i.e. doesn't submit the form), which on click add the text Link textto the END of the existing text in the textarea (mytextbox).
The += after the value ADDS the text to the end of the existing text, rather than replacing it all.
The title attribute gives extra information on rollover. This isn't very useful as it already says URL in the value attribute, but if you were to use an image it comes in handy. Images are not always represtative, so you should always give the neccessary information on rollover to help users understand.
An image which adds text to a textbox
Well, I say an image that adds text to a textbox, but that's more of a facade. What I'm going to show you is better described as another button which a background image defined using a css. This example uses the same form given in the first example: | Code: | | <input class='inputurl' type=\"button\" onClick=\"document.myform.mytextbox.value+='[url=http://linkhere.com]Link text[/url]'\" value=\"\" name=\"url\" title=\"Add Hyperlink\" > |
It's basically the same code as before, but this time with a css class attached to it and there is no value for the value attribute (so that the text does not interfere with the background image).
So, in your css stylesheet add this: | Code: | .inputurl {
background-image: url(../images/bbcode/url.png);
width: 16px;
height: 16px;
border: 0px;
background-color: #FFFFFF;
} |
The important thing to note in the above css are that a background image is defined. You can put any image you want here. In this case, my code links to a small 16 x 16 icon of the world with a link, portraying a URL. Since the icon is 16 x 16, that is also my height and width. The border must be set to 0, otherwise the dimensions would mess up. The background colour is also white, this is mainly for transparent icons.
Well that's it...
This technique can be applied to any text to want to add a textbox, whether it be a url, image, code etc. etc.
You can also use for it smileys. Just add to the textbox instead of | Code: | | [url=http://linkhere.com]Link text[/url] |
and give an icon of a smiley.
-firethrottle.com
_________________
Come to me if you have any questions  |
|
