Как сделать так, чтобы поля формы Django исчезли с помощью Javascript? - PullRequest
Новая
       0

Как сделать так, чтобы поля формы Django исчезли с помощью Javascript?

0 голосов
/ 06 декабря 2018

У меня есть форма в моем приложении 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» (next, prev и т. Д.), Ничего не меняется, и я не понимаю, что я делаю неправильно.Я также попытался использовать метод "window.onload = function", и это дало тот же результат.Буду очень признателен за любую помощь, спасибо!

Ответы [ 2 ]

0 голосов
/ 06 декабря 2018

Очевидно, что задание типа "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>
0 голосов
/ 06 декабря 2018

Вот решение:

Я только показываю вам принцип.Примените класс .disp_none к контейнерам, которые вы не хотите показывать.Затем получите объекты по идентификатору и удалите этот класс при нажатии следующей кнопки.

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 школах.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...