I'm trying to shape up my login page form as per django. I'm facing an extra >" characters at the end of my entry fields.
There is the image error. See image below.
You might need to pay attention to right up corner of the input fields. Is there any idea, where is this "> came from ? Thanks for your time!
<form method="POST"> {% csrf_token%}
<div class="field">
<span class="fa fa-user"></span>
<input type="text" required placeholder="Email Adress" for="{{form.username}}">
</div>
<div class="field space">
<span class="fa fa-lock"></span>
<input type="password" class="pass-key" required placeholder="Password" for="{{form.password}}">
<span class="show">SHOW</span>
</div>
<div class="pass">
Forgot Password?
</div>
<div class="field">
<input type="submit" value="LOGIN">
</div>
</form>
There is the full code
{% load static %}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Somehow I got an error, so I comment the title, just uncomment to show -->
<!-- <title>Transparent Login Form UI</title> -->
<link href="{% static 'css/login.css' %}" rel="stylesheet" />
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="bg-img">
<div class="content">
<header>Welcome to Norga</header>
<form method="POST"> {% csrf_token%}
<div class="field">
<span class="fa fa-user"></span>
<input type="text" required placeholder="Email Adress" for="{{form.username}}">
<!-- {{form.username}} -->
</div>
<div class="field space">
<span class="fa fa-lock"></span>
<input type="password" class="pass-key" required placeholder="Password" for="{{form.password}}">
<!-- {{form.password}} -->
<span class="show">SHOW</span>
</div>
<div class="pass">
Forgot Password?
</div>
<div class="field">
<input type="submit" value="LOGIN">
</div>
</form>
<div class="login">
Or login with</div>
<div class="links">
<div class="facebook">
<i class="fab fa-facebook-f"><span>Facebook</span></i>
</div>
<div class="instagram">
<i class="fab fa-instagram"><span>Instagram</span></i>
</div>
</div>
<div class="signup">
Don't have account?
Signup Now
</div>
<br>
<div class="signup">
Email verification
Send Again
</div>
</div>
</div>
<script>
const pass_field = document.querySelector('.pass-key');
const showBtn = document.querySelector('.show');
showBtn.addEventListener('click', function(){
if(pass_field.type === "password"){
pass_field.type = "text";
showBtn.textContent = "HIDE";
showBtn.style.color = "#3498db";
}else{
pass_field.type = "password";
showBtn.textContent = "SHOW";
showBtn.style.color = "#222";
}
});
</script>
</body>
</html>
I have solved my problem with re-coding my login views. I was using the django auth_views.LoginView , however it was not fit to my html scale in that way. Therefore, I came up with a new form in forms.py file and change my urls in accordance with the url in the below.
There is the solution link for the form and custimizing the loginview and there is my new form in html file in the below;
<form method="post">
{% csrf_token%}
<div class="form-group">
{{ form.non_field_errors }}
{{ form.username.errors }}
{{ form.password.errors }}
</div>
<div class="field">
<span class="fa fa-user"></span>
{{ form.username }}
</div>
<div class="field space">
<span class="fa fa-lock"></span>
{{ form.password }}
<span class="show">SHOW</span>
</div>
<div class="pass">
Forgot Password?
</div>
<div class="field">
<input type="submit" value="LOGIN">
</div>
</form>
Related
This question already has answers here:
Flask view return error "View function did not return a response"
(3 answers)
Closed 8 months ago.
flask code
#bp.route('/delete/<int:id>')
#login_required
def delete_tracker(id):
if Trackers.user_id == current_user.id:
trackers = Trackers.query.filter_by(id=id).first()
print(trackers)
db.session.delete(trackers)
db.session.commit()
return redirect(url_for("authen.dashboard"))
Html code- look for /delete url t bottom there is the error
{% extends "base.html" %}
{% block title %} Dashboard {% endblock %}
{% block content %}
<nav class="sidenav">
<div class="main-buttons">
<a class="nav-link active" id="trackers" aria-current="page" href="/dashboard">Trackers</a>
<a class="nav-link active" id="goals" aria-current="page" href="/goals">Goals</a>
<div>
</nav>
<div id="dashbar">
<nav class="navbar bg-light">
<div class="container-fluid">
<button type="button" class="btn btn-outline-dark" data-bs-toggle="modal" data-bs-target="#exampleModal">
Add Tracker
</button>
<form method="POST">
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add a Tracker</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<label for="tracker_name" class="col-form-label">Tracker Name:</label>
<input type="text" class="form-control" id="tracker_name" name="tracker_name"
placeholder="Enter a Tracker name">
<div class="from-fieldset" style="width:200px;">
<label for="tracker_type" class="form-label">Choose a Tracker type:</label>
<select id="tracker_type" name="tracker_type">
<option value="">choose Tracker type</option>
{% for t in data_trackers %}
<option value="{{t.name}}">{{t.name}}</option>
{% endfor %}
<label for="tracker_description " class="col-form-label">Description</label>
<input type="text" class="form-control" id="tracker_description" name="tracker_description"
placeholder="Enter Description">
</select>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="submit" class="btn btn-light border-dark">Submit</button>
</div>
</div>
</div>
</div>
</form>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</nav>
</div>
<div class="wrapper">
<div class="container-tracker">
{% for track in user.trackers %}
<div class="tra">
<h3 id="trackername"> {{track.tracker_name}}</h3>
<div class="dropdown-container" tabindex="-1">
<form method="GET" action="/delete/{{track.id}}">
<button type="submit" class="btn btn-outline-light">Delete</button>
</form>
<div class="three-dots"></div>
<div class="dropdown">
<a href="#">
<div>Records and Graphs</div>
</a>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
{% endblock %}
( in form method=GET , the delete url is there and the flask code is at top for that endpoint
if I remove if condition in the delete_tracker() fucntion that is if user.id==current_user.id then I will get a different error that is , this is for session 2nd but this is 3rd session something like this, so my file I want to delete is different session )
can you try to change your line
#bp.route('/delete/<int:id>')
to
#bp.route('/delete/<track.id>')
But it will showing an error which is (TypeError at /deletecase deletecase() missing 1 required positional argument: 'pk') please help me out this
Here is the url link of the page:
```path("deletecase",views.deletecase,name="deletecase")```
THE VIEW FILE FUNCTION:
```
def policcasesdetails(request):
cases=Case.objects.all()
return render(request,'policeside/policcasesdetails.html',{'cases':cases})
def deletecase(request,pk):
obj=Case.objects.get(id=pk)
obj.delete()
return HttpResponse("Data is Deleted")
```
AND THE FORM IS:-
<div class="container">
<div class="content-middle">
<div class="col-md-12 sed-in">
<h3>Cases Details</h3>
{% for i in cases %}
<div class="col-md-4 sed-top">
<div class="top-sed">
<!-- <img src="{{ i.image.url }}" class="img-responsive" alt=""> -->
<!-- <label><span>{{ i.oname }}</span></label> -->
</div>
<h4>
Case Number- <a>{{i.casenumber}}</a>
</h4>
<p>Case Name- {{i.casename}}</p>
<p>Case Result- {{ i.caseresult }}</p>
<p>Case Conclusion- {{ i.casecoclusion }}</p>
<p><a href="{% url 'deletecase' i.id %}">
<button type="submit" value="delete" class="btn btn-
danger">Delete</button>
</p>
</div>
{% endfor %}
<div class="clearfix"> </div>
</div>
<div class="clearfix"> </div>
</div>
</div>
In your URL, pk is missing.
path("deletecase/<id>/",views.deletecase,name="deletecase")
This should solve your issue
I've a register form and a function to post the values to django via ajax, but for some reasons, the post request says 403 forbidden but the get request does the job.
I want to use post request in this functionality but it doesn't seem to work, tried putting {% csrf_form %} too within the template, but still it says 403 Forbidden. Any sugestion?
Views.py
from django.http import HttpResponse
from django.shortcuts import render
from django.views import View
class signUp(View):
def post(self, request):
return HttpResponse(" POST method successfull !!")
Urls.py
path('insert/', views.signUp.as_view()),
HTML Form:
{% extends 'base.html' %}
{% block title %}
<title> Register </title>
{% endblock %}
{% block content %}
<div class="row breadcrumb_nav">
<div class="col-md-1" ></div>
<div class="col-md-10" style="margin-bottom: 35px;">
<!-- START col-md-12 Section -->
<ol class="breadcrumb nm" >
<li> Home </li>
<li class="active"> Register </li>
</ol>
<div id="quickViewPage_error_container">
<div id="animated_image"></div>
<div id="results_container"></div>
</div>
</div>
<!--end of col-md-12 -->
<div class="col-md-1" ></div>
</div> <!-- end of row -->
<!--start of row -->
<div class="row">
<div class="col-md-1" ></div>
<div class="col-md-12"> <!-- START Right Section -->
<div class="main_shadow panel panel-default"> <!-- START OF panel panel-default-->
<div class="panel-body panel-body-padding"> <!-- -START OF PANE -->
<div class="modal-header">
<h4 class="modal-title" id="exampleModalLabel"> Register </h4>
</div>
<div class="modal-body">
<div class="panel-body"> <!-- -START OF PANE -->
<form id="signup_form" name="signup_form" method="post">
{% csrf_token %}
<div class="form-group">
<div class="row">
<div class="col-sm-6">
<label class="control-label"> eMail <span class="text-danger">*</span></label>
<input name="email" type="text" class="form-control" autocomplete="off" required>
</div>
<div class="col-sm-6">
<label class="control-label">Password <span class="text-danger">*</span></label>
<input name="password" type="password" class="form-control" autocomplete="off" data-parsley-trigger="change" required>
</div>
</div>
</div>
<input type="hidden" name="register_new_user" id="register_new_user" value="register_new_user">
<input type="submit" name="register_btn" id="register_btn" class="btn btn-primary" value="Register" style="float:left;padding-left:25px;padding-right:25px;margin-right: 25px;">
<a href="/register">
<input type="button" class="btn btn-primary" value="Register Now" style="float:left;padding-left:25px;padding-right:25px;">
</a>
</form> <!--end of Login_Management -->
</div> <!-- END OF panel-body -->
</div>
</div> <!-- END OF panel-body -->
</div> <!--/ End of Form layout -->
</div> <!-- END OF Right Section -->
<div class="col-md-1" ></div>
</div>
<!-- end of row -->
enter code here
{% endblock %}
{% block javascript %}
<script>
$('#register_btn').click(function(e) {
e.preventDefault();
$.post('/insert/', '®ister_new_user=register_new_user' +
'&csrftoken={{ csrf_token }}' , function(response) {
$('#results_container').html(response);
});
});
</script>
{% endblock %}
You are sending the data in the path like this:
$.post('/insert/', '®ister_new_user=register_new_user' +
'&csrftoken={{ csrf_token }}' , function(response) {
$('#results_container').html(response);
});
Try sending the data in the body:
$.post( '/insert/', { register_new_user: "register_new_user", csrftoken: "your_token_here" } );
Hi I am trying to make a form submission app that just displays the entered information back to the user underneath the form they submitted. Unfortunately, I can't seem to load the context on the front end within the template.
Template:
You'll see under the form there is a for loop that is supposed to iterate the context, but nothing displays. I tried it with just email for now, but it does not work.
<!DOCTYPE html>
<html>
<head>
<title>Form Practice</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<form style="margin-top: 600px;" method="post" action="/form">
{% csrf_token %}
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label" >Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email" name="email">
</div>
</div>
<div class="form-group row">
<label for="inputPassword3" class="col-sm-2 col-form-label" >Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" name="password" placeholder="Password">
</div>
</div>
<fieldset class="form-group">
<div class="row">
<legend class="col-form-label col-sm-2 pt-0">Radios</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
First radio
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Second radio
</label>
</div>
</div>
</div>
</fieldset>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1" name="check">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
<select class="custom-select mr-sm-2 custom-select-lg mb-3" name="select" id="inlineFormCustomSelect">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="custom-control-input">
<label class="custom-control-label" for="customRadio2">Or toggle this other custom radio</label>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" name="customFile" id="customFile">
<label class="custom-file-label" for="customFile">Choose file</label>
</div>
<button type="submit" class="btn-block btn btn-primary my-1">Submit</button>
</form>
{% for item in context %}
<h1>{{ item.email }}</h1>
{% endfor %}
</div>
<div class="col-md-2"></div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
views.py
def index(request):
try:
email = request.POST['email']
print(email)
password = request.POST['password']
print(password)
radio = request.POST['gridRadios']
print(radio)
select = request.POST['select']
print(select)
except:
print("error")
context = {'context': {'email': email, 'password': password, 'radio': radio, 'select': select}}
print(context)
return render(request, 'form.html', context)
Replace this:
{% for item in context %}
<h1>{{ item.email }}</h1>
{% endfor %}
To:
<h1>{{ context.email }}</h1>
This is some code from my index.html. My issue is that the action on the form in the modal is not working (no error, just doing nothing) yet the form outside the model is working fine (commented test button). The model is opening fine and seems correctly formatted, yet the 'yes' button does nothing but closes the modal. The problem does not seem to be in the URL. Any help would be much appreciated. I am using django by the way
{% for patient in all_patients %}
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-body">
<!-- Name -->
<h4>{{ patient }}</h4>
<!-- View Details -->
View Details
<!-- Edit Details -->
Edit Details
<!-- Delete Patient -->
<input type="hidden" name="patient_id" value="{{ patient.id }}" />
<button type="submit" class="btn btn-default btn-sm" data-toggle="modal" data-target="#patient_id">
<span class="glyphicon glyphicon-trash"></span>
</button>
<!-- Modal -->
<div class="modal fade" id="patient_id" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Confirm delete</h4>
</div>
<div class="modal-body">
<p>Are you sure you want to delete {{ patient }}?</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal">No</button>
<form action="{% url 'patients:patient-delete' patient.id %}" method="post" style="display: inline;">
{% csrf_token %}
<button type="submit" class="btn btn-danger" data-dismiss="modal">Yes</button>
</form>
</div>
</div>
</div>
</div>
<!-- test button -->
<form action="{% url 'patients:patient-delete' patient.id %}" method="post" style="display: inline;">
{% csrf_token %}
<button type="submit" class="btn btn-danger" data-dismiss="modal">Delete</button>
</form>
</div>
</div>
</div>
{% cycle '' '' '' '' '' '<div class="clearfix visible-lg"></div>' %}
{% endfor %}