Simulated Submit Button

A simulated submit button can be designed as you please.

It can work with or without being part of a form. Anything JavaScript could do with a regular form submit button onclick attribute can be done with this simulated submit button.

A live simulated button is in the masthead at the Willmaster.com website:

• The button has more than one line of text, with some text being smaller and absolutely positioned.

• The button's style is versatile enough to be responsive to screen widths so it looks good on various computers and mobile devices.

• No form is required, just a div with an onclick attribute to initiate the PDF download.

Unlike a regular form submit button, the simulated submit button presented in this article may be designed as you please — and used wherever HTML and JavaScript are available.

Here's an example.

This particular button changes several CSS property values when it is tapped.

• The background-color changes from #fafafa to #efefef.

• The border-style changes from outset to inset.

• The box-shadow changes from default (outset) to inset.

When the tap is released, the CSS property values revert to the previous style.

Your button can, of course, be any color, any size, any style you wish. And any CSS declaration can be changed when the button is tapped.

The second simulated submit button example, on the left, is for demonstrating style versatility — a completely different visual style that can, nevertheless, accomplish anything a regular submit button onclick attribute could. As with the previous example, some CSS property values change when the button is tapped.

The source code for both examples is further below, along with the copy and paste JavaScript function.

Because the above are example buttons and not intended to launch anything, only the style changes happen when they are tapped.

To launch something when tapped, put an onclick attribute into the simulated button div.

• To submit a form, give the onclick attribute a value something like this, where the-form-tag-id is the id value of the form tag:

  onclick="document.getElementById('the-form-tag-id').submit()"
  

• To have the click run a JavaScript function, perhaps an Ajax function, let the onclick value contain the function name. Example:

  onclick="TheJavaScriptFunctionName()"
  

• To have the button do nothing except change its style, the onclick attribute can be removed. Alternatively, the onclick value can be return false (which is what the examples use):

  onclick="return false"
  

Here is a representation of the construction of a simulated submit button. Notes follow.

<div
  id="button-id-value"
  style="button-CSS-style"
  onmousedown="PowerhouseStyleChange('button-id-value','[down CSS style]')"
  onmouseup="PowerhouseStyleChange('button-id-value','[up CSS style]')"
  onclick="[action]"
>
Button text
</div>

Button construction notes:

1. The button-id-value is in three places.

   1. The id value of the div for the button.

   2. The first of two parameters for the PowerhouseStyleChange() function in the onmousedown attribute's value.

   3. The first of two parameters for the PowerhouseStyleChange() function in the onmouseup attribute's value.

2. The button-CSS-style is where the button's CSS style will be. A class name may be used instead.

3. The [down CSS style] is the second of two parameters for the PowerhouseStyleChange() function in the onmousedown attribute's value.

4. The [up CSS style] is the second of two parameters for the PowerhouseStyleChange() function in the onmouseup attribute's value.

5. The [action] is the onclick value. What you specify for the value depends on what you want to happen when the button is clicked.

That's the basics. The CSS styles of the div and the parameters of the PowerhouseStyleChange() function calls for onmousedown and onmouseup are where you do your design magic.

Now that you're familiar with the construction of a simulated submit button, here is the source code for the two examples in this article. They are color coded according to the above representation of the construction of a simulated submit button. (Don't forget the JavaScript that makes it all work. It's source code follows the source code for the examples.)

Here is the source code for the first example in this article, the large button.

<div 
    id="simulated-submit-button-div"
    style="
        background-color:#fafafa; 
        border:2px outset #999; 
        box-shadow:3px 3px 6px 1px #ccc; 
        color:#000; 
        font-weight:bold; 
        border-radius:5px; 
        text-align:center; 
        padding:.5em .25em .4em .25em; 
        font-size:2em; 
        line-height:110%; 
        width:100%; 
        box-sizing:border-box; 
        white-space:nowrap;
        cursor:pointer;"
	onmousedown="PowerhouseStyleChange('simulated-submit-button-div','background-color:#efefef; border-style:inset; box-shadow:3px 3px 6px 1px #ccc inset;')"
	onmouseup="PowerhouseStyleChange('simulated-submit-button-div','background-color:#fafafa; border-style:outset; box-shadow:3px 3px 6px 1px #ccc;')"
	onclick="return false"
>
YES! Let's do it!
</div>

Here's the source code for the second example in this article, the small button.

<div 
    id="another-simulated-submit-button-div"
    style="
        float:left;
        background-color:#fafaff; 
        border:2px groove #99f; 
        box-shadow:3px -3px 6px 1px #ccf; 
        color:#c00; 
        font-weight:bold; 
        border-radius:50% 50%; 
        text-align:center; 
        padding:.5em .25em .4em .25em; 
        font-size:1em; 
        line-height:110%; 
        width:6em;
        box-sizing:border-box; 
        white-space:nowrap;
        cursor:pointer;
        margin-bottom:0;
        position:relative;
        top:-.25em;"
	onmousedown="PowerhouseStyleChange('another-simulated-submit-button-div','background-color:#efefff; border-style:ridge; box-shadow:3px -3px 6px 1px #ccf inset;')"
	onmouseup="PowerhouseStyleChange('another-simulated-submit-button-div','background-color:#fafaff; border-style:groove; box-shadow:3px -3px 6px 1px #ccf;')"
	onclick="return false"
>
Wow!
</div>

The JavaScript used for the simulated submit button is the Powerhouse Style Changer presented at the Powerhouse CSS Style Changer Willmaster Library article. The source code is made available here, too, for convenience.

Copy it and paste the JavaScript anywhere in the web page where you have a simulated submit button. The JavaScript requires no customization.

<script type="text/javascript">
function PowerhouseStyleChange(idvalue,style)
{
   // Version 1.0, March 14, 2017.
   // Version 1.1, November 10, 2017 (removed .replace(...) from last code line)
   // Will Bontrager Software LLC - https://www.willmaster.com/
   var id = document.getElementById(idvalue);
   var ta = style.split(/\s*;\s*/);
   for( var i=0; i<ta.length; i++ )
   {
      var tta = ta[i].split(':',2);
      var ttaa = tta[0].split('-');
      if( ttaa.length > 1 )
      {
         for( var ii=1; ii<ttaa.length; ii++ )
         {
            ttaa[ii] = ttaa[ii].charAt(0).toUpperCase() + ttaa[ii].slice(1);
         }
      }
      tta[0] = ttaa.join('');
      id.style[tta[0]] = tta[1];
   }
}
</script>

One thing I can't tell you exactly is what to specify for the onclick attribute value. It depends on what you want the button click to do; what shall occur when the button is clicked.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager