How do I create a characters remaining code for a php form?

I would like to add a character count down to my text area in a php form. My database has a limit of 300 characters for this column.
Wanda MarstonCreative DirectorAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Thomas WheelerCommented:
In html the text area has a maxlength parameter you can set this to 300 so it will never allow more characters. If you want an actual count down to be displayed you can you Javascript to count the character length and display it.
0
Dave BaldwinFixer of ProblemsCommented:
Here's a demo from one of my pages.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Characters Left</title>
</head>
<body>
<h1>Characters Left Demo</h1>
<textarea name="ccomments" id="ccom" cols="60" rows="5" wrap="virtual" onkeypress="return chlimit(this)"></textarea><br>
<span id="div1">Characters Left = 300</span>
<script type="text/javascript">
<!--
var limit=300;
var left=limit;
function chlimit(what){
var count=what.value.length;
left=limit-count;
if (left<0) {
	what.value=what.value.substring(0,limit)
	placeholderobj.innerHTML=lengthleft
	}
document.getElementById("div1").innerHTML="Characters Left = " + left;
}

function clearit() {
var h=document.getElementById("cfirst");
h.value="";
var h=document.getElementById("clast");
h.value="";
var h=document.getElementById("cemail");
h.value="";
var h=document.getElementById("ccity");
h.value="";
document.getElementById("ccom").innerHTML="";
document.getElementById("div1").innerHTML="Characters Left = " + limit;
}
// -->
</script>

</body>
</html>

Open in new window

0
Wanda MarstonCreative DirectorAuthor Commented:
Thanks for your replies. Have been fooling around with this for quite some time and seen several examples of excellent code. However, my BIGGEST problem seems to be integrating it into a php form.

<form action="PostANotice.php" method="POST" accept-charset="utf-8">

        <p><label for="description" class="SmallHeading"><strong>Description of item</strong></label> 

        <p>Please enter a brief description. You have up to 300 characters<br />
which includes spaces and special characters.</p>
		<p>
        <?php create_form_input('description', 'textarea', $PostANotice_errors); ?><br />
<p><input type="submit" name="submit_button" value="Submit Your Post &rarr;" id="submit_button" class="formbutton"  /></p>
</form>

Open in new window

0
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

Dave BaldwinFixer of ProblemsCommented:
I have no idea what 'create_form_input' does so I can't help with that.  Wasn't part of your original question either.
0
Thomas WheelerCommented:
what framework are you using?
0
Wanda MarstonCreative DirectorAuthor Commented:
This was my original question -
How do I create a characters remaining code for a php form?
So I have asked how to integrate it into a PHP form. I don't think you have to know what 'create_form_input' does in order to answer how to add javascript to a php page.

Framework - I know what you mean but I don't know what frame work I am using - PHP5 is my best answer.

Thank
0
Thomas WheelerCommented:
Well the function will accept parameters that will add the maxlength  and Javascript on keypress. So if I know what you are using I can give you an example. But I need to know what is providing the create_form_input function
0
Thomas WheelerCommented:
These functions are usually in apps like WordPress codeigniter etc
0
Wanda MarstonCreative DirectorAuthor Commented:
I am working in Dreamweaver CC and coding everything myself - not using any widgets.

Okay, I guess you do need to know what create_form_input does. Probably illustrates why I haven't been able to figure this out.

 The form functions are coming from an external file.

<?php 

// Need the form functions script, which defines create_form_input():
require ('./includes/form_functions.inc.php');	
?>

Open in new window

