Submitting a form using the GET method to PHP

In HTML, to submit a form using the GET method, use the following syntax:

<form name="input" action="mypage.php" method="GET">
   Username: 
   <input type="text" name="user"/> 
   <input type="submit" value="Submit"/>
</form>

The code example above submits the form to the URL in the form's action attribute, and essentially redirects to the linked PHP script.

To run this example, select the file name SubmitUsingGet.mxml and run the application in the sample Flex project.

To submit a form in Flex using the GET method, use the following code:

SubmitUsingGet.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundColor="#ffffff">
   
   <mx:Style source="styles/styles.css" />
   <mx:HRule x="10" y="37" width="90%"/>
   <mx:Text x="10" y="10" text="Submit form using get method" styleName="headerStyle" id="label1"/>
   
   <mx:String id="phpFile">
     http://localhost:8888/php/show_request.php
   </mx:String>
   
   <mx:HTTPService id="form1" url="{phpFile}" method="GET" resultFormat="text" result="{textarea1.text = String(event.result)}">
     <mx:request>
        <username>{username.text}</username>
     </mx:request>
   </mx:HTTPService>
   
   <mx:TextInput id="username" x="10" y="99"/>
   <mx:Button x="178" y="99" label="Submit" click="form1.send()"/>
   <mx:Label x="10" y="129" text="Result"/>
   <mx:Label x="10" y="73" text="Submit form to PHP"/>
   <mx:TextArea x="10" y="146" width="395" height="188" id="textarea1"/>
   <mx:Button x="252" y="99" label="Check if PHP file exists" click="{navigateToURL(new URLRequest(phpFile));}"/>
</mx:Application>

Then you can use the following sample PHP page to return the form information submitted to the PHP page:

show_request.php

<?php
   # Send a response back to the client
   print "You submitted the following form information:\n";
   foreach ($_REQUEST as $k => $v) {
     print " $k = $v\n";
   }
?>

This example uses the HTTPService class. See the following excerpt from the Adobe Flex 3 Language Reference documentation to learn more about this example:

You use the <mx:HTTPService> tag to represent an HTTPService object in an MXML file. When you call the HTTPService object's send() method, it makes an HTTP request to the specified URL, and an HTTP response is returned. Optionally, you can pass parameters to the specified URL. When you do not go through the server-based proxy service, you can use only HTTP GET or POST methods. However, when you set the useProxy property to true and you use the server-based proxy service, you can also use the HTTP HEAD, OPTIONS, TRACE, and DELETE methods.

You can use a Flex HTTPService component in conjunction with PHP and a SQL database management system to display the results of a database query in a Flex application and to insert data into a database. You can call a PHP page with either a GET or POST method to perform a database query. You can then format the query result data in an XML structure and return the XML structure to the Flex application in the HTTP response. When the result has been returned to the Flex application, you can set it to display in one or more user interface controls.

You can also specify the information to send to the request object on the server. The request object is a property of the HTTPService class. Inside the request, specify individual parameters to send to the server. In this case, use the data binding expression shorthand notation to specify a reference to the text input: username. Flex provides three ways to specify data binding: the curly braces ({}) syntax in MXML, the <mx:Binding> tag in MXML, and the BindingUtils methods in ActionScript.

See the following excerpt from the Adobe Flex 3 Online Help regarding binding data:

You can bind a single source property to more than one destination property by using the curly braces ({}) syntax, the <mx:Binding> tag, or the BindingUtils methods in ActionScript. Using the curly braces syntax is the simplest way to pass data between objects in an application. When you use this syntax, you put curly braces ({}) around a binding source as the value of a destination property.

You can use ActionScript 3 expressions in curly braces as well. Remember, you are not limited to sending data from form elements that exist inside a form tag.

In this example, the form submits to a PHP page that iterates through the form values and sends them back to the client. The HTTPService class can receive an HTTP response without reloading the page. The resultFormat contains the value that indicates how you want to deserialize the result returned by the HTTP call. Within the HTTPService tag, you can set the resultFormat data type to text. By default, resultFormat returns an object. By specifying event listener functions in the result and fault events, you can handle the data returned in the response. This example displays the response from the server in a textarea.

Read more about working with forms and data binding in the online documentation:

• Adobe Flex 3 Language Reference: HTTPService class
• Adobe Developer Connection: Flex Quick Start: Handling data, Using data binding

Page 3 of 12

Previous Page

Next Page