Grab Value of Second Term using jQuery UI Autocomplete - php

Question

Thanks for the response, #ManselUK
Fixed this part with finding values(below)
But, when I SELECT a value, it doesnt set the value of the hidden element, why not?
I'm getting error: Uncaught TypeError: Cannot set property 'value' of null when I select a value from autocomplete..
Php code which is called upon entering 5 characters:
try{
$occupation = mysql_real_escape_string($_GET['term2']); //////
echo 'term 2 '. $occupation;
///////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////
$dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
$sth = $dbh->prepare(
'SELECT occupID, occupVal From Occupation WHERE occupVal = ?');
$sth->bindParam(1, $occupation);
$sth->execute();
$jsonArray = array();
while ($result = $sth->fetch(PDO::FETCH_ASSOC)) {
$jsonArray[] = array(
'label' => $result['occupVal'],
'value' => $result['occupVal']."|".$result['occupID']);
}
print json_encode($jsonArray); // json encode that array
} // try
the catch{} block of code, will send errors to a file, but that file has no errors in it.
The HTML Form Input:
<label for="occup">What is your occupation? <br /></label>
<div class="ui-widget">
<input id="occup" type="text" name="term2" value="e.g. Carpenter, Developer, etc" onFocus="clearText(this)" /><br />
<input type="hidden" id="actualOccup" name="actualOccupval" value="" />
The JS that is called upon entering something:
<script type="text/javascript">
$(document).ready(function()
{
// Zipcode Field
$('input#zip').autocomplete({
dataType: "json",
source: "../src/php/registration/getFanLoc.php",
minLength: 4,
select: function(event, args){
event.preventDefault();
var joinedValues = args.item.value;
var id = joinedValues.split("|")[0];
var cityAndState= joinedValues.split("|")[1];
document.getElementById('actualZip').value = cityAndState ;
document.getElementById('zip').value = id;
}
});
// Occupation Field
$('input#occup').autocomplete({
source: function(request, response) {
$.getJSON("../src/php/registration/getFanOccupation.php", { term2: request.term }, response);
},
minLength: 5,
select: function(event, args){
event.preventDefault();
var joinedValues = args.item.value;
var id = joinedValues.split("|")[0];
var occupValAndId= joinedValues.split("|")[1];
$('#actualOccupval').val(occupValAndId);
$('#occup').val(id);
}
});
});
</script>
I've tried debugging:
- Check error log for this file. (no errors)
- Check the SELECT query , the value for occupVal in database is a VARCHAR, in SQL the value is found by doing occupVal = 'some val here'; does jQuery need these quotes?
- if I access getFanOccupation.php?term2=Computer Programmer directly it outputs: term 2 Computer Programmer[{"label":"Computer Programmer","value":"Computer Programmer|183"}]
- Which is RIGHT, the problem is if I get Computer Programmer value and paste directly in input, or even start to write it, it
Fixed JS: - this code works, was select wrong ID for occupation, that's why it wasn't showing the hidden forms field value
$(document).ready(function()
{
// Zipcode Field
$('input#zip').autocomplete({
dataType: "json",
source: "file1.php",
minLength: 4,
select: function(event, args){
event.preventDefault();
var joinedValues = args.item.value;
var id = joinedValues.split("|")[0];
var cityAndState= joinedValues.split("|")[1];
document.getElementById('actualZip').value = cityAndState ;
document.getElementById('zip').value = id;
}
});
// Occupation Field
$('input#occup').autocomplete({
source: function(request, response) {
$.getJSON("file.php", { term2: request.term }, response);
},
minLength: 5,
select: function(event, args){
event.preventDefault();
var joinedValues = args.item.value;
var id = joinedValues.split("|")[0];
var occupValAndId= joinedValues.split("|")[1];
$('#actualOccup').val(occupValAndId);
$('#occup').val(id);
}
});
});

Answer 1

Use this :
source: function(request, response) {
$.getJSON("../src/php/registration/getFanOccupation.php", { term2: request.term }, response);
}
on the second autocomplete. Docs for $.getJSON() here
From the docs :
A request object, with a single property called "term", which refers
to the value currently in the text input. For example, when the user
entered "new yo" in a city field, the Autocomplete term will equal
"new yo".
Full code :
$('input#occup').autocomplete({
source: function(request, response) {
$.getJSON("../src/php/registration/getFanOccupation.php", { term2: request.term }, response);
},
minLength: 4,
select: function(event, args){
event.preventDefault();
var joinedValues = args.item.value;
var id = joinedValues.split("|")[0];
var occupValAndId= joinedValues.split("|")[1];
$('#actualOccupval').val(occupValAndId);
$('#occup').val(id);
}
});
Note also changed document.getElementById('blah').value = to $('#blah').val() as your already using jQuery ... docs for the val() method here