如何使Django表单字段不使用Javascript消失？

时间：2018-12-06 17:35:09

标签： javascript django html5

我的Django应用程序中有一个表单。我试图做的是创建一个表格，该表格分为几部分填写。我试图允许用户通过单击“下一个”和“上一个”按钮来隐藏和显示字段的不同步骤，从而浏览表单。以下是我的HTML：

{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <!--Meta data and stylesheet linking-->
    </head>

    <body onload="loadFunction()">
        <header>
            <!--Header-->
        </header>
        <section id="form-section">
            <div id="form-container">
                <form class="form" method="post"> 
                    {% csrf_token %}
                    <div id="1">
                        <h2>Step 1 of 3</h2>
                        <div class="form-group">
                            <label for="info_field" class="sr-only">Info Field</label>
                            {{ form.info_field }}
                        </div>
                            <!--There are a few more fields like this -->

                        <div class="form-group">
                            <a onclick='stepChange(1, "next")' href="#">Next</a>
                            <a onclick='stepChange(1, "last")' href="#">Last</a>
                        </div>
                    </div>
                    <div id="2">
                        <h2>Step 2 of 3</h2>
                            <!--Several form fields-->
                        <div class="form-group">
                            <a onclick='stepChange(2, "prev")' href="#">Previous</a>
                            <a onclick='stepChange(2, "next")' href="#">Next</a>
                        </div>
                    </div>
                    <div id="3">
                        <h2>Step 3 of 3</h2>
                        <!--Several form fields-->
                        <button class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
                        <div class="form-group">
                            <a onclick='stepChange(3, "first")' href="#">First</a>
                            <a onclick='stepChange(3, "prev")' href="#">Previous</a>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        <footer id="mainFooter">
            <p>Footer Info.</p>
        </footer>
        <script>
            function stepChange(var step, var cmd) {
                if(cmd == "first") {
                    var x = document.getElementById("3");
                    var y = document.getElementById("1");
                    x.style.display = "none";
                    y.style.display = "block";
                }
                else if (cmd == "prev") {
                    var x = document.getElementById(step);
                    x.style.display = "none";
                    var y = step - 1;
                    x = document.getElementById(y);
                    x.style.display = "block";
                }
                else if (cmd == "next") {
                    var x = document.getElementById(step)
                    x.style.display = "none";
                    var y = step + 1;
                    x = document.getElementById(y);
                    x.style.display = "block";
                }
                else if (cmd == "last") {
                    var x = document.getElementById("1");
                    var y = document.getElementById("3");
                    x.style.display = "none";
                    y.style.display = "block";
                }
            }
            function loadFunction() {
                var x = document.getElementById("1");
                var y = document.getElementById("2");
                var z = document.getElementById("3");
                x.style.display = "block";
                y.style.display = "none";
                z.style.display = "none";
            }
        </script>
    </body>
</html>

我的问题是，当我加载页面时，所有步骤都同时显示。当我单击任何“ a”标签（下一个，上一个等）时，没有任何变化，并且我不明白自己在做什么错。我也尝试过使用“ window.onload = function”方法，并且产生了相同的结果。我将不胜感激，谢谢您！

2 个答案:

答案 0 :(得分：0)

这是一个解决方案：

我仅向您展示原理。将.disp_none类应用于您不想显示的容器。然后按ID获取对象，并在单击下一个按钮时删除该类。

css 

step_1 { display: block; }
step_2 { display: block; }
.disp_none { display: none; }

html 

<form method="POST" action=".">

    <div id="step_1">
        <label>Step 1 of 3</label>

        <p><a id="to_step_2" href="#step_2">NEXT</a></p>

        <!-- blah blah blah -->
    </div>


    <div id="step_2" class="disp_none">
        <label>Step 2 of 3</label>

        <p><a href="#step_3">NEXT</a></p>

        <!-- blah blah blah -->
    </div>

    <!-- and so on... -->

</form>

Javascript 

<script>

   var to_step_2 = document.getElementById("to_step_2");
   var show_step_2 = document.getElementById("step_2");

   function myFunction() {
      show_step_2.classList.remove("disp_none");
   }

   to_step_2.onclick = myFunction


</script>

并使类消失：

您可以使用语法element.classList.remove("mystyle");

要针对较旧的浏览器进行改进：

添加更多事件侦听器。您可以在此页面w3 schools.

上找到很多内容

答案 1 :(得分：0)

显然，在函数的参数前面加上类型“ var”会导致错误，导致我的函数无法正常工作。删除此选项后，我的原始解决方案运行良好。这是完成的代码，适合那些希望像我一样学习的人。

{% load static %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <!--Meta data and stylesheet linking-->
    </head>

    <body onload="loadFunction()">
        <header>
            <!--Header-->
        </header>
        <section id="form-section">
            <div id="form-container">
                <form class="form" method="post"> 
                    {% csrf_token %}
                    <div id="1">
                        <h2>Step 1 of 3</h2>
                        <div class="form-group">
                            <label for="info_field" class="sr-only">Info Field</label>
                            {{ form.info_field }}
                        </div>
                            <!--There are a few more fields like this -->

                        <div class="form-group">
                            <a onclick='stepChange(1, "next")' href="#">Next</a>
                            <a onclick='stepChange(1, "last")' href="#">Last</a>
                        </div>
                    </div>
                    <div id="2">
                        <h2>Step 2 of 3</h2>
                            <!--Several form fields-->
                        <div class="form-group">
                            <a onclick='stepChange(2, "prev")' href="#">Previous</a>
                            <a onclick='stepChange(2, "next")' href="#">Next</a>
                        </div>
                    </div>
                    <div id="3">
                        <h2>Step 3 of 3</h2>
                        <!--Several form fields-->
                        <button class="btn btn-lg btn-primary btn-block" type="submit">Submit</button>
                        <div class="form-group">
                            <a onclick='stepChange(3, "first")' href="#">First</a>
                            <a onclick='stepChange(3, "prev")' href="#">Previous</a>
                        </div>
                    </div>
                </form>
            </div>
        </section>
        <footer id="mainFooter">
            <p>Footer Info.</p>
        </footer>
        <script>
            function stepChange(step, cmd) {
                if(cmd == "first") {
                    var x = document.getElementById("3");
                    var y = document.getElementById("1");
                    x.style.display = "none";
                    y.style.display = "block";
                }
                else if (cmd == "prev") {
                    var x = document.getElementById(step);
                    x.style.display = "none";
                    var y = step - 1;
                    x = document.getElementById(y);
                    x.style.display = "block";
                }
                else if (cmd == "next") {
                    var x = document.getElementById(step)
                    x.style.display = "none";
                    var y = step + 1;
                    x = document.getElementById(y);
                    x.style.display = "block";
                }
                else if (cmd == "last") {
                    var x = document.getElementById("1");
                    var y = document.getElementById("3");
                    x.style.display = "none";
                    y.style.display = "block";
                }
            }
            function loadFunction() {
                var x = document.getElementById("1");
                var y = document.getElementById("2");
                var z = document.getElementById("3");
                x.style.display = "block";
                y.style.display = "none";
                z.style.display = "none";
            }
        </script>
    </body>
</html>
相关问题
最新问题