I am making a website that has a submit button and multiple input fields in different divs. I am using Flask to make the website, and I want to log what is submitted from those input fields into separate variables, to eventually be stored in a database. My problem is that whenever I press the submit button, it only works with one text box, the one closest to it in the HTML.
This is the Flask code for getting the text from the input box:
#app.route('/', methods=["GET", "POST"])
def home():
if request.method == "POST":
name = request.form.get("name")
notes = request.form.get("notes")
print(notes)
return render_template("messaging.html")
Here's the HTML for the actual inputs and submissions:
<div class="content">
<div class="page-top">
<input type="text" class="user-input-box" id="name" name="name" placeholder="Name" autocomplete="off">
</div>
<div class="user-input" id="user-input">
<input type="text" class="user-input-box" name="notes" placeholder="Notes" autocomplete="off">
</div>
<button type="submit" class="message-send">Send</button>
</div>
It only works with the notes input box, not the name.
If you can help that would be great, sorry if the code isn't very good I'm new to HTML and Flask. Thanks!
any time you use button with type "submit", must use form. and button can submit your form.
Watching some HTML tutorials won't be a bad idea if you faced a challenge in forms.
<form id="form1" action="/yourRoute" method="POST"></form>
<div class="content">
<div class="page-top">
<input type="text" class="user-input-box" id="name" name="name" placeholder="Name" autocomplete="off">
</div>
<div class="user-input" id="user-input">
<input type="text" class="user-input-box" name="notes" placeholder="Notes" autocomplete="off">
</div>
<button type="submit" class="message-send">Send</button>
</div>
</form>
Related
I have two forms on my page, each with its own fields and submit button, but whenever I use any of them, they always check the overall page fields instead of just the form they're contained in...
The simulator.html has two forms, the first one is this:
<div class="forms">
<div class="form-1">
<form method="post" action="{{ url_for('core.simulator') }}">
<div class="container">
<div class="row g-3">
<div class="col-sm-3">
<label class="form-label"><b>Capital:</b></label>
<input type="text" class="form-control" name="capital_html" required>
</div>
<div class="col-sm-3">
<label class="form-label"><b>Price:</b></label>
<input type="text" class="form-control" name="price_html" required>
</div>
</div>
</div>
<br>
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<button id="btn" type="submit" class="btn btn-info">Launch simulation!</button>
</div>
</form>
<br>
<p>Units to purchase: <b>{{simulation_units}}</b>
</div>
</div>
And the second one is this:
<h3> Screener</h3>
<div class="forms">
<div class="form-2">
<form method="post" action="{{ url_for('core.simulator') }}">
<div class="container">
<div class="row g-3">
<div class="col-sm-3">
<label class="form-label"><b>Ticker:</b></label>
<input type="text" class="form-control" name="ticker_symbol_html" placeholder="Enter Ticker Symbol" required>
</div>
</div>
</div>
<br>
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
<button id="btn" type="submit" class="btn btn-info">Launch!</button>
</div>
<p>Symbol <b>{{simulation_symbol}}.
</form>
</div>
</div>
The views.py file has the back-end code for each, the first one is this:
def capital_simulator():
if request.method == 'POST':
simulation_capital = request.form.get('capital_html', '')
simulation_price = request.form.get('price_html', '')
try:
simulation_units = math.floor(float(simulation_capital) / float(simulation_price))
except KeyError:
simulation_units == 0
return render_template('simulator.html',form1=form,capital_html=simulation_capital,price_html=simulation_price,simulation_units=simulation_units)
And the second form back-end script is this:
def screener():
if request.method == 'POST':
ticker_symbol = request.form.get('ticker_symbol_html', '')
return render_template('simulator.html',ticker_symbol=ticker_symbol_html,ticker_symbol=simulation_symbol)
I thought by specifically calling the mentioned fields and containing them into forms classes, I would avoid an overall validation, but right now I'm failing to make the submit button focus on their own forms. How can I fix this, please?
You have two forms. One is within the 'form-1' div. One is within the 'form-2' div. Each one has its own <form> and </form> tags, which means they are separate forms. The first form contains two <input> fields: one called capital_html, one called price_html, and a button called btn. The second form has one <input> field called ticker_symbol_html and a button called btn.
Let's say the user fills in the first two fields and clicks the first button. That's going to send a request to whatever the URL is in the <form> tag. In the data, it will send three things:
capital_html=xxx
price_html=yyy
btn=submit
That's it. That's all you get. You don't get any fields from the other form. If the user clicks the other form, all you will get is
ticker_symbol_html=xxx
btn=submit
The problem, as you can see, is there's no easy way for you to tell which form was submitted. If you have to use the same URL for both, the usual way to solve this is to add a hidden field that gets sent with the data, like:
<input type=hidden name="ident" text="form1">
and in the second one:
<input type=hidden name="ident" text="form2">
Now, your handler can say
if request.form.get("ident") == "form1":
# Go handle first form.
else:
# Go handle second form.
I am using the following code to enter my username and password on a website and then login (by sending the enter key)
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
browser = webdriver.firefox()
browser.get('http://www.example.com')
username = browser.find_element_by_id("username")
password = browser.find_element_by_id("password")
username.send_keys("MyUsername")
password.send_keys("MyPassword")
password.send_keys(Keys.ENTER)
This works as expected however, i run into some trouble when the website validates the fields. Upon pressing enter it returns the message "Username is required" despite the field being completed.
Could this issue relate to the login page using JS or Knockout? If so, im unfamiliar with either of these. Is there a workaround?
Here is the form HTML:
<form class="form-horizontal" action="/Pretend_login" method="post">
<div class="form-group">
<div >
<input data-bind="value:email" name="username" type="email" class="form-control" id="username" placeholder="Email">
</div>
</div>
<div class="form-group">
<div >
<input data-bind="value:password" name="password" type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="form-group" data-bind="visible: error_message().length">
<div>
<span class="text-danger" data-bind="text: error_message"></span>
</div>
</div>
<div class="form-group">
<div >
<a role="button" href="/Forgotten_password">Forgotten password?</a>
</div>
</div>
<div class="form-group">
<div>
<button data-bind="click: login" type="submit" class="btn btn-primary">Sign in</button>
</div>
</div>
</form>
I'm not sure if this applies to your page under test but I have struggled with similar issues on a web application that also uses JavaScript to validate user input. The problem was that this validation only triggered when another input field got the focus. So you can basically try a few things here:
trigger the blur event with JavaScriptExecutor after filling out the field
send_keys(Keys.TAB) after filling out the field
click on any other input field - this should also trigger the blur event
I could only provide Java examples because I have not done anything in Python yet. If this would still be helpful, please let me know.
Java Example for blur event:
String highlight = "arguments[0].blur()";
((JavascriptExecutor) getDriver()).executeScript(highlight, element);
Below is my cherrypy code:
class MyApp:
def link_details(self, **params):
pass
link_details.exposed=True
The below is my html code:
<form name="form1">
<input type="text" name="username"> Click here
</form>
The page gets redirected, but I am not able to access the form request parameters. I want the form to be submitted to the link_details method on the click of a link in the html page. How can I do this?
You're not submitting the form, you're just linking to a different page.
The easiest way to submit a form is by using a submit button:
<form id="form1" action="/link_details" method="post">
<input type="text" name="username" />
<input type="submit" value="Submit" />
</form>
If you want to submit the form with your <a> tag:
<form id="form1" action="/link_details" method="post">
<input type="text" name="username" />
<!-- you can omit the "return false;" part, but since we don't use a "href" attribute on the anchor it does not matter -->
<a onclick="document.getElementById('form1').submit();return false;" target="_self">Submit</a>
</form>
For more information on a form's attributes (such as action and method) please visit https://developer.mozilla.org/de/docs/Web/HTML/Element/form
The relevant part of my flask code is:
#app.route("/process", methods = ["GET", "POST"] )
def process_form():
#checked = request.form.getlist('option')
checked=request.form('option')
with open('checked.txt','w') as file:
file.write("%s"%checked)
# do something with checked array
return checked
and my html looks like:
<div class="container" id='tog'>
<div class="half">
<form action="/process" method="POST">
<input type="radio" name="option" value="original" />
<h3>originak value<h3>
</div>
<div class="half">
<input type="radio" name="option" value="freq" />
<h3>Term Freq<h3>
</div>
</form>
</div>
The idea is that I want to find out which radio button was selected and store the information is a text file. But that does not seem to be working.
I changed the html to:
<form action="/process" method="POST">
<div class="half">
<input type="radio" name="option" value="original" />
</div>
<div class="half">
<input type="radio" name="option" value="freq" />
</div>
<input type="submit" value="Submit">
</form>
and now I get a 400 Bad Request error
You don't have a submit button inside of your form. Add one.
<input type="submit" value="Submit!" />
Also, you probably want to change request.form('option') to request.form['option']
<form method="post" class="form-horizontal" role="form">
<div class="btn-group col-sm-3">
<button id="typeSelect" type="button" name="reportType" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
People <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
...
</li>
...
</ul>
</div>
<div class="form-group">
<label for="inputName" class="col-sm-2 control-label">Name</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inputName" placeholder="Name" name="name" value="{{name}}" onblur="isEmpty(this)">
</div>
</div>
</form>
I have two inputs in my form and I am trying to get the input in my Python code.
report_type = self.request.get('reportType')
name = self.request.get('name')
name is working correctly, but report_type will always be None.
What is the correct way to retrieve the selection in a button (Bootstrap)?
According to the button element specifications:
A button (and its value) is only included in the form submission if the button itself was used to initiate the form submission.
You will have to find another way to pass the value of the button. You could, for example, store the value in a hidden field.