document.getElementById( ).value help in ajax autosuggest URGENT

[gelovina33]

<div class="tab-content" id="tab3"> <!-- New Case -->

<div>
<form method="get" action="">

<small style="float:right">Hidden ID Field: <input type="text" id="company_id" value="" style="font-size: 10px; width: 20px;" disabled="disabled" /></small>
<label for="testinput">Company</label>
<input style="width: 200px" class="text-input small-input" type="text" id="company_input" value="" />

<small style="float:right">Hidden ID Field: <input type="text" id="office_id" value="" style="font-size: 10px; width: 20px;" disabled="disabled" /></small>
<label for="testinput">Office</label>
<input style="width: 200px" class="text-input small-input" type="text" id="office_input" value="" />

<small style="float:right">Hidden ID Field: <input type="text" id="contact_id" value="" style="font-size: 10px; width: 20px;" disabled="disabled" /></small>
<label for="testinput">Contact Person</label>
<input style="width: 200px" class="text-input small-input" type="text" id="contact_input" value="" />

<input class="button" type="submit" value="Submit" />
</form>
</div>

<script type="text/javascript">
var company_list = {
script:"all-companies.php?json=true&",
varname:"input",
json:true,
callback: function (obj) { document.getElementById('company_id').value = obj.id; }
};
var auto_company = new AutoSuggest('company_input', company_list);

var office_list = {
script:"all-offices.php?json=true&id="+document.getElementById('company_id').val()+"&",
varname:"input",
json:true,
callback: function (obj) { document.getElementById('office_id').value = obj.id; }
};


var auto_office = new AutoSuggest('office_input', office_list);
var auto_contact = new AutoSuggest('contact_input', contact_list);

var contact_list = {
script:"all-contacts.php?json=true&id="+document.getElementById('office_id').value+"&",
varname:"input",
json:true,
callback: function (obj) { document.getElementById('contact_id').value = obj.id; }
};


</script>

---------------------------------------------------------------------------------------------------------------------------------

<?php

$offices = array(

array("Agapitaaa","Crossiiing","SU"),
array("Crossing","Olivarez"),
array("Agapita","Grove","Robinsons")


);

$input = strtolower( $_GET['input'] );
$len = strlen($input);


$aResults = array();

if ($len)
{
for ($i=0;$i<count($offices[$_REQUEST['id']]);$i++)
{
if (strtolower(substr(utf8_decode($offices[$_REQUEST['id']][$i]),0,$len)) == $input)
$aResults[] = array( "id"=>$i ,"value"=>htmlspecialchars($offices[$_REQUEST['id']][$i]));
}
}

header("Content-Type: application/json");

echo "{\"results\": [";
$arr = array();
for ($i=0;$i<count($aResults);$i++)
{
$arr[] = "{\"id\": \"".$aResults[$i]['id']."\", \"value\": \"".$aResults[$i]['value']."\", \"info\": \"\"}";
}
echo implode(", ", $arr);
echo "]}";

?>

------------------------------------------------------------------------------------------------------------------------

I got the core of the code from:

http://www.brandspankingnew.net/arch...-complete.html

http://www.brandspankingnew.net/spec...ocomplete.html


it should update the office autosuggest when a company is selected. it works perfectly when i manually enter a company number. but the document.getElementById('company_id').value isn't working and the page is useless if its just static. i'm a noob javascript programmer. someone please help me. thanks in advance.

[Jona]

Hi,

There is no val() method for a form element. That method is actually part of jQuery itself, so you must use a jQuery object to use it.

The solution is probably as simple as replacing all of your document.getElementById() statements with the appropriate $() statements.

For example:

var contact_list = {
 script:"all-contacts.php?json=true&id="+$('office_id').val()+"&",
 varname:"input",
 json:true,
 callback: function (obj) { $('contact_id').val(obj.id); }
};

[gelovina33]

oh i copied the old file. i used something like this:

script: function (input) { return "test.php?input="+input+"&testid="+document.getElementById('testid').value; }

but it gave me an Ajax error: 404. the same thing happens when i use your method. does this mean that it can't find something?

[gelovina33]

i was able to fix the 404 problem. but its still not working. same thing. if i replace the $('company_id').val() with a number, say 2, the autosuggest works. but its still not dynamic huhuhu. help pleeaase.

[Jona]

Write some kind of debugging method so that you can see what the result of the $('company_id').val() function is. The result will help you decide where the problem is.