Forms

Description

A collection of HTML forms that demonstrate different ways of submitting and processing form data. The forms are divided into two groups: those that use hard-coded data and those that are populated with data from a MySQL database.

Setup

This is the live demo. To use on your own server:

Download the zip file. Within the forms-master directory is the following structure:

|-- public_html/            (Document Root)
    |-- a/
        |-- form-a-hardcoded.html
        |-- form-a-mysql.php
        |-- form-a-process.php 
    |-- b/
        |-- form-b-hardcoded.php
        |-- form-b-mysql.php
    |-- c/
        |-- form-c-hardcoded.html
        |-- form-c-mysql.php
    |-- d/
        |-- form-d-hardcoded.html
        |-- form-d-mysql.php
    |-- e/
        |-- form-e-hardcoded.html
        |-- form-e-mysql.php
    |-- f/
        |-- form-f-hardcoded.html
        |-- form-f-mysql.php
    |-- g/
        |-- form-g-hardcoded.html
        |-- form-g-mysql.php
    |-- scripts/
        |-- form-c-process.js
        |-- form-d-process.js
        |-- form-e-process.js
        |-- form-f-process.js
        |-- form-g-process.js
    |-- styles/
        |-- form.css    
    |-- form-request-json.php
    |-- form-request-text.php
    |-- hardcoded.html
    |-- index.html
    |-- mysql.php
|-- forms.sql
|-- mysql-credentials.ini.template

Create the forms database:

mysql -u root -p -e "CREATE DATABASE forms";

Import data into the menus and macos tables:

mysql -u root -p forms < /path/to/forms.sql

Rename mysql-credentials.ini.template:
```
mv /path/to/mysql-credentials.ini.template /path/to/mysql-credentials.ini 
```
NOTE: Use cp instead of mv to keep the original file.

Update mysql-credentials.ini with your own MySQL username and password:

; IMPORTANT! This is a template file. Rename it as 'mysql-credentials.ini' and provide the appropriate MySQL username and password. 

; This file is read using "$mysql_credentials = parse_ini_file('../../mysql-credentials.ini');"

[mysql_credentials]
host = 'localhost'
username = '<USERNAME>'
password = '<PASSWORD>'
database = 'forms'
charset = 'utf8'

Form Submission Characteristics

Form Submission (A)

No JavaScript or jQuery.
Form data processed by a PHP script separate to the one that displays the form. Defined by the form's action attribute.

Form Submission (B)

No JavaScript or jQuery.
Form data processed by the same PHP script that displays the form. Defined by the form's action attribute.

Form Submission (C)

Uses a JavaScript XMLHttpRequest object.
Custom function to serialize (URL encode) form data.
Uses the XMLHttpRequest object's onload and onerror event handlers.
Server response is an HTML-formatted text string.

Form Submission (D)

Uses a JavaScript XMLHttpRequest object.
Uses a FormData object bound to the form element.
Uses addEventListeners for load and error instead of an XMLHttpRequest object's onload and onerror event handlers.
Server response is a JSON-encoded string (treated as text).

Form Submission (E)

Uses jQuery's ajax() method
Uses jQuery's serialize() method to URL encode form data
Callbacks are defined using the ajax() method's success and error options
Server response is an HTML-formatted text string.

Form Submission (F)

Uses jQuery's ajax() method
Uses a FormData object bound to the form element
Callbacks are defined using the ajax() method's success and error options
Server response is a JSON-encoded string (treated as a JSON object not text).

Form Submission (G)

Uses jQuery's ajax() method
Uses a FormData object bound to the form element
Callbacks are defined using jQuery's done() and fail() methods
Server response is an HTML-formatted text string.

Form Submission (H)

Uses a JavaScript fetch() method
Uses a FormData object bound to the form element
Callbacks are defined using then() methods
Server response is a JSON-encoded string (treated as a JSON object).

tech-otaku / forms