Status: Unverified
GOAL:
How to use hidden fields to pass a value within a WebSpeed application page
GOAL:
Sample code using hidden fields
GOAL:
Example integrating client-side JavaScript with server-side SpeedScript
FACT(s) (Environment):
All Supported Operating Systems
Progress 9.x
OpenEdge 10.x
FIX:
The following example demonstrates how a web page can make multiple trips to the WebSpeed server, displaying more information each time to provide hints to the user or narrow down the available options. JavaScript is used to enhance interaction with the client. Hidden fields are used to persist information between round trips to the server.
In this example using the Sports2000 sample database, the user enters a customer name, and the name of that customer's sales rep is displayed to help the user enter comments about their interaction with the sales rep. The customer number is stored in a hidden field so the correct customer record can be found on each trip to the server.
<HTML>
<HEAD>
<TITLE>Sales Rep Comment Form</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="SpeedScript">
/* Variables used to transfer data to and from form fields */
DEFINE VARIABLE cSearchValue AS CHARACTER NO-UNDO.
DEFINE VARIABLE cRepNameValue AS CHARACTER NO-UNDO.
DEFINE VARIABLE cCustNumValue AS CHARACTER NO-UNDO.
DEFINE VARIABLE cCommentValue AS CHARACTER NO-UNDO.
</SCRIPT>
<!-- Customer / sales rep name search form -->
<form method="post" name="searchForm">
Name
<input type="text" name="searchField" id="searchField"
size="27"
value="`html-encode(get-field('searchField'))`"
ondblclick="popFlds()">
(Double-click on your name to see your sales rep)
</form>
<!-- Javascript to add client-side functionality to form submittal -->
<script type=text/javascript>
/* Called when user double-clicks search form. This submits the search
form. The search form returns the sales rep name so the user can see it
before submitting the main comments form. */
function popFlds() {
document.getElementById("searchForm").submit();
}
/* Submit the main comments form to store the comments in the customer record.
On return from the server, display an alert to acknowledge the
submission and clear the comments field. */
function submitComments() {
document.getElementById("commentForm").submit();
window.alert("Thank you for your comment.");
document.getElementById("commentField").value = "";
}
</script>
<SCRIPT LANGUAGE="SpeedScript">
cSearchValue = get-field('searchField':U).
cCommentValue = get-field('commentField':U).
/* If a customer name was submitted, find the sales rep name
and return it to the client. */
IF NOT cSearchValue = '' THEN
DO:
FIND FIRST Customer
WHERE Customer.Name = get-field('searchField':U)
NO-LOCK NO-ERROR.
IF AVAILABLE Customer THEN
DO:
cCustNumValue = STRING(Customer.CustNum).
FIND Salesrep OF Customer
&nbs.p; NO-LOCK NO-ERROR.
IF AVAILABLE Salesrep THEN
cRepNameValue = html-encode(Salesrep.RepName).
END.
END.
/* If a comment was submitted, store it in the customer record. */
IF NOT cCommentValue = '' THEN
DO TRANSACTION:
FIND FIRST Customer
WHERE Customer.CustNum = INTEGER(get-field('custNumField':U))
EXCLUSIVE-LOCK NO-ERROR.
IF AVAILABLE Customer THEN
Customer.Comments = cCommentValue.
END.
</SCRIPT>
<!-- Main comments form -->
<form method="post" name="commentForm"
onSubmit="submitComments()">
<!-- Hidden field stores Customer record key between submits to server -->
<input type="hidden" name="custNumField" id="custNumField"
size="1"
value="`cCustNumValue`">
Sales Rep
<input type="text" name="repNameField" id="repNameField"
size="27"
value="`cRepNameValue`">
<p>Please enter your comments on your interaction with this sales rep</p>
<textarea name="commentField" id="commentField"
cols="40" rows="10">
</textarea>
<input type="submit" name="commentButton" id="commentButton"
value="Submit Comments">
</form>
</BODY>
</HTML>
.