Can I build my form without using Django form?

Question

I'm using Django and I just did a big form Using HTML5 and bootstrap. Can I still send the form via the post method to django if I'm not using it to generate the form? Should I definitely redo my form using Django?

Answer 1

NOTE: There may be a better way of doing this, if there is I'd really like to know, this is just how I have done it in the past.

You will still need a forms.py file in your app.

In forms.py:

from django import forms

class MyForm(forms.Form):

    # FORM FIELDS HERE

Then put the form in the context dictionary for your view:

def myView(request):

    if request.method == "POST":

        # FORM PROCESSING HERE

    else:

        myform = MyForm() #create empty form

    return render(request, "template.html", {"myform": myForm}

Now in your template you can add:

        <form id="myForm" name="myFormName" method="post" action=".">
            {% csrf_token %}
            {% for field in myform %}
            {{ field.as_hidden }}
            {% endfor %}
        </form>

This will add your django form to the page without displaying it. All of your form inputs are given the id id_fieldName where fieldName is the field name you defined in the forms.py file.

Now when the user clicks your "submit" button (which I am assuming is a bootstrap button given the rest of your form is). You can use Jquery to input the bootstrap field values into those of the hidden form.

Something like:

$("#mySubmitButton").click(function() {

        $("#id_djangoFormField").val($("#myBootstrapFormField").val());
        $("#myForm").submit();

    }
);

This will submit the django form with the inputs from bootstrap. This can be processed in the view as normal using cleaned_data["fieldName"].

Answer 2

A bit late I post the solution I found for including a form in a modal in a class based detail view. Dunno if it's really orthodox but it works.

I don't use any Form Class or Model. (Django 3.9)

Within the template, I send a field value of my object in a hidden div. If this value is missing for a special action (because for the most of actions on the object, it's not required), a modal pops asking for updating the given field. This modal is triggered with JS that check the presence (or not) of the required value.

In the modal, I display a list of radio choices buttons in an ordinary form inviting the user to update the field. The form's action leads to a view that will update the given field.

modal.html

<form action="{% url 'update-sku-column' object.pk %}" method="post">
      {% csrf_token %}
      {% if csv_headers %}
          <div class="m-3 ps-3">
             {% for header in csv_headers %}
             {% for csv_sample in csv_samples %}
             {% if forloop.counter0 == forloop.parentloop.counter0 %}
                 <div class="form-check">
                    <input class="form-check-input" type="radio" name="chosen-field" value="{{ forloop.counter0 }}">
                        <label class="form-check-label" for="{{ forloop.counter0 }}">
                            <span class="ms-3">{{ header }} </span>: <span class="ms-1 text-secondary">{{ csv_sample }}</span>
                        </label>
             </div>
             {% endif %}
             {% endfor %}
             {% endfor %}
          </div>
          {% endif %}
          <div class="modal-footer">
             <button type="submit" class="btn btn-success">Enregistrer</button>
          </div>
  </form>

urls.py

[...]
path('flow/<int:pk>/update-sku-column',
         set_sku_column, name='update-sku-column'),
[...]

views.py

@login_required
def set_sku_column(request, pk):
    if request.method == 'POST':
        column = request.POST['chosen-field']
        flow = Flow.objects.get(pk=pk)
        flow.fl_ref_index = column
        flow.save()
        return redirect('mappings-list', pk=pk)
[...]

Even if I can imagine it's not the best way, it works. don't forget the {% csrf_token %}otherwise it won't