I am trying to pass in a list of classes into a checkbox (this works), and when the Submit button is clicked, I want to make a Post Request to send all the selected boxes to the backend and then also go to the next page (Does not work).
Here is my HTML page right:
<!doctype html>
<html lang="en">
<head>
<style>
h1 {color: rgb(240, 112, 38);}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script>
function myFunction() {
window.location.href="./classinfo";
}
function sendPOST() {
let formData = { user_classes: $("#user_classes").val() };
$.post("/class", formData)
};
</script>
</head>
<body style="background-color:powderblue;">
<div class="container">
<br>
<h1>What Classes Have You Taken</h1>
<div class="form-group row">
<label class="col-lg-12">
<form method="POST" action='/class'>
<label class="col-xs-6" style="font-family:verdana;">
{% for c in cs_req %}
<input type="checkbox" style="text-align:left;" name = 'user_classes' option value = "{{c}}" SELECTED> {{c}}<br></option>
{% endfor %}
</label>
<br>
<input class="btn btn-secondary" style="font-family:verdana;" type="Submit" onclick="sendPOST();MyFunction()">
</form>
</label>
</div>
<div id="content">
</div>
</div>
<script>
$(document).ready(function(){
$('.selectpicker').selectpicker();
})
</script>
</body>
</html>
and my backend function is this:
#app.route('/class', methods=["POST"])
def store_classes():
"'Based on checkboxes selected from checkboxes(), store the classes in txt'"
user_classes = request.form.getlist('class') #--> returns nothing
return render_template("class.html")
My onclick is not sending the post request or going to the next page. I'm not sure how to solve this so any advice is appreciated.
Related
I'm currently developing a Django web app, however I have an issue: After login, the user clicks on any button eg. Home (which has been linked to views with the #login_required decorator) and gets logged out and redirected back to the login page. I'm using Firebase for the authentication.
My views.py:
def postsign(request):
email=request.POST.get('email')
passw=request.POST.get('pass')
try:
user=auth.sign_in_with_email_and_password(email,passw)
except:
message="Invalid credentials. Try again."
return render(request,"login.html", {"msg":message})
session_id=user['idToken']
request.session['uid']=str(session_id)
return render(request,"pick.html")
#login_required(login_url='login')
def pick(request):
return render_to_response('pick.html')
My pick.html:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>FYP - Is Your Network Safe?</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<link href="{% static 'vendor/bootstrap/css/loader.css' %}" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="{% static 'vendor/fontawesome-free/css/all.min.css' %}" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'css/grayscale.min.css' %}" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">TestPage</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="{% url 'pick' %}">Home</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="{% url 'logout' %}">Logout</a>
</li>
</ul>
</div>
</div>
</nav>
</body>
</html>
My login.html:
{% if msg %}
<script>
alert('{{msg}}');
</script>
{%endif%}
{% if msgg %}
<script>
alert('{{msgg}}');
</script>
{%endif%}
{% load staticfiles %}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Spectral SC">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" href="{% static 'css/logincss.css' %}">
</head>
<style>
h1{
color:#edf1ff;
text-shadow: 5px 5px 10px black;
}
.headerone{
font-family: 'Spectral SC', serif;
padding: 110px 0;
text-align: center;
}
body{
background-color: black;
}
</style>
<body>
<div class="login-dark">
<form action="/post_sign/" method="post">
{% csrf_token %}
<div class="illustration"><i class="icon ion-ios-locked-outline"></i></div>
<div class="form-group">Email: <input type="email" name="email" autocomplete="off" required></div>
<div class="form-group">Code: <input type="password" name="pass" autocomplete="off" required></div>
<input class="btn btn-primary btn-block" type="submit" value="Sign In"><br>
Can't Login? Click me, i'll help.</form>
</div>
</section>
<footer class="bg-black small text-center text-white-50">
</footer>
</body>
</html>
My urls.py
from django.contrib import admin
from django.urls import path
from myapp import views as v
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.conf.urls import include
from myapp.views import postregister, logout_view
urlpatterns = [
path('pick/', v.pick, name="pick"),
path('', v.signIn, name="login"),
path('post_sign/', v.postsign),
path('accounts/logout/', logout_view, name="logout")
]
urlpatterns += staticfiles_urlpatterns()
Just to put a note that the url shows http://127.0.0.1:8000/?next=/pick/ after clicking on the 'Home' button. Is there a way I can resolve this issue or any suggestions on how do I get this to work?
Since you are using HTTP instead of HTTPS, check if the following settings are set to false;
SESSION_COOKIE_SECURE
CSRF_COOKIE_SECURE
SECURE_SSL_REDIRECT
I am trying to pass an index back to python from the user on click in a Flask template. I am already getting information from the same route I'm trying to pass the index to, but I have not figured out how to POST to it. I have put the index value inside the <button>, which is inside the <form>.
Here's my template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello world!</title>
</head>
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=text/javascript>
$(function() {
$('a#test').bind('click', function() {
$.getJSON('/download_file',
function(data) {
//do nothing
});
return false;
});
});
</script>
<div>
<h1>messages list</h1>
<div>
<ol>
{%for index, message in enumerate(messages)%}
<li>{{ index }}{{ message.date }}-{{message.name}}</li>
<form method="POST">
<input type="hidden" value="{{index}}" name="index" />
<a href="" id=test><button value="index" class='btn btn-default'>Download</button></a>
</form>
{%endfor%}
</ol>
</div>
</div>
</body>
</html>
and my '/download_file' route
#app.route('/download_file', methods=['POST'])
def save_doc():
index = request.form.get('index')
filepath = os.path.join(os.path.expanduser('~') + r'\Desktop', filename)
messages_list[0].document.save(filepath)
return 'yo'
There's nothing on your form that actually submits the value of index. This is assuming you want to do a standard form submit (instead of ajax):
You may want to add something like <input type="hidden" value="{{index}}" name="index" /> to your form, along with index = request.form.get('index') in your route.
Data is not being sent from front end to back end and im using Html and ajax for the front end and linking up part
//signup.html
<!DOCTYPE html>
<html lang="en">
<head>
<script src= "../static/jquery-3.3.1.min.js"></script>
<script src= "../static/sha1.min.js"></script>
<script src = "../static/sha1.js"></script>
<script>
$(function(){
$('.btnblock').click(function(){
var user = $('#inputUsername').val();
var pass = sha1($('#inputPassword').val());
//alert(pass);
//alert(JSON.stringify({username : user, password : pass}))
$.ajax({
url : 'http://localhost:5000/api/v1/users',
data : JSON.stringify({username : user, password : pass}),
type : 'POST',
method : 'post',
ContentType : 'text/plain',
dataType: 'json',
success: function(response){
alert(response);
},
error: function(error){
alert(error);
}
});
});
});
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<center>
<h1> Add user. </h1>
</center>
</head>
<body background="{{ url_for('static', filename='home/background.jpeg')}}">
<div class="container">
<form class="form-signin" enctype="multipart/form-data" role="form">
<input type="text" id="inputUsername" name="username" class="form-control" placeholder="Username" required autofocus>
<br>
<br>
<input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>
<br>
<br>
<button class="btnblock" type="submit">Register</button>
</form>
</div>
</body>
</html>
and the code which process these requests from the frontend is:
def addUser():
if(request.method == 'POST'):
##print(request._dict_)
print("Receiving data....")
data = request.data.decode()
print(data)
the problem here is what ever credentials and data added in the front-end isn't getting processed in the back-end, print(request.data) returns empty and does not return the added data each time and i did try debugging it a few times and googling what would the mistake be but still got no progress , Thank you for the assistance
I am trying to build a blog using flask. SimpleMDE is used as post editor(html code below). I want to save the markdown content to local file and render by flask-misaka in jinja2.
In SimpleMDE, I can get raw markdown content by simplemde.value(). But when I pass simplemde.value() to var in javascript. "\n" is missing aftering passing. I think it may have some "magic" tools in javascript. The html code return 2 alert message, first message contains line feed, the second doesn't.
Could somebody give me some hits about this problems?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Editor</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel='stylesheet' href='.{{ url_for("static", filename="css/simplemde.min.css") }}'>
<script src='.{{ url_for("static", filename="js/simplemde.min.js") }}'></script>
</head>
<script type='text/javascript'>
function check() {
var raw = simplemde.value();
alert(raw);
document.testform.markdown_raw.value=raw;
alert(document.testform.markdown_raw.value);
}
</script>
<body>
<form method='post' class='form' role='form' name='testform'>
<div class="form-group " style="padding-top:10px">
<input class="form-control" id="post_title" name="post_title" type="text" value="Title?">
</div>
<div class="form-group">
<input class="form-control" id="markdown" name="post_content" type="textarea" value="">
</div>
<div class="form-group" style='display:none'>
<input class="form-control" id="markdown_raw" name="markdown_raw" type="textarea" value="Origin">
</div>
<div>
<input class='btn btn-default' onclick="check();" id='submit' name='submit' type='submit' value='Save'>
<input class='btn btn-default' id='publish' name='publish' type='submit' value='Publish'>
</div>
</form>
<script type='text/javascript'>
var simplemde = new SimpleMDE({ element: document.getElementById('markdown') });
</script>
</body>
</html>
If you want to get raw markdown, just use simplemde.value().
When you put raw markdown into normal textarea, it turns into pure text.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Editor</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.css">
<script src="https://cdn.jsdelivr.net/simplemde/latest/simplemde.min.js"></script>
</head>
<body>
<form method='post' class='form' role='form' name='testform'>
<div class="form-group " style="padding-top:10px">
<input class="form-control" id="post_title" name="post_title" type="text" value="Title?">
</div>
<div class="form-group">
<textarea class="form-control" id="markdown" name="post_content"></textarea>
</div>
<div>
<input class='btn btn-default' onclick="" id='submit' name='submit' type='submit' value='Save'>
<input class='btn btn-default' id='publish' name='publish' type='submit' value='Publish'>
</div>
</form>
<script type='text/javascript'>
var simplemde = new SimpleMDE({ element: document.getElementById('markdown') });
</script>
</body>
</html>
Get the content:
from flask import Flask, render_template, request
app = Flask(__name__)
#app.route('/', methods=['GET', 'POST'])
def test():
if request.method == 'POST':
raw_md = request.form['post_content']
return render_template('index.html')
if __name__ == '__main__':
app.run(debug=True)
I am learning to create a website using django. I have a homepage through which user can select city. The next page shows the list of hotels.It works properly,but when page is refreshed it gives me error
This is my html file for list page.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
<script type="text/javascript" src="../js/typeahead/0.11.1/typeahead.bundle.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
{% load static %}
<script src="/static/typeahead.js "></script>
</head>
<body>
<div >
<div style="float:left; background-color:#d9d9d9;margin-top:100px;width:30%;height:800px;">
<h2 style="text-align:center;">Filters</h2>
<div style="width:95%; margin-left: 10px; " >
<form method="post" data-ajax="false" action="{% url 'list' %}">
{% csrf_token %}
<div data-role="rangeslider" data-mini="true" style="width:100%">
<label for="range-1a">price:</label>
<input name="range-1a" id="range-1a" min="0" max="100" value="0" type="range">
<label for="range-1b">Rangeslider:</label>
<input name="range-1b" id="range-1b" min="0" max="100" value="100" type="range">
</div>
<input type="submit" value="Submit">
</form>
</div>
</div>
<div style=" float:right;margin-right:30px;margin-top:100px;width:60%;height:80%">
{% for hotel in city_list %}
{% load static %}
<div class="col-md-4" style="width:45%;border:0;position:relative;">
<div class="thumbnail" style="height:300px; background-color:black;border:0;border-radius:0;position:relative;box-shadow:0;" >
<a href="/w3images/lights.jpg" data-ajax="false">
<img src="{% static hotel.photo.url %}" style="border:0;height:85%;width:100%;" >
<div class="caption">
<p style="color:white;">Name</p>
</div>
</a>
</div>
</div>
{% endfor %}
</div>
</div>
</body>
</html>
This is my views.py
def homepage(request):
hotel_list=Hotels.objects.all()
context={'hotel_list':hotel_list}
return render(request, 'polls/homepage.html',context)
def wholelist(request):
hotelvar=request.POST.get('service_type')
if hotelvar=='Hotels':
city_list=Hotels.objects.filter(city_name__iexact=request.POST.get('searchabc'))
if not city_list:
hotel_list=Hotels.objects.all()
context={'hotel_list':hotel_list}
return render(request, 'polls/homepage.html',context)
pricemin=200
pricemax=800
context={'pmin':pricemin,'pmax':pricemax,'city_list':city_list}
return render(request, 'polls/list.html',context)
i get the following error when refreshed
UnboundLocalError at /polls/wholelist/
local variable city_list referenced before assignment
city_list is being passed from the homepage, but when page is reloaded it not being passed. Is there a way to pass it when page is refreshed?
when hotelvar not equal to 'Hotels', variable city_list is not set
def wholelist(request):
hotelvar=request.POST.get('service_type')
city_list = None
if hotelvar=='Hotels':
city_list=Hotels.objects.filter(city_name__iexact=request.POST.get('searchabc'))
if not city_list:
hotel_list=Hotels.objects.all()
context={'hotel_list':hotel_list}
return render(request, 'polls/homepage.html',context)
pricemin=200
pricemax=800
context={'pmin':pricemin,'pmax':pricemax,'city_list':city_list}
return render(request, 'polls/list.html',context)