We Keep Coding

Hi My Django Forms.cleaned_data is not giving me any output. Can someone help me?

I am trying to create a page to generate passwords and the user will select either level 0 or level 1 for varying strengths of the password. And I am not able to get the users selection of level 0 or level 1 using the radio button.
My views.py
from django.shortcuts import render
import random
import string
from types import NoneType
from random_word import RandomWords
from .forms import CHOICES
def password(request):
passw = passGenAdvanced()
form = CHOICES(request.POST)
if form.is_valid():
selected = form.cleaned_data.get("password")
print(selected)
return render(request, 'generator/password.html', {"password":passw})
My forms.py
from django import forms
password = [('0','Level 0'), ('1', 'Level 1')]
class CHOICES(forms.Form):
password = forms.ChoiceField(choices=password, widget=forms.RadioSelect)
My html file
{% extends 'generator/base.html'%}
{% block content %}
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
<form method = "POST">
{% csrf_token %}
<div class="form-check">
<input class="form-check-input" type="radio" name="password" id="Level0">
<label class="form-check-label" for="password">Level 0</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="password" id="Level1">
<label class="form-check-label" for="password">Level 1</label>
</div>
<button type="submit" class="button">Submit</button>
</form>
<h5 class="alert alert-success">Your Generated Password: <strong>{{password}}</strong></h5>
{% endblock %}
Sorry if the problem may seem obvious, I am new to django.
After printing out the form.error it keeps saying this "on" it isn't even one of my radio options. So how does it give me that?

The radio inputs are missing the value so add value for each radio and try again.

Selenium WebDriver Upload File With Input Type of "text"

I'm attempting to upload a file into a form, but there is no input element with the type of "file".
I'm able to remove the "readonly" attribute and send keys to the input text box, but it throws a general error when I click the upload button. (just a popup with no useful information)
This is the element as presented:
<input type="text" autocomplete="off" class="form-control animate-show
ng-pristine ng-empty ng-invalid ng-invalid-required ng-touched"
id="filepath" ng-model="model.name" ng-required="configuration.Required"
readonly="" required="required" style="">
This is the element after selecting a file manually:
<input type="text" autocomplete="off" class="form-control animate-show
ng-pristine ng-touched ng-not-empty ng-valid ng-valid-required"
id="filepath" ng-model="model.name" ng-required="configuration.Required"
readonly="" required="required" style="">
This is the element after removing "readonly" and sending my file path via selenium:
<input type="text" autocomplete="off" class="form-control animate-show
ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required"
id="filepath" ng-model="model.name"
ng-required="configuration.Required" required="required" style="">
Test setup:
Ubuntu 20
python 3.8
chrome 91.0.4472.114
selenium 3.141.0
Update:
I found the input field below with the type of "file", but it's located at the bottom of the page. (not within the expected modal)
Passing the path to this element was successful (no selenium errors), but the upload process still failed.
<label tabindex="-1" style="visibility: hidden; position: absolute;
overflow: hidden; width: 0px; height: 0px; border: none; margin: 0px;
padding: 0px;">upload<input type="file" ngf-select=""
ng-model="model" ng-show="!model"></label>
"upload"
<input type="file" ngf-select="" ng-model="model" ng-show="!model">
<label tabindex="-1" style="visibility: hidden; position: absolute;
overflow: hidden; width: 0px; height: 0px; border: none; margin: 0px;
padding: 0px;">upload
<input type="file" ngf-select="" ng-model="model" ng-show="!model">
</label>

It turns out there was an element with type="file in a different section of the page. Accessing the correct element and using send_keys with the file path worked perfectly. The original text box in question was populated with the file name and the file upload occurred properly.
Thank you for everyone's input, especially #YaDavMaNish with the syntax that ultimately got this working.

Trying to fill a page with pictures in a for loop

