Submit Form with jqxListBox

In this post, we will show you how to get the ListBox’s selected value from a PHP script. The first step is to add the Javascript and CSS files required for displaying ListBox and Button widgets.
<link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
<script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
<script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
The second step is to initialize the jqxListBox widget. The ListBox is bound to MySQL Database using the jqxDataAdapter plug-in. The data will be returned from the server script in JSON format and that’s the reason we set the datatype to “json”. The url is “listboxdata.php”. The datafields array specifies the field names in the data source. The ListBox’s displayMember and valueMember properties should point to valid values from the datafields array. The displayMember specifies the item’s text. Each item has a value as well. The valueMember specifies the item’s value.
<script type="text/javascript">
$(document).ready(function () {
var theme = getTheme();
// prepare the data
var source =
{
datatype: "json",
datafields: [
{ name: 'CompanyName'},
{ name: 'ContactName'},
{ name: 'ContactTitle'},
{ name: 'Address'},
{ name: 'City'},
],
url: 'listboxdata.php'
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#listbox").jqxListBox(
{
source: dataAdapter,
theme: theme,
width: 300,
height: 300,
selectedIndex: 0,
displayMember: 'CompanyName',
valueMember: 'ContactName'
});
$('#sendButton').jqxButton({ width: 70, theme: theme });
});
</script>
The third step is to add the HTML markup. It is important to set the “name” attribute of the jqxListBox’s DIV tag. We will use the “name” to get the selected value in the server script.
   <form class="form" id="form" target="form-iframe"  method="post" action="list.php" style="font-size: 13px; font-family: Verdana; width: 650px;">
<div>
<div style="float: left;" name="list" id="listbox"></div>
<div style="margin-left: 20px; float: left;" id="eventLog"></div>
</div>
<div style="clear: both;"/>
<input style="margin-top: 10px;" type="submit" value="Submit" id="sendButton" />
</form>
The widget is bound to MySQL Database and the server script which returns the displayed JSON data is shown below:
<!--listboxdata.php
#Include the connect.php file
include('connect.php');
#Connect to the database
//connection String
$connect = mysql_connect($hostname, $username, $password)
or die('Could not connect: ' . mysql_error());
//select database
mysql_select_db($database, $connect);
//Select The database
$bool = mysql_select_db($database, $connect);
if ($bool === False){
print "can't find $database";
}
// get data and store in a json array
$query = "SELECT * FROM Customers";
$from = 0;
$to = 30;
$query .= " LIMIT ".$from.",".$to;
$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$customers[] = array(
'CompanyName' => $row['CompanyName'],
'ContactName' => $row['ContactName'],
'ContactTitle' => $row['ContactTitle'],
'Address' => $row['Address'],
'City' => $row['City']
);
}
echo json_encode($customers);
In this help topic: bind-jquery-listbox-to-mysql-database-using-php.htm is illustrated how to set up and bind ListBox to MySQL Database. When the Submit button is clicked, the Form sends the data to list.php. In the list.php, we can get the selected ListBox’s value by doing the following:
echo $_POST["list"]; 
In the above code, “list” represents the value that we set to the ListBox DIV tag’s “name” attribute.

About admin


This entry was posted in JavaScript, jQuery, jqxListBox and tagged , , , , , , , , , , , , , , , , , . Bookmark the permalink.



Leave a Reply