I have the following piece of code
$("#autocomplete").autocomplete({
source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
close: function (event, ui) {
alert($(this).val());
}
});
<label for="autocomplete">Select a programming language:</label>
<input id="autocomplete">
how do I send the values I get as a GET function ? I read the Ajax GET function but I am not sure how to encode the data I get from the form element
you can use Serialize
it will encode a set of form elements as a string for submission.
http://api.jquery.com/serialize/
and this how you can make it
<form id="myform">
<label for="autocomplete">Select a programming language:</label>
<input id="autocomplete" name="autocomplete">
<input type="button" id="btnSubmit" value="send">
</form>
<script>
$(document).ready(function(){
$("btnSubmit").click(function(){
$.ajax({'url':'myurlforajaxrequest',
'data': $("#myform").serialize(),
'type':'get'
});
});
});
</script>
It depends on what the script you're sending it to expects, but $.get() accepts more than one format for the data. It can be a simple string or an object.
For example, if your script expects a programminglanguage variable in the request, your close handler might look like this
$("#autocomplete").autocomplete({
source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
close: function (event, ui) {
var jqxhr = $.get("/my/script.php", "programminglanguage=" + $(this).val());
// Alternatively:
//var jqxhr = $(.get("/my/script.php", {"programminglanguage": $(this).val()});
}
});
The $.get() function has a success handler argument that you might want to use and the properties of the jqxhr object that's returned is documented on the jQuery.ajax() page here.
jQuery $.ajax default contentType is application/x-www-form-urlencoded which mean jQuery will encode the content. However, since you have specify different contentType, the data is not encoded thus you have to do your own encoding. (Jquery ajax encoding data)
Try encodeURIComponent. (URL Encode a string in jQuery for an AJAX request)
Encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two "surrogate" characters).
Example:
var encoded = encodeURIComponent(str);
Complete Solution:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"/>
<script>
$(document).ready(function() {
$("#autocomplete").autocomplete({
source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
close: function (event, ui) {
$.ajax({
url: 'yourAjaxRequestHandleFile.php',
data: 'q=' + encodeURIComponent($('#autocomplete').val()),
type: 'get',
success: function (ajxResponse) {
alert(ajxResponse);
}
});
}
});
});
</script>
</head>
<body>
<label for="autocomplete">Select a programming language:</label>
<input id="autocomplete">
</body>
</html>
// Here is PHP Code
<?php
// Get Send Ajax Data
$q = $_GET['q'];
// Show Ajax Data and return to Ajax
echo "You submitted $q ";
?>
