Django form inside a modal (bootstrap)

78 views
Skip to first unread message

Apolo Machine

unread,
Nov 17, 2020, 10:37:48 AM11/17/20
to Django users

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">&times;</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>
Reply all
Reply to author
Forward
0 new messages