Introduction

Most of us know that Form processing is basically adding the data in the respective form and getting the output of it through URL or using this data to store information in a Database. Let us see how this form processing works!!

On Client Side

When the end-user inputs the data in the form and clicks the submit button the form data is sent with the HTTP POST method, this data onsubmit function catches the data and with the help of the xhr.send request sends the data to the respective URL.

<form id="x-login-form">
    <div class="form-group">
        <label for="xuser">Username</label>
        <input type="text" name="iuser" class="form-control" />
    </div>
    <div class="form-group">     
        <label for="xpass">Password</label>
        <input type="password" name="xpass" class="form-control" />
    </div>  
    <input type="submit" class="btn btn-danger" value="Submit" class="form-control" />
</form>

//get the form from DOM (Document object model) 
    var form = document.getElementById('x-login-form');
    form.onsubmit = function(event){
        var xhr = new XMLHttpRequest();
        var data = new FormData(form);
        //open the request
        xhr.open('POST','https://api.metamug.com/tests/v1.0/form')
        //send the form data
        xhr.send(data);
        //Dont submit the form.
        return false; 
    }

On the Network

Metamug Server Side

On Server Side

<?xml version="1.0" encoding="UTF-8" ?>
<Resource xmlns="http://xml.metamug.net/resource/1.0" v="1.0">
    <Request method="POST">
        <Desc> Example Resource </Desc>
        <Query> 
            INSERT INTO USER (user, pass, comment) 
            values ($iuser, $xpass, $comment)
        </Query>
    </Request>
</Resource>

In the Database

Metamug Database