Home > WebEOC > Admin Guide > Board Building Tips > Add a Clear All Button for Forms

Add a Clear All Button for Forms

By default, WebEOC does not include a Clear All button for form boards. However, such a button can easily be added using a JavaScript function that checks all fields and clears their values. Boards marked as forms can accept the code below and make it easy for users to start with blank forms when applicable. 

To add a Clear All button to a form board
  1. From the applicable board's input view, add the Clear All button to the desired location on the form.

    <button name="ClearAll" onClick="formReset();" >Clear All Fields</button>
  2. From the Advanced Board Editor tab, click the name of the applicable input view. The HTML editor for this view opens.

  3. Locate the top section, which includes the head section:

    <html>
    <head>
    <style type="text/css">
       Code here
    </style>
    </head>
  4. Just before the </head> tag, add the following JavaScript function into the HTML:

<script type="text/javascript">
function formReset()
{
    var Inputs = document.getElementsByTagName("input");
    for (var i=0; i &lt; Inputs.length; i++)
    {
        if (Inputs[i].type == "text")
        {
           Inputs[i].value = "";
        }
        if (Inputs[i].type == "checkbox")
        {
            Inputs[i].checked = false;
        }
    }
    var Dropdowns = document.getElementsByTagName("select");
    for (var i=1; i &lt; Dropdowns.length; i++)
    {
       Dropdowns[i].selectedIndex = 0;  
    }
    var Textareas = document.getElementsByTagName("textarea");
    for (var i=0; i &lt; Textareas.length; i++) 
    {
        Textareas[i].value = "";  
    }
}
</script>

Save the view and test the board to verify proper implementation of the Clear All button.

You must to post a comment.
Last modified

Tags

Classifications

This page has no classifications.