How do I handle user input using LiveCode Server?
The LiveCode Server product brings our english like language to the server environment. The server engine is a separate build of the LiveCode engine with specific syntax and functionality that makes it suitable for use in command-line contexts and, in particular, as a CGI processor.
This lesson describes how to handle user input in your LiveCode Server scripts using HTML forms.
Create your form
There are several ways for users to pass data to your LiveCode Server scripts. One method is to use input forms.
Input forms are created using the form HTML tag. Say we wanted to create a a simple login form, we could enter the following HTML into our LiveCode Server script:
<h1>Enter your credentials</h1>
<form action="http://www.my-site.com/my_script.lc" method="POST">
<p>Username: <input type="text" name="username" value="" /></p>
<p>Password: <input type="password" name="password" value="" /></p>
<p><input type="submit" value="Login" /></p>
<input type="hidden" name="form_submitted" value="true" />
</form>
The output of such a form will look something like the image above. For more information on HTML forms, visit http://www.w3.org/TR/html4/interact/forms.html
Form action
The first parameter of the form tag is the action. The action of a form is the URL of the script that the form data will be passed to. In our case, it is the location of of LiveCode Server script.
GET or POST
The second parameter of the form tag is the method. The method of a form determines how the data is uploaded to your script. This can either be GET or POST.
Data passed using GET will be included in the URL of the request, as described in the lesson "How do I pass information to LiveCode Server scripts?". You can access data passed using GET using the global array variable $_GET.
Data passed using POST will be included in the body of the request. You can access data passed using POST using the global array variable $_POST. As the data is not included in the URL, POST provides a small amount of visual security.
Traditionally, data passed using GET is used for querying. For example, looking up a specific item in a catalogue by item number. Data passed using post is used for processing. For example, storing in a database.
Form inputs
The body of your form is made up from input tags. Input tags are used fetch data from the user. The "name" parameter defines the name of the key the data will be uploaded into in either the $_POST or $_GET array (depending upon the "method" of your form). The "value" parameter defines any data the input entry should be pre-populated with.
If "type" of the input tag is "text", you will get a standard single line text input box. If the "type" is "password", you will get a password entry box that obfuscates any characters the user types. "Submit" type inputs are used to create buttons. When the user clicks on the submit button, the contents of the form will be uploaded to your script, as defined in the forms "action".
For more details on form types, see http://www.w3.org/TR/html4/interact/forms.html.
Hidden form fields
If the "type" of the input tag is "hidden", then the input field will not be displayed to the user. However, the value of the field will be passed along with the rest of the form contents when submitted.
Hidden fields are useful when you wish to detect if a form has been submitted or preserve information within a form between sessions.
Generate a response
Once the user has completed the form and clicked the submit button, the data entered will be uploaded to your LiveCode Server script. In this script, you will first check to see if the form has been submitted, by checking the contents of the "form_submitted" entry. If so, you will then need to check the contents of "username" and "password" to see if they are valid. This could involve checking the against contents of files, looking up a database, or, as in the example below, checking against hard coded values.
<?lc
if $_POST["form_submitted"] is true then
if $_POST["username"] is "runrev" and $_POST["password"] is "1234" then
put "You have successfully logged in. Welcome to the super secret area."
else
put "Your username and password are incorrect. Please try again."
end if
end if
?>
Jean-Marc
Hi from France.
For a populated with several options SELECT MULTIPLE html input, $_POST["myinput"] only posts the last selected option. How to get (post) ALL the selected options?
Regards from JeanMarc
Amit
Hi,
Can you tell if we can create html forms within livecode? If yes, please describe , how?
Elanor Buchanan
Hi Amit,
Do you mean that you want to display HTML forms within a LiveCode stack? If so you could use a Browser Widget to display the form.
If that is not what you meant please let me know.
Kind regards,
Elanor
Amit
Hi,
Thanks for your reply. I just want to do something like in this youtube link :- https://www.youtube.com/watch?v=xI_4PS_18uM
I want to run an HTML form after submitting it, show a browser window and capture window close event to fire an API, either through javascript or any LiveCode function. That would be great help if you can resolve this.
Elanor Buchanan
Hi Amit
This video is using a CEF browser, since this video was made we have added the Browser Widget which I would recommend using to display your form. You can then set the javascriptHandlers property of the widget, for example so that LiveCode receives a message when the "Sumbit" button is clicked, you can read more about this property in the Dictionary and in this Guide.
https://livecode.com/docs/9-0-0/components/browser-widget/
I hope that helps.
Elanor