Step 6 - Capturing HTML Form Data

Ok, now that we know how to look at data, let's capture it too. As mentioned in Step 4, you can POST data from an HTML form and capture the data using the Request.Form input.

To demonstrate let's set up a very simple HTML customer entry form and submit that form to save a new record. Let's start by creating the HTML page for entering a few fields (there are couple of other changes in here such as usage of an image and a style sheet to make the display a little nicer:

<html>
<head>
    <title>Customer display</title>
    <link rel="stylesheet" type="text/css" href="westwind.css">
</head>
<body style="font: normal normal 10pt Verdana" topmargin="0" leftmargin="0">
<h2>
    <img border="0" src="../images/newwave.jpg" align="left" width="158" height="864"><br>
    <font color="#800000">Customer Detail</font></h2>
<hr>
<form method="POST" action="AddCustomer.wp">
<input type="Submit" value="Save Customer" name="btnSubmit"><p>
<table bgcolor="#EEEEEE" cellpadding="5" border="1" 
       style="border: solid 2px Darkblue;">
    <tr>
        <td valign="TOP" class="blockheader">
            <b>Company:</b></td>
        <td>
            <input type="text" name="Company" style="width: 300px"></td>
    </tr>
    <tr>
        <td valign="TOP" class="blockheader">
            <b>Name:</b></td>
        <td>
            <input type="text" name="Careof" style="width: 300px"></td>
    </tr>
    <tr>
        <td valign="TOP" class="blockheader">
            <b>Address:</b></td>
        <td>
            <textarea name="Addres" style="width: 300px;height:80px"></textarea></td>
    </tr>
    <tr>
        <td valign="TOP" class="blockheader">
            <b>Phone:</b></td>
        <td>
            <input type="text" name="phone" style="width: 300px"></td>
    </tr>
</table>
</form>
<hr>
</body>
</html>

which looks like this:

As you can see in the example above the HTML form consists of the <form> tag which tells the form which link to run when the user submits the form and a bunch of <INPUT> and <TEXTAREA> fields that make up the data fields that the user types data into. The data is POSTed to the server when the user clicks on the Add button.

Capturing the input

The ACTION in the <form> tag determines which link receives the request. On the server side we can now set up a request that handles the input from this form and can save the data to the database.

*********************************************************************
FUNCTION AddCustomer
********************

lcCompany = Request.Form("company")
lcCareof = Request.Form("careof")
lcPhone = Request.Form("phone")

IF EMPTY(lcCompany) or EMPTY(lcPhone)
   THIS.ErrorMsg("Incomplete input","Company name and phone number are required.")
   RETURN
ENDIF

*** you'd have to do dupe checking here...

INSERT INTO TT_CUST (custno,company, careof, phone) VALUES ;
    (SYS(2015),lcCompany,lcCareOf,lcPhone)

THIS.StandardPage("New Customer Saved",;
   "The record has been stored into the database.")

ENDFUNC

To retrieve values submitted you simply use the Request.Form() method with the name of the form variable as defined on the HTML page to retrieve the content. In this example, the HTML Form field names happen to match the database field names (a good idea if you have control over this), but the field name is whatever the NAME= tag of the INPUT fields on the HTML form are set to.

Tip:
To quickly generate an HTML for all the fields in a VFP table, you can use the wwShowCursor object's EditRecord method as follows:
>USE TT_CUST && Table to work with
SET FIELDS TO Custno,Company,CareOf, Phone && Limit fields

oSC = CREATE("wwShowCursor")
oSC.EditRecord()      && Gen the HTML

SET FIELDS TO

Response.Write("<form action='AddCustomer.wp' method='POST'>")

*** Display the form - Getoutput returns HTML as a string
ShowHTML( oSC.GetOutput() )

Response.Write("</form>")
You still have to add the <form> wrapper and any submit buttons but the hard part is done. The above will generate the data from the current record. To get a blank form jump to the end of the file with LOCATE FOR .F..

This is obviously an overly simple example that doesn't take into account error checking or even providing all the fields for editing here, but it gives you an idea of how forms and user input are handled. You can obviously use HTML form fields for many more things such as asking the user for query parameters or other information that you can then use in your code to perform business operations on. Request.Form() provides you with user input just as a VFP form field would in a standalone application.