Mississauga Coding A meetup group

HTML/CSS/JS - Forms

20 Oct 2015

Whether it’s a log-in screen, online questionnaire or contact page, forms are a very common occurrence on the worldwide web.

This week we’ll have a look at coding a simple form, submitting it, performing some basic input validation, and saving the data entered into a database.

To make the excercise useful, the plan is to cover both the front-end and back-end aspects of this topic. By back-end we mean the part where we actually send the input data out to the server, and save that data in the database.

In order to be able to follow along and get the most out of this session, you may want to install something like WampServer on your laptop ahead of the session. This gives you the server and database pieces of the puzzle.

Alternatively, and probably much easier, you may want to sign up free onto Cloud9 as suggested in this blog post from some weeks ago. More details as to what Cloud9 is (and is not) can be found here and officially here.

This is the complete code example. Please post any questions or difficulties in the comments section below.

###index.html

<!doctype html>
<html>
  <head>
    <title>Forms</title>
    <link rel="stylesheet" href="./public/css/style.css" type="text/css" />
  </head>
  <body>
    
    <div id="main">
      
      <form id="myform" method="post">
        
        Full Name:<br/>
        <input id="fullname" type="text" name="fullname" />
        
        <br/><br/>
        <input type="button" id="btnSave" value="Save"/>
        
      </form>
      
    </div>
    
    <br/><br/>
    <div id="msg"></div>
    
    
    <script type="text/javascript" src="./public/js/script.js"></script>
  </body>
</html>

###script.js

var btn = document.getElementById('btnSave');
var fld = document.getElementById('fullname');
var msg = document.getElementById('msg');
var frm = document.getElementById('myform');

btn.addEventListener('click', submitForm);
fld.focus();

function submitForm() {
    
    msg.innerHTML = '';  // clear any previous messages
    
    if ( fld.value==='' ) {
        
        msg.innerHTML = 'Please key in a name.';
        fld.focus();  // places cursor in the form field
        
    } else {
        
        // prepare form data
        var data = new FormData(frm);
        
        // send data to server via AJAX
        // create
        var xhr = new XMLHttpRequest();
        
        // open
        xhr.open('post', 'backend/savedata.php', true);
        
        // send data
        xhr.send(data);
        
        // a better way would be to add an event listener 
        // 'readystatechange' on xhr, but for now...
        msg.innerHTML = 'Record has been saved';
        frm.reset();  // clears the form for next input
        fld.focus();
    }
    
}

###style.css

div#msg {
    color:red;
}

And here is the back-end SQL code for creating the database table, and the PHP code for saving the form data to that table:

###SQL to create database table

CREATE TABLE IF NOT EXISTS `person` (
  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `fullname` varchar(50) DEFAULT NULL,
  `gender` char(1) DEFAULT NULL,
  `city` varchar(50) DEFAULT NULL,
  `language` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=1 ;

###backend/savedata.php

<?php

// fetch POSTed data
// possibly fetch other fields here
$name = filter_input(INPUT_POST, 'fullname');

// connect to the database
// ** replace connection parms according to your set-up **
$dbConn = mysqli_connect("127.0.0.1", "user", "pass", "dbname", 3306);

// prepare insert sql statement 
// possibly add other fields to insert and bind
$sqlInsert = "INSERT INTO `person` (`fullname`) VALUES (?)";
$stmt = mysqli_prepare($dbConn, $sqlInsert);
mysqli_stmt_bind_param($stmt, 's', $name);

// execute the insert sql statement 
mysqli_stmt_execute($stmt);

// close statement and connection 
mysqli_stmt_close($stmt);
mysqli_close($dbConn);

exit();

##References & Resources

Related Posts