0

I've tried to build a website using django & bootstrap, and in one of the pages I have two forms, one is to add a comment to a post, and the other is to make contact with me, the contact form is on a bootstrap modal. How can I put the contact form in the modal, with a function-based view?

views.py

def GameView(request, slug):
    game = GameUpload.objects.get(slug=slug)
    comment_form = CommentForm()
    contact_form = ContactForm()
    if request.method == "POST":
        if request.POST['form-type'] == u'comment-form':
            comment_form = CommentForm(request.POST)
            if comment_form.is_valid():
                instance = form.save(commit=False)
                instance.upload = game
                instance.save()
        else:
            contact_form = ContactForm(request.POST)
            #Send mail to me
    context = {"game": game,
               "comment_form": comment_form,
               "contact_form": contact_form,
               "comments": game.comment_set.all().order_by("-date")}
    return render(request, 'game.html', context)

The template

<div class="jumbotron">
    <div class="container">
        <div class="col-sm-8 col-sm-offset-2">
            <h3><i class="fa fa-comment"></i> Add Comment:</h3>
            <form method="POST">
                {% csrf_token %}
                {{ comment_form|crispy }}
                <input type="hidden" name="form-type" value="comment-form" />
                <input type="submit" value="Submit" class="btn btn-primary" />
            </form>
        </div>
    </div>
</div>

The modal:

<div id="contact" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Contact Me</h4>
            </div>
            <div class="modal-body">
                <form method="POST" action="/">
                    {% csrf_token %}
                    {{ contact_form|crispy }}
                    <input type="hidden" name="form-type" value="contact-form" />
                </form>
            </div>
            <div class="modal-footer">
                <input type="submit" value="Send" class="btn btn-success" />
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
Ofersto
  • 107
  • 2
  • 9

1 Answers1

1

Model Submit Button should be within the form tag

<div id="contact" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Contact Me</h4>
            </div>
            <div class="modal-body">
                <form method="POST" action="/">
                    {% csrf_token %}
                    {{ contact_form|crispy }}
                    <input type="hidden" name="form-type" value="contact-form" />
                    <!--- Here --- >
                    <input type="submit" value="Send" class="btn btn-success" />
                </form>
            </div>
            <div class="modal-footer">
                <!-- The Line was here -->
                <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
Othman
  • 2,942
  • 3
  • 22
  • 31
  • Ok, I didn't notice, but still, after you press the button the modal close and you need the re-open it to see that you didn't fill all the fields – Ofersto Aug 17 '15 at 05:52
  • It's because the page reload. If you want to validate the form you will need to use Ajax. – Othman Aug 17 '15 at 17:46
  • Also, check this http://stackoverflow.com/questions/11276100/how-do-i-insert-a-django-form-in-twitter-bootstrap-modal-window – Othman Aug 17 '15 at 17:46
  • Both solutions there didn't work for me, so I added a variable which says whether or not the form has error, so I added this script: but it not working, can you help me @Othman? – Ofersto Aug 19 '15 at 07:49