Odoo Help


Javascript To Auto Fill City and State from Zip input, Need help to integrate.

John Baldwin
on 1/6/15, 11:56 PM 7,114 views

I have the following code that uses a json call to fetch autofill information.

        $(function() {
            $(document).ready( function() 
            // OnKeyDown Function
            $("#zip").keyup(function() {
                var zip_in = $(this);
                var zip_box = $('#zipbox');
                if (zip_in.val().length<5)
                    zip_box.removeClass('error success');
                else if ( zip_in.val().length>5)
                else if ((zip_in.val().length == 5) ) 
                    // Make HTTP Request
                        url: "http://api.zippopotam.us/us/" + zip_in.val(),
                        cache: false,
                        dataType: "json",
                        type: "GET",
                      success: function(result, success) {
                            // Make the city and state boxes visible
                            // US Zip Code Records Officially Map to only 1 Primary Location
                            places = result['places'][0];
                            $("#city").val(places['place name']);
                        error: function(result, success) {

I have read the docs until my eyes bleed and still have no clue on how to integrate this. I know it has to go into a .js file in static>src>js, but I'm not sure how to call it in base.res.partner form and even more troubling is that the rendered input fields don't seem to have an 'id' to attach too. Somebody that know what they are doing could do this in a few minutes I'm sure... SO I'm asking for help.

On 1/10/15, 1:59 AM

There are two things (at least) that you will need to do:

  1. Ensure your .js code is being includes in the page.
  2. You definitely have to have an 'id' to attach to, OR you will need to change the jquery selector, the $("whatever")..., to reference the fields for city state and zip in some fashion (jquery gives you many option to that which don't required the 'id').

More details:

1. For the first part, you need to have an xml file that is part of your module.  The xml will have some lines similar to this which is what cause your js file to be referenced in the template:

        <template id="my_new_addition" name="somename" inherit_id="web.partner">
            <xpath expr="." position="inside">
                <script type="text/javascript" src="/oepetstore/static/src/js/petstore.js"/>
This is covered in the example project in the odoo howtos on web page additons:


Note: You will need to check that the above .js is include in your page by inspecting the page using the dev tools of your browser.

2. As you noted, the $('#citybox') selector is not going to work if you don't have the id='citybox' on the elemnets in your html page.  You will need to override those fields on your html page to add the "id=" to each part. Looks like the above code wants "citybox", "city" and "statebox" and "state" and it wants some classes called "error"and "success" so I hope you are taking that all into account to be included. If these are styles that you need to supply then you'll ned to add a  <link rel="stylesheet" ....> next to the <script...> tag above.  

Definitely see the above howtos page and download the sample to see get a more thorough example of this.

Hope this helps. Will be good to see the auto fill based on zip entry working.


About This Community

This platform is for beginners and experts willing to share their Odoo knowledge. It's not a forum to discuss ideas, but a knowledge base of questions and their answers.


Odoo Training Center

Access to our E-learning platform and experience all Odoo Apps through learning videos, exercises and Quizz.

Test it now

Question tools

2 follower(s)


Asked: 1/6/15, 11:56 PM
Seen: 7114 times
Last updated: 3/16/15, 8:10 AM