Estoy aprendiendo a usar selects anidados, y usando esto en uno de mis proyectos, me da el siguiente error.
Estoy registrando un usuario en mi base de datos.
Mi usuario tiene un campo Provincia y otro municipio, donde uso mis select anidados. Estoy usando la librería select2 para llevar a cabo esto.
Funciona todo perfecto, pero cuando presiono el submit de mi form, y este envia mis datos. A mi vista no llega el contenido de mi select anidado. Me llega vacio y no tengo idea del porque
Este es el form que recibo en mi vista (Select Vacio):
<tr><th><label for="id_municipio">Municipio:</label></th><td><ul class="errorlist"><li>Escoja una opción válida. Esa opción no está entre las disponibles.</li></ul>
<select name="municipio" class="form-control" required id="id_municipio">
<option value="">---------</option>
</select></td></tr>
Este es el codigo que estoy usando para capturar mis datos en el select municipio de forma dinamica de acuerdo a la provincia que seleccione el usuario:
$("Select[name='municipio']").select2({
language:'es',
ajax: {
url: window.location.pathname,
type: "POST",
data: function (params) {
var queryParameters = {
term: params.term,
'id':id,
'action':'autocomplete',
}
return queryParameters;
},
processResults: function (data) {
return {results: data};
},
},
placeholder: 'Municipio',
minimumInputLength: 2,
})
Envio los datos del form a mi vista usando ajax con la siguiente funcion:
$("form").on("submit",function(e){
e.preventDefault();
var parametros = new FormData(this)
parametros.append('action','registrar')
$.ajax({
url:url,
type:"POST",
data:parametros,
dataType:'json',
processData: false,
contentType: false
}).done(function(data) {
if(!data.hasOwnProperty('error')){
callback();
return false;
}
else{
MensajeError(data.error);
}
})
})
form
<form>
{% csrf_token %}
<div class="row my-4 justify-content-center">
<div class="col-md-3 ml-3">{{form.provincia}} </div>
<div class="col-md-3 ml-3">{{form.municipio}} </div>
</div>
<div class="row">
<div class="col-8">
<div class="icheck-primary">
<a href="{% url 'Login:login'%}">Ya tengo una cuenta (Iniciar Sesion)</a>
</div>
</div>
<div class="col-4">
<button type="submit" class="btn btn-outline-primary btn-block">Register</button>
</div>
</div>
</form>