Add Auto-Clearing Default Text to Form Input Fields
An extra piece of polish that also improves your form usability is to add sample text or instructions that automatically clear when the user clicks on the input element. This is a pretty common technique for providing additional information for your users in an unobtrusive way. This article explains how to add this feature to Submission Forms.
Steps for adding sample text:
Enable advanced options and parameters
This technique requires the use of advanced options to insert your sample text. Select the Submission Form where you would like the sample text to appear and open the DataPage wizard by pressing the Edit button. Make sure that the Advanced Features checkbox is checked.
Add sample text to text fields and text areas
Navigate to the Configure Fields screen. Select the DataPage element. Remember, this element must be formatted as either a text field or text area using the field element dropdown. Click the Advanced tab.
In the On Load section, select the radio button for Assign Static Value. In the space provided enter the sample text you would like for this element. Repeat for every element where you would like sample text.
At this point your sample text will be displayed when the DataPage is loaded. Now we’re going to add the auto-clearing functionality.
Add a header and footer
Using the Insert button at the lower right-hand corner of the DataPage Elements panel, insert Header and Footer sections.
Modify and add the following JavaScript
Select the Footer and insert the following JavaScript. If your Submission Form has any required fields, you will need to use the JavaScript sample located in the "Testing and other considerations" section.
<script>
function remove(){
if(this.checked != true){
this.value = "";
this.style.color = "#000000";
this.checked = true; }}
/*Change the Color to Light gray*/
document.getElementById('InsertRecordFieldname').style.color = '#aaaaaa';
/*Add the Clearing Behavior*/
document.getElementById('InsertRecordFieldname').onfocus = remove;
</script>
You’ll notice that the script has three sections (the remove function, “Change the Color to Light gray”, and “Add the Clearing Behavior”). The last two sections will need to be modified to match your Submission Form fields.
Duplicate the single line in each of the last two sections for each element that has sample text. Then, in each section, modify the fieldname to match the fieldname listed in the DataPage elements panel. Make sure that “Insert Record” still remains before your fieldname. For example, if you have Name and Message as fieldnames, the two sections would look like this:
Sample:
/*Change the Color to Light gray*/
document.getElementById('InsertRecordName').style.color = '#aaaaaa';
document.getElementById('InsertRecordMessage').style.color = '#aaaaaa';
/*Add the Clearing Behavior*/
document.getElementById('InsertRecordName').onfocus = remove;
document.getElementById('InsertRecordMessage').onfocus = remove;
You can also modify the #aaaaaa if you would prefer another color besides light gray. Press Finish to save your DataPage.
Testing and other considerations
Now you can test the auto-clearing text directly in Caspio. Double click on your DataPage. The sample text should be visible and in a lighter gray color. Click on the sample text and it should disappear. When you add some of your own text, it should appear in black and not disappear if you deselect the element, then click on the input element a second time.
Note that this sample text will be registered as user input if the user presses submit. The sample text will be recorded into your table, and passes the “Required” test (appearing completed although the user has not entered any data).
If either of these is a concern to you, one solution is to use the following JavaScript to clear the untouched sample text fields when the user clicks on the submit button. This JavaScript also checks for the error text: "You did not enter valid information in one or more of the fields." This is added so that if there has been an error, your user's input will not be cleared. If you are using a localization other than English(standard) you may need to update this text to match your default error text.
<script>
function remove(){
if(this.checked != true){
this.value = "";
this.style.color = "#000000";
this.checked = true; }}
function check(){
if(document.getElementById('InsertRecordFieldname').checked != true)
document.getElementById('InsertRecordFieldname').value = "";}
function checkerror(cl) {
var Er = document.body.getElementsByTagName("p");
for(var i = 0; i < Er.length; i++)
{
if(Er[i].innerHTML == cl)
{
return false;
}}
return true;};
if(checkerror('You did not enter valid information in one or more of the fields.'))
{
/*Change the Color to Light gray*/
document.getElementById('InsertRecordFieldname').style.color = '#aaaaaa';
/*Add the Clearing Behavior*/
document.getElementById('InsertRecordFieldname').onfocus = remove;
document.getElementById("Submit").onclick = check;}
</script>
Again, duplicate the two lines with orange fieldname text as needed to match the number of sample text fields. Then change the fieldnames to correspond to the fieldname of your Submission Form. This JavaScript will remove only the sample text from the field. Using our example above, the script would look like this:
Sample:
<script>
function remove(){
if(this.checked != true){
this.value = "";
this.style.color = "#000000";
this.checked = true; }}
function check(){
if(document.getElementById('InsertRecordName').checked != true)
document.getElementById('InsertRecordName').value = "";
if(document.getElementById('InsertRecordMessage').checked != true)
document.getElementById('InsertRecordMessage').value = "";}
function checkerror(cl) {
var Er = document.body.getElementsByTagName("p");
for(var i = 0; i < Er.length; i++)
{
if(Er[i].innerHTML == cl)
{
return false;
}}
return true;};
if(checkerror('You did not enter valid information in one or more of the fields.'))
{
/*Change the Color to Light gray*/
document.getElementById('InsertRecordName').style.color = '#aaaaaa';
document.getElementById('InsertRecordMessage').style.color = '#aaaaaa';
/*Add the Clearing Behavior*/
document.getElementById('InsertRecordName').onfocus = remove;
document.getElementById('InsertRecordMessage').onfocus = remove;
document.getElementById("Submit").onclick = check;}
</script>
Please note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio Bridge's standard feature set. These solutions are provided "as is" without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.
