CODEWITHSUNDEEP
pythondjangobootstrap-modal
Plarent Haxhidauti
Plarent Haxhidauti

Reputation: 334

How to send data to view from form after asking for confirmation?

I created a simple form where I'm asking for user input and then posting that to the database. Now I would like the user to confirm the data in form is correct, and for that I'm using a Bootstrap modal.

How can I send the data from the form to the view when pressing the 'OK' button on the modal.

I'm new to the Django framework, and maybe there is another better way without using bootstrap modals.

Form:

class ReportForm(forms.Form):
    report_title = forms.ChoiceField(choices=get_report_titles())
    report_link = forms.CharField(widget=forms.Textarea, required=False)

Html file:

<form class="w-100" action="" method="post">
    {% csrf_token %}
    <label class="pl-0 mt-auto mr-2">Report&nbsp;Name</label>
    <select name="report_title" class="form-control report-name">
        <option selected>Select report</option>
        {% for name in report_names %}
        <option>{{ name }}</option>
        {% endfor %}
    </select>
    <div class="my-1 col-lg-12 float-left pl-0">
        <label>Report Link</label>
        <input class="form-control bg-white" type="text" id="report" name="report_link">
    </div>
    <input id="confirm" value="Save" type="button" data-toggle="modal" data-target="#exampleModalCenter" class="btn btn-outline-success" />
</form>

<!-- Modal -->
<div class=" modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLongTitle">Confirmation</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Make sure you have the right title and link.
            </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>

View:

def report_view(request):
        if request.method == 'POST':
            form = ReportForm(request.POST)
        if form.is_valid():
                report_title = form.cleaned_data['report_title']
                report_link = form.cleaned_data['report_link']
                new_report = Report(title = report_title, link = report_link)
                new_report.save()

Upvotes: 0

Views: 219

Answers (2)

xxbinxx
xxbinxx

Reputation: 1553

Simply update your code with these lines, add id="exampleForm".

start form tag with

<form class="w-100" action="" id="exampleForm" method="post">

Replace Save button with (add id="save"):

<button type="button" id="save" class="btn btn-primary">Save</button>

and finally add this script at the bottom to submit your form when save is clicked:

<script>
$("#save").on("click", function(e) {
    $("#exampleForm").submit();
});
</script>

also I feel your view is not written correctly. It should be something like this, I'm not sure what you're trying to do:

def report_view(request):
        if request.method == 'POST' and form.is_valid():
            form = ReportForm(request.POST)
            report_title = form.cleaned_data['report_title']
            report_link = form.cleaned_data['report_link']
            new_report = Report(title = report_title, link = report_link)
            new_report.save()

Let me know if you still need help

Upvotes: 1

HenryM
HenryM

Reputation: 5793

This needs changing because you're not giving any values.

  <select name="report_title" class="form-control report-name">
     <option selected>Select report</option>
     {% for name in report_names %}
     <option>{{ name }}</option>
     {% endfor %}
  </select>

Try:

  <select name="report_title" class="form-control report-name">
     <option selected>Select report</option>
     {% for name in report_names %}
     <option value="{{name.pk}}">{{ name }}</option>
     {% endfor %}
  </select>

where name.pk is the value relating to the choices.

Also, if you change your form to a ModelForm you can just do:

if form.is_valid():
    new_report = form.save()

Upvotes: 0

Related Questions