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); }
    };

  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.

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