Clearing form data in a a view with multiple forms.

Hi everyone :wave:

So I am working on a django project (using templates) with multiple forms rendered in a single view.
I want to have a button for each form which will clear the user inputed data for that form (which will not effect the data already present in other forms) as well as have a “global” clear button that will clear data for all the forms.

Anyone has any idea how to approach this problem ?

Thank you,

It definitely requires some JavaScript. JavaScript provides a reset function for a form which can be used.

But an actual answer is going to depend upon a couple of things:

  • Which (if any) JavaScript framework you’re using for your site.

  • Whether the page consists of just one HTML form containing multiple Django forms (and therefore 1 submit button) or if there are multiple form tags on the page, each containing one Django form.

  • If by “clearing” the form you mean blanking out the fields or just resetting them to their initial state.

  • If you have any input widgets other than just text input fields.

  1. No. I am not using any JavaScript framework. This is pure Django.
  2. I have several form classes (FormOne(forms.Form), FormTwo(forms.Form) etc) for which I create an instance in my and render the form. Each form has it’s own submit button.
  3. Yeah, I mean blanking out the fields
  4. I have just used the standard Field classes in my forms.

JavaScript is going to be required for this.

Check out the querySelectorAll method for finding the elements on your page.

Rendering a Django form doesn’t render an html form tag - so the question is whether or not each Django form is wrapped within its own form tag. If it’s not, you’ll want to at least enclose that form in its own div to make it easier to select the elements within that form.

Set the value attribute of each field in the form.

A Field is not the same thing as the Widget being used to render that field. A Field is an internal representation of data from a form, while the Widget is the HTML element used to display that field in a web page. Clearing a Widget other than a text field is different and may have other implications.

Thanks for the explanations !

I got the reset function on the form element to work but the problem is once the form is submitted, the reset doesn’t seem to clear the form (or if I understand correctly, it just brings back the data submitted previously). How do I totally clear the form after it’s submitted ?

As answered previously, this is always an option.

However, to some degree, the solution depends upon your Views, Forms, Templates, and the JavaScript that you have written to manage your page. If you’re looking for a more detailed answer, we’ll need to see that as a starting point. (When posting code or templates here, please remember to enclose the fragments between lines consisting of three backtick - ` characters. You’ll have a line of ```, followed by your code, followed by another line of ```.)

This is very cumbersome if your form has a lot of fields. I’ll try to see if I can put together a minimal reproducible scenario (As I can’t share the code I am working on because reasons …)

It doesn’t need to be. There are a number of different ways that you can identify your form fields and iterate over them.