increase size textarea with JavaScript and PHP

**itsource** · Nov 13, 2001 12:26

I have textarea to provide user add article, if user seem font too small in textarea, user can click button to increase font size to 16 px or increase to 10 px, and user can preview article by click preview

I'm modify my code to view simple like this

PHP Code:


<html>

<head>

<style>

TEXTAREA {

font-family:MS Sans Serif;font-size:10px; 

}

</style></head>

<body>



<form action="<? echo $PHP_SELF; ?>" method="post" name='b'>

<form name='b'> 

<table width=100%>

<tr><td>

        <textarea name="a" cols=100 rows=20></textarea> <br><br>

</td></tr>

<tr><td>

        <input type="button" value='increase font' onClick='document.b.a.style.fontSize = 16'>

        <input type="button" value='decrease font' onClick='document.b.a.style.fontSize = 10'><br>



<input type=submit value=preview>

<input type=submit value=add>

</td></tr>

</table>

</form> 



</body></html>

I have 2 problem with this code
1. If i'm click increase font to 16 px, the size of text is exceed border of table. How should I do?
2. If I'm increase size to 16px and click preview, when it load again, font it textarea remain 10px (instead 16 px) How shold I do?

Thanks.

**Viral** · Nov 15, 2001 13:00

This version will change the font and textarea col size. The Increase and Decrease font buttons become your previews, no need for a separate button for that. You can obviously tweak the col sizes (100 and 50) so that they are the correct size for your table in each font size:

PHP Code:


<? 

if (!$size) { $size='10'; } // sets default font size to 10 

if ($size == 10) {          // sets textarea column width depending on font size

   $cols = '100';

}else{

   $cols = '50';

}

?>   

<html>

<head>

<script language="JavaScript">

function fontSize(n) {

   document.b.size.value = n;

   document.b.submit();

}

</script>

<style>

TEXTAREA {

font-family:MS Sans Serif;font-size:<? echo $size; ?>px; 

}

</style></head>

<body>



<form action="<? echo $PHP_SELF; ?>" method="post" name='b'>

<input type='hidden' name='size' value='<? echo $size; ?>'>

<table width=100%>

<tr><td>

        <textarea  name="a" cols=<? echo $cols; ?> rows=20><? if ($a) { echo $a; } ?></textarea> <br><br>

</td></tr>

<tr><td>

        <input type="button" value='increase font' onClick='fontSize(16)'>

        <input type="button" value='decrease font' onClick='fontSize(10)'><br>



<input type=submit value=add>

</td></tr>

</table>

</form> 



</body></html>

Hope this helps,
--Viral

User Tag List

Thread: increase size textarea with JavaScript and PHP

Thread Tools

Display

increase size textarea with JavaScript and PHP

Try this

Bookmarks

Bookmarks

Posting Permissions