Submit Button reset my form and send empty informations

[muhammet-mucahit]

[marcoaaguiar]

I'm not one of the project maintainers, but reading the issues I noticed that a common mistake is to use a submit button with type="submit" instead of type="button" with class="submit-btn"

From Step 2 of the usage Section in the readme.md:

    <button type="button" class="submit-btn btn btn-primary">Create</button>

Try to check that, otherwise maybe one of the devs can help you.

[muhammet-mucahit]

I have already done that.

<button type="button" class="submit-btn btn btn-primary">Öner</button>

Everything same as like readme

[trco]

@muhammet-mucahit I have couple of questions since you didn't post any code. What is your form doing? Is it saving an instance to the database? And does the view that handles it extend BSModalCreateView? In this case it should redirect to the success_url, but that doesn't happen in your case.

[muhammet-mucahit]

Sorry for the missing information. Yes I am trying to create a new Category model. I extends BSModalCreateView in my view.

class NewCategoryView(BSModalCreateView):
    template_name = 'category_new.html'
    form_class = CategoryForm
    success_url = reverse_lazy('domain_new')
    success_message = "%(category)s isimli yeni bir kategori önerildi."

As you say, it doesn't redirect to my success_url. I guess the problem is in submit-btn class in my button. I can't find any info in added css or js. Why we use submit-btn. When I didn't add it to my button class button did nothing. When I added, button acts like reset as you can see in the gif.

I don't understand. It took my all night :)

[marcoaaguiar]

The 'submit-btn' is used here https://github.com/trco/django-bootstrap-modal-forms/blob/504b560f17b6881dde401ce077c3d6d1ad3a5410/bootstrap_modal_forms/static/js/jquery.bootstrap.modal.forms.js#L63

Are you doing any overriding on NewCategoryView or in your form?

[muhammet-mucahit]

I also created an another one for trying. The problem still exist. I am not doing any overriding.

class MessageCreateView(BSModalCreateView):
    template_name = 'message_create.html'
    form_class = MessageForm
    success_message = 'Success: Book was created.'
    success_url = reverse_lazy('messages')

class MessageForm(BSModalForm):
    class Meta:
        model = Message
        exclude = ['sender', 'receiver',]

{% load widget_tweaks %}

<form method="post" action="">
    {% csrf_token %}

    <div class="modal-header">
        <h3 class="modal-title">Yeni Mesaj</h3>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>

    <div class="modal-body">

        <div class="{% if form.non_field_errors %}invalid{% endif %} mb-2">
            {% for error in form.non_field_errors %}
            {{ error }}
            {% endfor %}
        </div>

        {% for field in form %}
        <div class="form-group">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            {% render_field field class="form-control" placeholder=field.label %}
            <div class="{% if field.errors %} invalid{% endif %}">
                {% for error in field.errors %}
                <p class="help-block">{{ error }}</p>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="modal-footer">
        <button type="button" class="submit-btn btn btn-primary">Create</button>
    </div>
</form>

[trco]

@muhammet-mucahit Your code seems OK to me. What about instantiating of the modal form in js? I also asked if the instance is saved to database? And what do you see in terminal? Do you maybe have another modal included in the same page? In your place I would simply copy/paste from examples for the starting point.

You should see 302 redirects in your terminal.

[16/Nov/2019 08:09:27] "GET /create/ HTTP/1.1" 200 2346
[16/Nov/2019 08:09:45] "POST /create/ HTTP/1.1" 302 0
[16/Nov/2019 08:09:45] "GET / HTTP/1.1" 200 12543
[16/Nov/2019 08:09:45] "POST /create/ HTTP/1.1" 302 0
[16/Nov/2019 08:09:45] "GET / HTTP/1.1" 200 13932

[muhammet-mucahit]

No the instance isn't saved to database. I realized yes the page contains one more modal. It is logout model.

<!-- Logout Modal-->
    <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Çıkış yapmaya hazır mısınız?</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">Eğer oturumunuzu sonlandırmaya hazırsanız, aşağıdaki "Çıkış" butonuna basınız.
                </div>
                <div class="modal-footer">
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">İptal</button>
                    <a class="btn btn-primary" href="/accounts/logout/">Çıkış</a>
                </div>
            </div>
        </div>
    </div>

I can't get any redirect

16/Nov/2019 14:47:36] "POST /category/ HTTP/1.1" 200 1450

<!-- New Category Modal-->
<div class="modal fade" tabindex="-1" role="dialog" id="modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content"></div>
    </div>
</div>

<script src="{% static 'js/jquery.bootstrap.modal.forms.js' %}"></script>

<script type="text/javascript">
    $(function () {
        $(".create-message").modalForm({ formURL: "{% url 'message_create' %}" });

        $(".message-detail").each(function () {
            $(this).modalForm({ formURL: $(this).data('id') });
        });
    });
</script>

[muhammet-mucahit]

I got it my problem is same like #57. Sorry for getting your time. I am waiting for your enhancement.

[trco]

@muhammet-mucahit So it was second modal. Great that you identified the reason. You can of course set up the custom class name formodal-content for the second modal and it will work as it should.

However I would like to point out that in my examples you can open different modals on single page. I'm including following html on this page and when you click on different buttons to open modals, different forms are loaded into modal-content element. This is elegant solution to reuse single modal for multiple forms.

index.html

{% include "_modal.html" %}

_modal.html

<div class="modal fade" tabindex="-1" role="dialog" id="modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content"></div>
  </div>
</div>