0
Thomas WheelerCommented:
Can you post the content of the include and I will look at it
0
Wanda MarstonCreative DirectorAuthor Commented:
	} elseif ($type == 'textarea') { // Create a TEXTAREA.
		
		// Display the error first: 
		if (array_key_exists($name, $errors)) echo ' <span class="error">' . $errors[$name] . '</span>';

		// Start creating the textarea:
		echo '<textarea name="' . $name . '" id="' . $name . '" rows="5" cols="43"';
		
		// Add the error class, if applicable:
		if (array_key_exists($name, $errors)) {
			echo ' class="error">';
		} else {
			echo '>';		
		}
		
		// Add the value to the textarea:
		if ($value) echo $value;

		// Complete the textarea:
		echo '</textarea>';

Open in new window

0
Thomas WheelerCommented:
This method does not allow you to specify extra attributes so you will need to extend it. Post the function declaration part and I can help you alter it to accept the extra attributes you need to make this work.
0
Thomas WheelerCommented:
here on the function decoration line add a var named $extra like so
function create_form_input( Description="", $type="", $errors="", $extra=""){

}

Open in new window

Then change this line
 // Start creating the textarea:
                echo '<textarea name="' . $name . '" id="' . $name . '" rows="5" cols="43"';

Open in new window

To read like this with the $extra concatenated
 // Start creating the textarea:
                echo '<textarea name="' . $name . '" id="' . $name . '" rows="5" cols="43"' . $extra;

Open in new window


now you can call the function as follows
create_form_input($type="textarea","maxlength='300' onkeypress='return chlimit(this)' ");

Open in new window


I hope this makes sense. It's hard to help without seeing the full function.
0
Wanda MarstonCreative DirectorAuthor Commented:
It made sense but didn't work when I attempted to fit it into the current form function. Here is more of the code.


<?php

function create_form_input($name, $type, $errors) {
	
	// Assume no value already exists:
	$value = false;

	// Check for a value in POST:
	if (isset($_POST[$name])) $value = $_POST[$name];
	
	// Strip slashes if Magic Quotes is enabled:
	if ($value && get_magic_quotes_gpc()) $value = stripslashes($value);

// Conditional to determine what kind of element to create
	
	if (($type == 'text') || ($type == 'password') || ($type == 'checkbox')) { // Create text or password inputs.
		
		// Start creating the input:
		echo '<input type="' . $type . '" name="' . $name . '" id="' . $name . '" size=50"';
		
		// Add the value to the input:
		if ($value) echo ' value="' . htmlspecialchars($value) . '"';

		// Check for an error:
		if (array_key_exists($name, $errors)) {
			echo 'class="error" /> <span class="error">' . $errors[$name] . '</span>';
		} else {
			echo ' />';		
		}
		
	} elseif ($type == 'textarea') { // Create a TEXTAREA.
		
		// Display the error first: 
		if (array_key_exists($name, $errors)) echo ' <span class="error">' . $errors[$name] . '</span>';

		// Start creating the textarea:
		echo '<textarea name="' . $name . '" id="' . $name . '" rows="5" cols="43"';
		
		// Add the error class, if applicable:
		if (array_key_exists($name, $errors)) {
			echo ' class="error">';
		} else {
			echo '>';		
		}
		
		// Add the value to the textarea:
		if ($value) echo $value;

		// Complete the textarea:
		echo '</textarea>';
		
} elseif ($type == 'checkbox') { // Create a CHECKBOX.

		// Start creating the input:
		echo '<input type="' . $type . '" name="' . $name . '" value="';

       
	   // Add the value to the input:
		if ($value) echo ' value="' . htmlspecialchars($value) . '"';
		
		
		// Display the error:
		if (array_key_exists($name, $errors)) {
			
			echo ' />';		
		}
		
	} // End of primary IF-ELSE.

}

Open in new window

0
Thomas WheelerCommented:
here you go

<?php

function create_form_input($name, $type, $errors, $extra="") {

        // Assume no value already exists:
        $value = false;

        // Check for a value in POST:
        if (isset($_POST[$name])) $value = $_POST[$name];

        // Strip slashes if Magic Quotes is enabled:
        if ($value && get_magic_quotes_gpc()) $value = stripslashes($value);

// Conditional to determine what kind of element to create

        if (($type == 'text') || ($type == 'password') || ($type == 'checkbox')) { // Create text or password inputs.

                // Start creating the input:
                echo '<input type="' . $type . '" name="' . $name . '" id="' . $name . '" size=50"';

                // Add the value to the input:
                if ($value) echo ' value="' . htmlspecialchars($value) . '"';

                // Check for an error:
                if (array_key_exists($name, $errors)) {
                        echo 'class="error" /> <span class="error">' . $errors[$name] . '</span>';
                } else {
                        echo ' />';
                }

        } elseif ($type == 'textarea') { // Create a TEXTAREA.

                // Display the error first:
                if (array_key_exists($name, $errors)) echo ' <span class="error">' . $errors[$name] . '</span>';

                // Start creating the textarea:
                echo '<textarea name="' . $name . '" id="' . $name . '" rows="5" cols="43"'. $extra;

                // Add the error class, if applicable:
                if (array_key_exists($name, $errors)) {
                        echo ' class="error">';
                } else {
                        echo '>';
                }

                // Add the value to the textarea:
                if ($value) echo $value;

                // Complete the textarea:
                echo '</textarea>';

} elseif ($type == 'checkbox') { // Create a CHECKBOX.

                // Start creating the input:
                echo '<input type="' . $type . '" name="' . $name . '" value="';


           // Add the value to the input:
                if ($value) echo ' value="' . htmlspecialchars($value) . '"';


                // Display the error:
                if (array_key_exists($name, $errors)) {

                        echo ' />';
                }

        } // End of primary IF-ELSE.

}

?>

Open in new window


and you call it like this

$errors = array();
create_form_input("text1","textarea",$errors,"maxlength='300' onkeypress='return chlimit(this)' ");

Open in new window


the fourth param is the extra attributes you want added
0
Wanda MarstonCreative DirectorAuthor Commented:
Thanks for your reply.

This code allows me to enter in as much code as I want to so it does not work. Also, what I need most is the code for the text that tells the user what about of key strokes they have left.
0
Thomas WheelerCommented:
here try this:
<?php

function create_form_input($name, $type, $errors, $extra="") {

        // Assume no value already exists:
        $value = false;

        // Check for a value in POST:
        if (isset($_POST[$name])) $value = $_POST[$name];

        // Strip slashes if Magic Quotes is enabled:
        if ($value && get_magic_quotes_gpc()) $value = stripslashes($value);

// Conditional to determine what kind of element to create

        if (($type == 'text') || ($type == 'password') || ($type == 'checkbox')) { // Create text or password inputs.

                // Start creating the input:
                echo '<input type="' . $type . '" name="' . $name . '" id="' . $name . '" size=50"';

                // Add the value to the input:
                if ($value) echo ' value="' . htmlspecialchars($value) . '"';

                // Check for an error:
                if (array_key_exists($name, $errors)) {
                        echo 'class="error" /> <span class="error">' . $errors[$name] . '</span>';
                } else {
                        echo ' />';
                }

        } elseif ($type == 'textarea') { // Create a TEXTAREA.

                // Display the error first:
                if (array_key_exists($name, $errors)) echo ' <span class="error">' . $errors[$name] . '</span>';

                // Start creating the textarea:
                echo '<textarea name="' . $name . '" id="' . $name . '" rows="5" cols="43"'. $extra;

                // Add the error class, if applicable:
                if (array_key_exists($name, $errors)) {
                        echo ' class="error">';
                } else {
                        echo '>';
                }

                // Add the value to the textarea:
                if ($value) echo $value;

                // Complete the textarea:
                echo '</textarea>';

} elseif ($type == 'checkbox') { // Create a CHECKBOX.

                // Start creating the input:
                echo '<input type="' . $type . '" name="' . $name . '" value="';


           // Add the value to the input:
                if ($value) echo ' value="' . htmlspecialchars($value) . '"';


                // Display the error:
                if (array_key_exists($name, $errors)) {

                        echo ' />';
                }

        } // End of primary IF-ELSE.

}



?>
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Character Count</title>
  <meta name="description" content="Character count example">
  <meta name="author" content="thomas@wheelerwire.com">

<script>
<!--
var limit = 300;
var left = limit;

function chlimit(what){
        var count = what.value.length;
        left = limit - count;

        if (left < 0) {
                what.value = what.value.substring(0,limit)
                placeholderobj.innerHTML = lengthleft
        }
        document.getElementById("div1").innerHTML="Characters Left = " + left;
}

// -->
</script>

</head>

<body>

<?
$errors = array();

create_form_input("text1","textarea",$errors,"maxlength='300' onkeyup='return chlimit(this)' ");
?>
<div id="div1">Characters Left = 300</div>
</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Dave BaldwinFixer of ProblemsCommented:
In the end, your code has to generate something like I posted above.  http://www.experts-exchange.com/Programming/Misc/Q_28549075.html#a40417794
0
Thomas WheelerCommented:
I belive the example I posted is a working example of what was asked for.
0
Wanda MarstonCreative DirectorAuthor Commented:
Okay. I appreciate the above comments. I will not be able to test further until tomorrow.
0
Wanda MarstonCreative DirectorAuthor Commented:
Dave Baldwin - You mean it has to have this part of the code? -
function clearit() {  ---- etc.

The code posted by Thomas Wheeler seems to work.
0
Thomas WheelerCommented:
No it does not that is why I removed it
0
Dave BaldwinFixer of ProblemsCommented:
No, the "function clearit() " was just part of the page I copied it from.  It was there to clear the text area because under some circumstances, a Reset button does not clear a form.
0
Wanda MarstonCreative DirectorAuthor Commented:
Yes, I have seen a form where the reset button does not clear the data.

The reason why I asked about this is because I was comparing the two codes and wondering why you stated the following: -

In the end, your code has to generate something like I posted above.  http://www.experts-exchange.com/Programming/Misc/Q_28549075.html#a40417794
0
Dave BaldwinFixer of ProblemsCommented:
Because (except for that one item), all the functions have to be there when you view the source in a browser.  You have to detect key presses and display a count.

A 'Reset' button restores a form to the condition it was in when it was loaded.  If you preload values into a form when you load it into a browser, 'Reset' will restore those values.  It will 'Reset' it to the original values that were loaded with the page.
0
Wanda MarstonCreative DirectorAuthor Commented:
There didn't see to be a way to split the points for a solution. I meant to alot points to both.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Programming

From novice to tech pro — start learning today.