1
votes

I have a form in Odoo website which has country and state selection fields. This form is populated from a controller where I pass a recordset of all the states and countries as values in a dict with states and countries as keys. Now for the selection field, it is looped using t-foreach through states to provide the option and values. Now upon selection of country, I need to be able to filter out the states of that particular country. Is this possible and if yes how? Here is some of the code which I have attempted: The following is the controller which initially loads the form and the second method is to filter out the states

@http.route('/admission_applications', type='http', auth="public", website=True)
def application_form(self):
    cr, uid, context, registry = request.cr, request.uid, request.context, request.registry
    classes=[('lkg',"LKG"),('ukg',"UKG"),('1', "1st"), ('2', "2nd"),('3', "3rd"),('4', "4th"),('5', "5th"),('6', "6th"),('7', "7th"),('8', "8th"),('9', "9th"),('10', "10th"),('11', "11th"),('12', "12th")]
    gender=[('male', "Male"), ('female', "Female")]
    orm_country = http.request.env['res.country']
    state_orm = http.request.env['res.country.state']
    countries = orm_country.search([])
    #countries = orm_country.browse(cr, SUPERUSER_ID, country_ids, context)
    states = state_orm.search([])
    #states = state_orm.browse(cr, SUPERUSER_ID, states_ids, context)
    return request.render("website_admission_application.admission_form", {'classes':classes, 'gender':gender, 'countries':countries, 'states':states})



@http.route('/action_get_states/<country_id>',type='http', auth="public", website=True)
def states_listing(self,country_id):
    states_info=[]     
    logging.error(country_id)
    states=http.request.env['res.country.state'].search([('country_id.id','=',country_id)])
    for state in states:
        states_info.append({'id':state.id, 'name':state.name})


    logging.error(states_info)      
    return states_info 

The next is the template related code:

<div t-attf-class="form-group form-field o_website_form_required_custom margin-0" t-if="countries">
    <div class="col-sm-12 col-md-6">
    <label class="control-label" for="country_id">Country</label>
    <select name="country_id" id="country_id" class="form-control" onchange="countryselection()" required="">
         <option value="">Country...</option>
         <t t-foreach="countries" t-as="country">
             <option t-att-value="country.id"><t t-esc="country.name"/></option>
         </t>
    </select>
    </div>
    <div class="col-sm-12 col-md-6">
        <label class="control-label" for="state_id">State</label>
         <select name="state_id" id="state_id" class="form-control" required="">
             <option value="">State...</option>
             <t t-foreach="states" t-as="state">
                 <option t-att-value="state.id"><t t-esc="state.name"/></option>
             </t>
         </select>
     </div> 
 </div>

the js call to the controller method to filter states is something like this:

function countryselection() {
    alert("hai");
    var country = document.getElementById('country_id').value;
    alert(country);
    $.ajax({
        type: "GET",
        url: "/action_get_states/"+country,
        success: function(data) {
            $("states").html(data);
        }
    });     
}

I know this isn't the right way, but I am not sure of how I can return the recordset to the states that I have already loaded initially with the form.

1

1 Answers

1
votes
//This is just an example which I used on Odoo website.
// Just make your proper changes by changing field names.    
$(document).ready(function () {

        $('select[name=country_id]').change(function () {
        $('#state_id option').remove();
        var states = new Model('res.country.state').call('search_read',[[['country_id', '=', parseInt($('select[name=country_id]').val())]]]).then(function(result){
        for (var i=0; i<result.length; i++){
            $('#state_id').append($('<option>',
                 {
                    value: result[i].id,
                    text : result[i].name
                 }));
        }
        })

        });