My submit button in html template is not working in django
Question
I prepared an attendance register template in HTML.I have a HTML table and a submit button in the given HTML page.While clicking the submit button,i want to save the data in HTML table.But i can't.
Ist std.html
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<title>Attendance register</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<h1><center><u>ATTENDANCE-REGISTER</u></center></h1><br>
<h2><center><i>Ist Standard</i></center></h2>
<h4>Class in-charge: Hema.B <br><br>
Date: June 2016 - March 2017</h4>
<form name="demo_form.asp" method="get">
<button type="submit" value="continue">Submit</button>
</form>
{% if user.is_authenticated %}
<a href="{% url 'post_new' %}" class="top-menu"><span class="glyphicon glyphicon-plus"></span></a>
{% endif %}
<table style="width:100%">
<tr>
<th>Slno</th>
<th>Name</th>
<th>Attendance</th>
</tr>
<tr>
<td>1</td>
<td>Abijith</td>
<td><input type="number" id="aNumber">
<button onclick="aFunction()"><font color="green">Present</button>
<button onclick="abFunction()"><font color="red">Absent</button>
<input type="number" id="abNumber">
</td>
</tr>
<tr>
<td>2</td>
<td>Adithya</td>
<td><input type="number" id="bNumber">
<button onclick="bFunction()"><font color="green">Present</button>
<button onclick="acFunction()"><font color="red">Absent</button>
<input type="number" id="acNumber"></td>
</tr>
<tr>
<td>3</td>
<td>Bavana</td>
<td><input type="number" id="cNumber">
<button onclick="cFunction()"><font color="green">Present</button>
<button onclick="adFunction()"><font color="red">Absent</button>
<input type="number" id="adNumber"></td>
</tr>
<tr>
<td>4</td>
<td>Bibin</td>
<td><input type="number" id="dNumber">
<button onclick="dFunction()"><font color="green">Present</button>
<button onclick="aeFunction()"><font color="red">Absent</button>
<input type="number" id="aeNumber"></td>
</tr>
<tr>
<td>5</td>
<td>Devan</td>
<td><input type="number" id="eNumber">
<button onclick="eFunction()"><font color="green">Present</button>
<button onclick="afFunction()"><font color="red">Absent</button>
<input type="number" id="afNumber"></td>
</tr>
<tr>
<td>6</td>
<td>Faizal</td>
<td><input type="number" id="fNumber">
<button onclick="fFunction()"><font color="green">Present</button>
<button onclick="agFunction()"><font color="red">Absent</button>
<input type="number" id="agNumber"></td>
</tr>
<tr>
<td>7</td>
<td>Ganga</td>
<td><input type="number" id="gNumber">
<button onclick="gFunction()"><font color="green">Present</button>
<button onclick="ahFunction()"><font color="red">Absent</button>
<input type="number" id="ahNumber"></td>
</tr>
<tr>
<td>8</td>
<td>Haris</td>
<td><input type="number" id="hNumber">
<button onclick="hFunction()"><font color="green">Present</button>
<button onclick="aiFunction()"><font color="red">Absent</button>
<input type="number" id="aiNumber"></td>
</tr>
<tr>
<td>9</td>
<td>Jamsina</td>
<td><input type="number" id="iNumber">
<button onclick="iFunction()"><font color="green">Present</button>
<button onclick="ajFunction()"><font color="red">Absent</button>
<input type="number" id="ajNumber"></td>
</tr>
<tr>
<td>10</td>
<td>Tara</td>
<td><input type="number" id="jNumber">
<button onclick="jFunction()"><font color="green">Present</button>
<button onclick="akFunction()"><font color="red">Absent</button>
<input type="number" id="akNumber"></td>
</tr>
</table>
<br>
<body>
<script>
function aFunction() {
document.getElementById("aNumber").stepUp();
}
function abFunction() {
document.getElementById("abNumber").stepUp();
}
function bFunction() {
document.getElementById("bNumber").stepUp();
}
function acFunction() {
document.getElementById("acNumber").stepUp();
}
function cFunction() {
document.getElementById("cNumber").stepUp();
}
function adFunction() {
document.getElementById("adNumber").stepUp();
}
function dFunction() {
document.getElementById("dNumber").stepUp();
}
function aeFunction() {
document.getElementById("aeNumber").stepUp();
}
function eFunction() {
document.getElementById("eNumber").stepUp();
}
function afFunction() {
document.getElementById("afNumber").stepUp();
}
function fFunction() {
document.getElementById("fNumber").stepUp();
}
function agFunction() {
document.getElementById("agNumber").stepUp();
}
function gFunction() {
document.getElementById("gNumber").stepUp();
}
function ahFunction() {
document.getElementById("ahNumber").stepUp();
}
function hFunction() {
document.getElementById("hNumber").stepUp();
}
function aiFunction() {
document.getElementById("aiNumber").stepUp();
}
function iFunction() {
document.getElementById("iNumber").stepUp();
}
function ajFunction() {
document.getElementById("ajNumber").stepUp();
}
function jFunction() {
document.getElementById("jNumber").stepUp();
}
function akFunction() {
document.getElementById("akNumber").stepUp();
}
</script>
</body>
</html>
Views.py
def Ist_std(request):
if 'save' in request.POST:
form = PostForm(request.POST)
if form.is_valid():
post = form.save(commit=False)
post.save()
return redirect('blog/IInd_std.html', pk=post.pk)
else:
form = PostForm()
return render(request, 'blog/Ist_std.html')
urls.py
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^Ist_std/$', views.Ist_std, name='Ist_std'),
]
2 answers
solution1
2 2016-08-06 05:20:30
You should not be manually generating your form like that in your html. I can see that you have already had a look at django forms. May I propose the following:
<form name="demo_form.asp" method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" value="continue">Submit</button>
</form>
There are lot's of other form rendering options as well. This approach will also ensure that the correct messages are displayed automatically when the form validation fails.
Also note that I have changed GET to POST. It's always better to use post for forms. I have added {% csrf_token %} remove this if you do not have the csrf middleware installed.
solution2
0 2016-08-06 05:08:31
In the template the form is closed before any input elements are defined, therefore the form will not contain any of the data entered as part of the table.
You can fix it by moving the </form> closing tag to somewhere after the end of the table.
Furthermore the <input> tags do not have name attributes, so none of the values entered in the input elements can be passed in the HTTP request. For example the first table row could be written as:
<tr>
<td>1</td>
<td>Abijith</td>
<td>
<input type="number" id="aNumber" name="aNumber">
<button onclick="aFunction()"><font color="green">Present</button>
<button onclick="abFunction()"><font color="red">Absent</button>
<input type="number" id="abNumber" name="abNumber">
</td>
</tr>
note that name attributes have been added to the input tags.
There might be other problems, but this is the one that stood out to me.
Edit
One other problem is that the view expects the data to be sent in a POST request, however, the form is using GET. Change the HTML form to use method="post" .
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.