I have a loop that fills the page with pictures but they do so vertically.
{% for i in range(amount) %}
<div class="col-xs-12 col-sm-6 col-md-3 col-lg-3">
<div class="contents-block">
<div class="image"><img src="/static/assets/img/uploaded/coro.png" />
</div>
</div>
</div>
{% endfor %}
</div>
How do i make it so that the pictures fill the entire page in a grid?

Your images are lining up in a column because all your <img> tags are under a parent column. And the reason why the right side part is empty and the single image is not covering the entire width is due to the size of the image.
To answer your question on how to make an image grid covering the entire width, my idea will be to contain all the images inside a div and use n columns
<div class="images">
{% for i in range(amount) %}
<img src="/static/assets/img/uploaded/coro.png" />
{% endfor %}
</div>
and the CSS will be
.images {
/* Prevent vertical gaps */
line-height: 0;
column-count: 5; /* this depends on size, no.of images and viewport(for making it responsive) */
column-gap: 0px;
}
.images img {
width: 100% !important;
height: auto !important;
padding: 3px;
}

How to display information for a specific item from a database through a for loop?

I'm using the web2py frame work and this is what i'm trying to achieve;
I have contact details of different places in my DB, the names of these different places are displayed as links in a page, what i want is for the contact details of a place to be displayed in a tooltip when i click on the link name of that place. But that is not happening! What happens is that when i click the name of the place i get tooltips with different contact information of different places stacked on top of each other!
As stated above, what i want is for the contact details of a place to be displayed in a tooltip when i click on the link name of that place., can anyone please assist me get this right.
THE MODEL CODE
db.define_table('services',
Field('service_name', requires=IS_NOT_EMPTY()),
format='%(service_name)s', migrate=False, fake_migrate=True)
db.define_table('company',
Field('logo', 'upload'),
Field('company_name', requires=IS_NOT_EMPTY()),
Field('services', 'reference services'),
#Field('tlamelo', 'reference tlamelo'),
Field('product', 'reference product'),
Field('tel', requires=IS_NOT_EMPTY()),
Field('email', requires=IS_NOT_EMPTY()),
Field('fax', requires=IS_NOT_EMPTY()),
Field('cell', requires=IS_NOT_EMPTY()),
Field('facebook', requires=IS_NOT_EMPTY()),
Field('twitter', requires=IS_NOT_EMPTY()),
Field('website', requires=IS_NOT_EMPTY()),
Field('postal_address', requires=IS_NOT_EMPTY()),
Field('located_at', requires=IS_NOT_EMPTY()), migrate=False, fake_migrate=True)
CSS TOOLTIP CODE
#branch1 {outline:none; position: relative; font-weight: bold;}
#branch1 {text-decoration:none;}
span.contacts1
{
display:inline;
position:absolute;
color:#111;
border:1px solid #000000;
background: #000000;
opacity: 0.9;
color: white;
font-weight: bold;
font-size: small;
border:1px solid #000000;
border-radius: 25px;/*border-radius: 5px 100px 5px;*/
z-index:1;
left: 40px;
display:none;
padding:14px 15px;
margin-top:-56px;
margin-left:70px;
width:500px;
line-height:16px;line-height:20px;
}
CONTROLLER CODE
def companies():
results=db.services(request.args(0))
rslts=db(db.company.services==results.id).select(db.company.ALL, orderby=db.company.company_name)
return locals()
THE VIEW CODE
<script>
$(document).ready(function(){
$('.branch1').click(function(e) {
$(this).each(function(){
$('.contacts1').fadeIn();
e.preventDefault();
});
});
$('img#close').click(function(e)
{
$('.contacts1').fadeOut();
e.preventDefault();
});
});
</script>
<div class="comps">
<span class="companies">COMPANIES (A-F)</span><br /><br />
{{letters=['A', 'B', 'C', 'D', 'E', 'F']
for company in rslts:
if company.company_name[0] in letters:
company.company_name
}}
{{=company.company_name}}<br />
<span class="contacts1">
<img src="{{=URL('static', 'images/close.png')}}" style="width: 50px; position: absolute; top:0px;right:0px;" id="close"/>
<div class="info" id="logo">
<img id="companyLogo" width="140px" src="{{=URL('download',args=company.logo)}}" /><br />
<span style="position: absolute; bottom:0px; left: 10px;">SESOA&trade</span>
</div>
<div class="info" style="padding-left:5px; border-left: solid 1px white;" id="details">
<span class="companyName">{{=company.company_name}}</span>
<hr class="divider" />
<span class="contact" id="cell">TEL: </spanM <strongstyle="color:green;">{{=company.tel}}</strong><br />
<span class="contact" id="cell">EM#IL: </span> <strong style="color:green;">{{=company.email}}</strong><br />
<span class="contact" id="cell">CELL: </span><strong style="color:green;">{{=company.cell}}</strong><br />
<span class="contact" id="fb">Facebook: </span> <strong style="color:green;">{{=company.facebook}}</strong><br />
<span class="contact" id="twit">Twitter: </span> <strong style="color:green;">{{=company.twitter}}</strong><br />
<span class="contact" id="e_mail">WEBSITE: </span> <strong style="color:green;">{{=company.website}}</strong></span><br />
<span class="contact" id="cell">FAX: </span> <strong style="color:green;">{{=company.fax}}</strong><br />
<span class="contact" id="cell">LOCATION: </span> <strong style="color:green;">{{=company.located_at}}</strong><br />
</div>
</span>
{{pass}}
{{pass}}
</div>
Click this link to view the problem first hand Contacts Problem Example

