Tengo un botón en mi tabla que abre un modal de bootstrap para agregar un servicio que presta mi empresa, pero al enviar no envía nada, el formulario llega vacío al método AddServicios del view.py, cuando pregunto si el formulario es válido, me devuelve False(valido=form.is_valid()) y me envía solo el parametro csrfmiddlewaretoken del formulario
view.py:
def AddServicios(request):
data=dict()
if request.method=='POST':
form=ServiciosForm(request.POST)
valido=form.is_valid()
if form.is_valid():
form.save()
else:
form= ServiciosForm()
area_List = Area.objects.filter()
context = { 'form': form}
data['html_form'] = render_to_string('precios/add_servicios2.html', context, request=request)
return JsonResponse(data)
forms.py:
class ServiciosForm(ModelForm):
class Meta:
model = Servicios
fields = [ 'tiposervicio', 'unidadM', 'precioCUP', 'precioCUC', 'precioT', 'anno', 'areaS']
add_servicios2.html:
<form class="create_form" method="POST" action="{% url 'eicma:add_servicios1' %}">
{% csrf_token %}
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Adicionar Servicio</h4>
</div>
<div class="modal-body">
<div class="panel-body">
<label for="servicio" class="control-label col-lg-2">Tipo de Servicio:</label>
<div class="col-lg-8">
<input class="form-control" id="servicio" type="text"
placeholder="Tipo de Servicio" value="epepe">
</div>
<label for="area" class="control-label col-lg-2">Área:</label>
<div class="col-lg-5">
<select class="form-control" id="area" >
<option value="">Seleccionar ...</option>
{% for area in area_List %}
<option value="{{ area.area }}">{{ area.area }}</option>
{% endfor %}
</select>
</div>
<label for="unidadmedida" class="control-label col-lg-2 ">U/M:*</label>
<div class="col-lg-3">
<select class="form-control" id="unidadmedida">
<option value="">Seleccionar ...</option>
<option value="Uno">Uno</option>
<option value="">Hora</option>
<option value="Hora">Horas/Alumno</option>
<option value="Mes">Mes</option>
<option value="Mes/Uno">Mes/Uno</option>
<option value="Mes/Busón">Mes/Busón</option>
<option value="Mes/Cta">Mes/Cta</option>
</select>
</div>
<label for="precioP" class="control-label col-lg-2">Precio MN:</label>
<div class="col-lg-3 ">
<div class="input-group">
<input class="form-control" id="precioP" type="text" placeholder="Precio MN" value="444">
<span class="input-group-addon">$</span>
</div>
</div>
<label for="precioC" class="control-label col-lg-2">Precio CUC:</label>
<div class="col-lg-3 ">
<div class="input-group">
<input class="form-control" id="precioC" type="text" placeholder="Precio CUC">
<span class="input-group-addon">$</span>
</div>
</div>
<label for="precioT" class="control-label col-lg-2">Precio Total:</label>
<div class="col-lg-3 ">
<div class="input-group">
<input class="form-control" id="precioT" type="text" placeholder="Precio Total">
<span class="input-group-addon">$</span>
</div>
</div>
<label for="anno" class="control-label col-lg-2">Año:</label>
<div class="col-lg-2">
<input class="form-control" id="anno" type="text" placeholder="Año">
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" id="adicionar" class="btn btn-primary">Adicionar</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</form>
listado.html:
<botton class="btn btn-primary show-form" ><span class="glyphicon glyphicon-plus"></span> Crear Servicio</botton>
<div class="row col-lg-12 ">
<div class=" table-responsive table-bordered">
<table id="tabla" class=" table table-striped table-bordered table-hover table-condensed "
cellspacing="0" width="100%">
<thead>
<tr class="bg-danger">
<th class="text-center col-lg-1">Número</th>
<th class="text-center col-lg-3">Tipo Servicio</th>
<th class="text-center col-lg-2">Unidad Medida</th>
<th class="text-center col-lg-1">Precio Total</th>
<th class="text-center col-lg-1">Año</th>
<th class="text-center col-lg-2">Área Servicio</th>
<th class="text-center col-lg-1">Opciones</th>
</tr>
</thead>
<tbody class="table">
{% for servicio in servicios_List %}
<tr>
<td class=" text-center">{{ servicio.id }}</td>
<td>{{ servicio.tiposervicio }}</td>
<td class=" text-center">{{ servicio.unidadM }}</td>
<td class=" text-center">{{ servicio.precioT }}</td>
<td class=" text-center">{{ servicio.anno }}</td>
<td class=" text-center">{{ servicio.areaS }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
<div id="popup" class="modal fade" role="dialog">
</div>
</div>
<div id="modal-servicios" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
modal.js:
$(document).ready(function () {
$('.show-form').click(function () {
$.ajax({
url: '/eicma/add_servicios1',
type: 'get',
dataType: 'json',
beforeSend: function () {
$('#modal-servicios').modal('show')
},
success: function (data) {
$('#modal-servicios .modal-content').html(data.html_form)
}
})
})
$('#modal-servicios').on('submit', '.create_form', function () {
var form = $(this);
$.ajax({
url: form.attr('action'),
data: form.serialize(),
type: form.attr('method'),
success: function (data) {
console.log(data)
}
})
return false;
})