www.webdeveloper.com
Results 1 to 5 of 5

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

  1. #1
    Join Date
    Apr 2010
    Posts
    3

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

    <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.

  2. #2
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    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:


    Code:
    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); }
    };
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

  3. #3
    Join Date
    Apr 2010
    Posts
    3
    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?

  4. #4
    Join Date
    Apr 2010
    Posts
    3
    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.

  5. #5
    Join Date
    Jan 2003
    Location
    Texas
    Posts
    10,413
    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.
    Visit Slightly Remarkable to see my portfolio, resumé, and consulting rates.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles