How do I make Django Form Fields Disappear with Javascript?
Question
I have a form in my Django application. What I'm attempting to do is create a form that is filled out in parts. I'm trying to allow the user to navigate the form by clicked on "next" and "prev" buttons to hide and show different steps of the field. The following is my 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>
My issue is that when I load the page, all of the steps are being displayed at the same time. When I click on any of the "a" tags (next, prev, etc), nothing changes, and I do not understand what I am doing wrong. I have also tried using a "window.onload = function" method, and that had produced the same result. I would greatly appreciate any help that is given, thank you!
2 answers
solution1
0 2018-12-06 19:19:15
Here's a solution:
I'm only showing you the principle. Apply the .disp_none class to containers you don't want shown. Then get the objects by ID, and remove that class when the next button in is clicked.
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>
And to make classes disappear:
You do it with the syntax element.classList.remove("mystyle");
To improve this for older browsers:
Add more event listeners. You can find a lot on this page at w3 schools.
solution2
0 ACCPTED 2018-12-06 20:24:38
Apparently, giving the type "var" in front of the arguments in the function resulted in an error that prevented my functions from working. Upon removing this, my original solution worked perfectly. Here is the finished code, for those who wish to learn from it as I did.
{% 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.