Tuesday, November 17, 2020
Django form inside a modal (bootstrap)
hello, i'm trying to add a button that open a modal(bootstrap) where i can add a new object car, but when a press the buttom open the service form in the modal
i have a working form where i can add new car (name=create-car), how can i open the CarForm inside of the modal?
class Car(models.Model):
brand = models.charfield(...)
is_active= models.BooleanField(default=True)
class Service(models.Model):
car = models.ForeingKey('Car'....)
name = models.Charfield()
class ServiceCreateView(CreateView):
model = Service
form = ServiceForm
...
Service_form.html
{% extends 'generic_base.html' %}
{% load crispy_forms_tags %}
<body>
<script type="text/javascript">
$(document).ready(function() {
$("#exampleModal").modalForm({
formURL: "{% url 'create-car' %}"
});
});
</script>
{%block content %}
<div class="container">
<form method="POST">
{% csrf_token %}
<div class="form-row">
<div class="form-group col-md-3 mb-0">
{{ form.car|as_crispy_field }}
</div>
<div class="form-group col-md-3 mb-0">
<button id ="botonmodal" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Add New Car</button>
</div>
</div>
<input type="submit" value="Save" class="btn btn-success" />
</form>
</div>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Car</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="POST">
{% csrf_token %}
{{ form|crispy}}
<input type="submit" value="Save" class="btn btn-success" />
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
{% endblock %}
</body>
</html> --
You received this message because you are subscribed to the Google Groups "Django users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to django-users+unsubscribe@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/django-users/3702f309-91c1-4275-b69a-ed6cd18f7f82n%40googlegroups.com.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment