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.