Submit Button Published After Required Fields Have Content

For forms that must have certain fields filled in before the form is submitted, a missing submit button can guarantee that. The submit button is published only after each required field has something typed in.

Someone using a browser with JavaScript turned off is unable to bypass the submission requirement - not even by pressing the return/enter key while the cursor is in a text field. (For a one-field form, the page would reload; otherwise, no action is taken.)

After the required fields contain information, the submit button is published. The submit button doesn't exist until then, nowhere on the page or in the source code.

Types of forms that may benefit from the delayed submit button feature include:

1. Log in forms, where a password or both a username and a password need to be provided.

2. Subscription forms, where at least the email address is required.

3. Contact forms, where an email address to respond to is critical.

4. Quizzes, where certain questions must be answered for meaningful results.

Here is an example form with the name and email address required.

Implementing the Delayed Submit Button

Before providing instructions to implement, here is the source code of both the form and the JavaScript for the above example. To see it work on your site, copy the code and paste it into a test web page.

<form 
   id="myForm" 
   action="#" 
   method="post">
Name: 
<input type="text" id="name" name="name" onkeyup="DetermineIfInsertSubmitButton()">
<br>Email: 
<input type="text" id="email" name="email" onkeyup="DetermineIfInsertSubmitButton()">
<br>Telephone: 
<input type="text" id="phone" name="phone">
<br>Message:<br>
<textarea id="message" name="message" style="width:300px; height:100px;"></textarea>
<div id="button_location"></div>
</form>


<script type="text/javascript">
/* 
   Submit Button After Required Fields Compliance
   Version 1.0
   October 29, 2012

   Will Bontrager Software, LLC
   https://www.willmaster.com/
   Copyright 2012 Will Bontrager Software, LLC

   This software is provided "AS IS," without 
   any warranty of any kind, without even any 
   implied warranty such as merchantability 
   or fitness for a particular purpose.
   Will Bontrager Software, LLC grants 
   you a royalty free license to use or 
   modify this software provided this 
   notice appears on all copies. 
*/

////////////////////
// Customizations //

// Five places to customize.

// Place 1 --
// Specify the id value of the form tag.

var FormIDvalue = "myForm";


// Place 2 --
// Specify the URL for the action attribute of the form tag.
// Example:
//     var ActionURL = "/script.php";

var ActionURL = "javascript:alert('Submission of example form spawns only this message.\n\nA live form would submit to a URL.')";


// Place 3 --
// Comma-separated list of id values of required fields.

var ListOfRequiredFieldIDs = "name, email";


// Place 4 --
// Submit button field name and value (either/both may be blank)

var SubmitButtonFieldName = "";
var SubmitButtonValue = "Click Me";


// Place 5 --
// Id value of div where submit button will be inserted

var IDofDivForSubmitButton = "button_location";


// No further customizations required. //
/////////////////////////////////////////
var ButtonMade = false;
ListOfRequiredFieldIDs = ListOfRequiredFieldIDs.replace(/ /g,"");
ListOfRequiredFieldIDs = ListOfRequiredFieldIDs.replace(/^,+/,"");
ListOfRequiredFieldIDs = ListOfRequiredFieldIDs.replace(/,+$/,"");
var FieldList = ListOfRequiredFieldIDs.split(",");

function DetermineIfInsertSubmitButton()
{
   if(! document.getElementById && document.createElement) { return; }
   var numComplied = 0;
   var requiredCount = FieldList.length;
   for(var i=0; i<requiredCount; i++)
   {
      if(document.getElementById(FieldList[i]).value.length) { numComplied++; }
   }
   if(numComplied < requiredCount)
   {
      document.getElementById(IDofDivForSubmitButton).innerHTML = "";
      document.getElementById(FormIDvalue).action = "#";
      ButtonMade = false;
      return;
   }
   if(ButtonMade) { return; }
   ButtonMade = true;
   var inhere = document.getElementById(IDofDivForSubmitButton);
   var formfield = document.createElement("input");
   formfield.type = "submit";
   if(SubmitButtonFieldName.length) { formfield.name = SubmitButtonFieldName; }
   if(SubmitButtonValue.length) { formfield.value = SubmitButtonValue; }
   inhere.appendChild(formfield);
   document.getElementById(FormIDvalue).action = ActionURL;
} // function DetermineIfInsertSubmitButton()

DetermineIfInsertSubmitButton(); // For page reload with populated fields.
</script>

Use the above source code as an example and reference for these instructions.

The Form

Determine which form to enable with the delayed submit button. Three ares in the source code of the form need to be changed.

<div id="button_location"></div>

That's all the changes the form needs to have.

The JavaScript

The JavaScript has 5 customization places.

var FormIDvalue = "myForm";

var ActionURL = "/script.php";

var ListOfRequiredFieldIDs = "name, email";

var SubmitButtonFieldName = "";
var SubmitButtonValue = "Click Me";

var IDofDivForSubmitButton = "button_location";

The JavaScript is now ready. Put it somewhere below the form. The JavaScript may be imported from an external file.

Implemented

With the form updated and the customized JavaScript somewhere below the form, the submit button will be published immediately after each required field has something typed in. The submit button is constructed and published with JavaScript.

Before that point, the submit button is nowhere on the page or in the source code of the page.

Will Bontrager