How to create a collapsible form in Django with jQuery?

Question

I am trying to create a collapsible form in Django which would toggle a form once a button is clicked. I found that I could use the .toggle() option from jQuery but I don't know how to connect the associated form with the function

The "toggles all paragraphs" example from http://api.jquery.com/toggle/ seems to be what I need but I'm not sure how to integrate it.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        <script>
            $('#toggle').click(function() {
            $('form').toggle('slow');
            });
        </script>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

    <title>Hello world!</title>
  </head>


  <body>
    <h3 class="text-success">Add Sensor</h3>
    <br>

    <form style="display:none;" method="post">
        {% csrf_token %}
        <div class="row align-items-center">
            <div class="col-sm-8">
                <table>
                   {{ form1.as_table}}
                </table>
                <div class="mx-sm-2">
                    <input type="submit" value="Submit">
                </div>
                <br>
                <br>

                <button type="button" id="toggle">toggle form</button>



                <h3 class = "text-success">Add Sensor View</h3>
                <table>
                   {{ form2.as_table}}
                </table>
                <div class="mx-sm-2">
                    <input type="submit" value="Submit">
                </div>
                <br>
                <br>
            </div>
        <div>
    </form>

I would like form2 to be toggled only once a button is pressed

Both Forms are defined similar to the following:

class VehicleForm(forms.ModelForm):
class Meta:
    model = Vehicle
    fields = ['vehicle_id',
              'vehicle_name',
              'vehicle_modelyear',
              'vehicle_version',
              'vehicle_file']

    widgets = {
        'vehicle_id': forms.Textarea(attrs={'rows': 1, 'cols': 15}),
    }

score 0 · Answer 1 · answered Jun 05 '19 at 15:41

You could hide the form using style="display:none;" and create a toggle link that will hide or show the form with a slow fade like so :

<a href="#toggle" id="toggle">toggle form</a><br><br>
<form style="display:none;" method="post">
    {% csrf_token %}
    <div class="row align-items-center">
        <div class="col-sm-8">
            <table>
               {{ form1.as_table}}
            </table>
            <div class="mx-sm-2">
                <input type="submit" value="Submit">
            </div>
            <br>
            <br>
            <h3 class = "text-success">Add Sensor View</h3>
            <table>
               {{ form2.as_table}}
            </table>
            <div class="mx-sm-2">
                <input type="submit" value="Submit">
            </div>
            <br>
            <br>
        </div>
    <div>
</form>

And on your JS :

$('#toggle').click(function() {
   $('form').toggle('slow');
});

Working example :

$('#toggle').click(function() {
 $('form').toggle('slow');
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<a href="#toggle" id="toggle">toggle form</a><br><br>
<form style="display:none;" method="post">
        {% csrf_token %}
        <div class="row align-items-center">
            <div class="col-sm-8">
                <table>
                   {{ form1.as_table}}
                </table>
                <div class="mx-sm-2">
                    <input type="submit" value="Submit">
                </div>
                <br>
                <br>
                <h3 class = "text-success">Add Sensor View</h3>
                <table>
                   {{ form2.as_table}}
                </table>
                <div class="mx-sm-2">
                    <input type="submit" value="Submit">
                </div>
                <br>
                <br>
            </div>
        <div>
    </form>

Thank you, this might work. Do you know how I could make the "toggle form" into a button rather than a clickable text? — Andrei, Jun 05 '19 at 15:52
I tried to add it but I must be doing it wrong, I added the rest of the code in the question. Not sure where to place the button and the JS bit — Andrei, Jun 05 '19 at 16:02
Please show the content of `{{ form.as_table}}` and `{{ form2.as_table}}` so I can correct my code accordingly. — tcj, Jun 05 '19 at 16:19
By the way, you can't have a form inside a form... See here : https://stackoverflow.com/questions/555928/is-it-valid-to-have-a-html-form-inside-another-html-form — tcj, Jun 05 '19 at 16:23
Apologies for the late reply, I have now added the form structure of form1 and form2 — Andrei, Jun 07 '19 at 11:59
As stated by my previous comment, the toggle function won't work on those forms because they are already in your main form and according to HTML W3C standards you can't have a form within a form. So you'll have to wrap those forms in a separate `div` instead of a `form` and then you can adapt my code to make it work for both. — tcj, Jun 07 '19 at 12:29

How to create a collapsible form in Django with jQuery?

1 Answers1