I have an autocomplete node reference field called Organization (essentially the Company Name). It references all the company records my client has already set up in his drupal 5.x database. It looks up node title where node type is set to "organization" and works great. This field is the first field presented when my client creates a new (content-type New Customer) Contact record (does not use the default drupal "contact" thing).

Ok, so the field on this contact form is a cck node reference field with auto-complete behaviour.
Lower down in this being-filled-out-contact -form are empty fields for Organization Address, City, State, and Zip, etc...
My customer has asked me to get those fields to auto-populate once a company name has been chosen from the Organization auto-complete node reference field above.

So I envisioned that for that field's input tag, that I would need to create an attribute of that input tag that would run a JavaScript during an onChange or something like that. To that end, I successfully created, out in straight non-drupal html a working example of this lookup using JavaScript and now I am challenged to integrate it INTO drupal so it works.

I'm stumped.

The name of the field on the input form as viewed in source code looks like this:

<form action="/node/add/data-entry-1"  accept-charset="UTF-8" method="post" id="node-form" enctype="multipart/form-data">
<div class="form-item">
 <label for="edit-field-org-node-reference-0-node-name">Organization: </label>
 <input type="text" maxlength="128" name="field_org_node_reference[0][node_name]" id="edit-field-org-node-reference-0-node-name"  size="60" value="" class="form-text form-autocomplete" />
</div>
<input class="autocomplete" type="hidden" id="edit-field-org-node-reference-0-node-name-autocomplete" value="http://mywebsite.com/nodereference/autocomplete/field_org_node_reference" disabled="disabled" />
</form>

My working example of the code that auto-completes looks like this:

<html>
<head>
<script type="text/javascript">
var xmlHttp=null;
 
function lookupinfo(str)
{
        //alert ("lookupinfo is running");
        xmlHttp=GetXmlHttpObject();
        if (xmlHttp==null)
        {
                alert ("Your browser does not support AJAX!");
        return;
        }
        var url="getContact.php";
        url=url+"?org="+encodeURIComponent(str);
        url=url+"&sid="+Math.random();
        xmlHttp.onreadystatechange=updateInfo;
        xmlHttp.open("GET",url,true);
        xmlHttp.send(null);
}
 
function updateInfo() 
{ 
        //alert ("updateInfo is running");
        if (xmlHttp.readyState==4)
        {
                //xml: name of the nodes in the xml file
                //html: ids of the corresponding fields in the html form
                var fields=     {"html":"address,city,state,zip"
                                        ,"xml":"address,city,state,zip"};
                                        
                fields.xml=fields.xml.split(",");
                fields.html=fields.html.split(",");
                var r = xmlHttp.responseXML.documentElement.getElementsByTagName("contact");
                if(r.length)
                {
                        for( var i in fields.html)
                        {
                                document.getElementById(fields.html[i]).value = r[0].getElementsByTagName(fields.xml[i])[0].firstChild.nodeValue;
                        }
                }
        }
}
 
function GetXmlHttpObject()
{
        var xmlHttp=null;
        try
        {
                // Firefox, Opera 8.0+, Safari
                xmlHttp=new XMLHttpRequest();
        }
        catch (e)
        {
                // Internet Explorer
                try
                {
                        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                }
                catch (e)
                {
                        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
        }
return xmlHttp;
}
</script>
</head>
 
<body>
 
<form>
        <div>Org <input type="text" name="field_contact_organization" onChange="lookupinfo(this.value)"/></div>
        <div>address <input type="text" name="address" id="address" value=""/></div>
        <div>City <input type="text" name="city" id="city" value=""/></div>

        <div>state <input type="text" name="state" id="state" value=""/></div>
        <div>zip <input type="text" name="zip" id="zip" value=""/></div>
</form>
</body>
</html>

it calls the file getContact.php that is essentially a php page the queries the various tables to get the values to put into the correct fields on the form. This works fine in html and using that php page.

I found this post here:
http://drupal.org/node/280408
where quicksketch seems to describe a possible almost solution, but I cannot figure out how to implement his solution on a NAMED/specific CCK node reference field.

I THINK my correct syntax would be something like:

$('#field_org_node_reference[0][node_name]').change(lookupinfo(this.value));

1) Is my approach at all correct so far?
2) Is the syntax of my code injection correct? Will it work as it is?
3) Where on Earth (ok.... where in drupal 5.12...) would I inject this code to see it effects the field on the form? Clueless after 2 weeks of searching here....
4) Off-topic question.... Does it appear that I will be able to add my head section JavaScript function definitions to a jQuery.js file somewhere? Any idea which file?

This is a hot feature to have if it works and I am excited it was asked of me so I can give something this valuable back to the drupal community. But for now I am plainly stuck and way over budget for the time it has taken me to solve this. Please help and provide me direction if you can.

Gratefully,
Ian

Comments

karens’s picture

karens commented
Status: Active » Closed (won't fix)

Closing old issues. None of us is using the D5 version any more, so hard to provide any support. Sorry.