In the click handler, contacts are shown via:
$('.contacts1').fadeIn()
However, in the for loop, each contact gets a "contacts1" class, so the above selector selects all the contacts to be faded in whenever any link is clicked.
Instead, you must add a unique identifier to each contact and select only that contact when its link is clicked.
Try changing:
{{=company.company_name}}<br />
<span class="contacts1">
to:
{{=company.company_name}}<br />
<span class="contacts1" id="{{=company.id}}">
Notice that the company id is added as the unique id for the contacts element, and that same id is added as the data-id attribute of the associated link.
Then, set up the click handler like this:
$('.branch1').click(function(e) {
const id = $(this).data('id'); // Extract the data-id attribute of the link.
$('#' + id).fadeIn(); // Select the contact with that id.
e.preventDefault();
});
Also, note that in an HTML page, each id attribute must be unique, but you re-use the same id values in each loop (i.e., "branch1", "close", "logo"). You even re-use the "cell" id multiple times within a single iteration of the loop. It is not clear you even need all of those id's, but if you do need any of them, make sure they are unique (e.g., something like "{{='branch%s' % company.id}}").

How i can get data in Python Script using Flask [duplicate]

This question already has answers here:
Post values from an HTML form and access them in a Flask view
(2 answers)
Closed 5 years ago.
I have written a html code,which will get the 3 inputs from user.
I have attached html code snippet as follows;
You can give it a try running this code. this code basically accepts 3 values from the user those are team1,team2 and match_id and upon clicking on predict button, I want those value to go in my python script where i have written machine learning algorithm.
<!DOCTYPE html>
<html>
<head>
<title>Criclytics</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
<script src="jquery.min.js"></script>
<style type="text/css">
#import url(http://fonts.googleapis.com/css?family=Exo:100,200,400);
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:700,400,300);
body{
margin: 0;
padding: 0;
background: #fff;
color: black;
font-family: Arial;
font-size: 25px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bcg-img{
width: 100vw;
height: 100vh;
z-index: -1;
position: fixed;
background-image: url("bg-blurred.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
table, td, th {
text-align: center;
}
table {
border-collapse: collapse;
width: 50%;
}
th, td {
padding: 15px;
}
.button1 {width: 250px;}
</style>
</head>
<body>
<div class="bcg-img"></div>
<div class="jumbotron" align="center" style="opacity:0.60">
<h1 align="center"><b>Criclytics</b></h1>
Predicting chances of winning
</div>
<form onsubmit="http://localhost:5000/">
<div class="col-xs-3">
<label for="ex2">Team 1</label>
<input class="form-control" id="team1" id="team1" type="text" placeholder="Enter team 1">
</div>
<div class="col-xs-3">
<label for="ex2">Team 2</label>
<input class="form-control" id="team2" id="team2" type="text" placeholder="Enter team 2">
</div>
<div class="col-xs-3">
<label for="ex2">Match ID:</label>
<input class="form-control" id="matchid" id="matchid" type="number" placeholder="Enter match ID ">
</div>
<br>
<input type="submit" value="Predict" class="btn btn-info btn-lg" style="width: 250px"/>
<!--
<div width="cover" padding="30%"><!--put your graph here</div>-->
</form>
</body>
</html>
I am using flask to create the server on the localhost:5000 and i have written code, as follows;
from flask import Flask, render_template
from flask import request
app = Flask(__name__)
print("hello")
#app.route('/')
def getrender():
return render_template('/cric.html')
#app.route('/',methods=['GET','POST'])
def getinfo():
if request.method == 'GET':
a=request.args.get('team1')
b=request.args.get('team2')
c=request.args.get('matchid')
print(a,b,c)
return a,b,c
if __name__=='__main__':
app.run(debug=True)
html file runs perfectly on localhost:5000 but I dont know how I can access those user input values and use it as input for my machine learining algorithm.
I just want help how to access those team1,team2 and match_id and get them in variables so that i can use them in my program.

You have a problem with your form,
all your input doesn't have a name attribute and instead it has 2 id attributes.
So change one id attribute to name
here is the reason :
Definition and Usage
The name attribute specifies the name of an element.
The name attribute is used to reference elements in a JavaScript, or
to reference form data after a form is submitted.
Note: Only form elements with a name attribute will have their values passed when submitting a form.
Your Form should be like this :
<form method="POST" action="{{url_for('getinfo')}}">
<div class="col-xs-3">
<label for="ex2">Team 1</label>
<input class="form-control" name="team1" id="team1" type="text" placeholder="Enter team 1">
</div>
<div class="col-xs-3">
<label for="ex2">Team 2</label>
<input class="form-control" name="team2" id="team2" type="text" placeholder="Enter team 2">
</div>
<div class="col-xs-3">
<label for="ex2">Match ID:</label>
<input class="form-control" id="matchid" name="matchid" type="number" placeholder="Enter match ID ">
</div>
<br>
<input type="submit" value="Predict" class="btn btn-info btn-lg" style="width: 250px"/>
<!--
<div width="cover" padding="30%"><!--put your graph here</div>-->
</form>
In your views functions, you should have 2 with different URLs: one for the home page and another for form submission
#app.route('/')
def getrender():
return render_template('/cric.html')
#app.route('/predict', methods=['GET', 'POST'])
def getinfo():
if request.method=='POST':
a=request.form.get('team1')
b=request.form.get('team2')
c=request.form.get('matchid')
print(a,b,c)
else :
return 'get Im in '
return 'OK'

My advice:
Assign another route for the html page
#app.route('/cric')
def getrender():
return render_template('/cric.html')
Update method check from GET to POST in function getinfo and use request.form to get the parameter
#app.route('/',methods=['GET','POST'])
def getinfo():
print request.method # print the request.method for debug purpose
if request.method == 'POST':
a=request.form.get('team1')
b=request.form.get('team2')
c=request.form.get('matchid')
print(a,b,c)
return render_template('/cric.html')
And update the form header and assign three input with name in html:
<form action="http://localhost:5000/" method="post">
...
<input class="form-control" id="team1" name="team1" type="text" placeholder="Enter team 1">
...
Then you can visit the '/cric' to view the html page, then submit the form, which will invoke a post request to '/' and print the parameters.