时间戳

首页 > 解决方案 > 如何使用 jQuery 在 Django 中创建可折叠表单？

jquery - 如何使用 jQuery 在 Django 中创建可折叠表单？

问题描述

我正在尝试在 Django 中创建一个可折叠的表单，一旦单击按钮就会切换一个表单。我发现我可以使用 jQuery 中的 .toggle() 选项，但我不知道如何将关联的表单与函数连接起来

http://api.jquery.com/toggle/中的“切换所有段落”示例似乎是我需要的，但我不确定如何集成它。

<!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>

我希望仅在按下按钮后才切换 form2

两种形式的定义类似于以下内容：

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}),
    }

标签： jqueryhtmldjango

解决方案

您可以使用隐藏表单style="display:none;"并创建一个切换链接，该链接将隐藏或显示缓慢淡入淡出的表单，如下所示：

<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>

在你的 JS 上：

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

工作示例：

$('#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>

推荐阅读