<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.
Related
The problem is that I have two buttons in a form. Additionally, both buttons are running though the same function. How do i force the "Save" button to run though a different function when clicked?
I can post the python code later if necessary.
<form action="/predict" class="form-upload" method="post" enctype="multipart/form-data">
<h1 class="h3 mb-3 font-weight-normal">Please Upload Image</h1>
<input autofocus class="form-control" id="image" name="image" required type="file"><br>
<button type = "submit" name = "predict" formaction="/predict" class="btn btn-lg btn-primary btn-block">Predict</button>
<button type = "submit" name = "save" formaction = "/add" class="btn btn-lg btn-primary btn-block" >Save</button>
{% if image_loc %}
<img id="img" class="mb-4" src="static/{{ image_loc }}" alt="" width="256" height="256">
<h3 id="nm" class="h3 mb-3 font-weight-normal">Prediction: {{ p }}</h3><br>
{% endif %}
</form>
You can use formaction attribute on the button. It overrides the action attribute of the form.
MDN
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.
Here is the code for my login form:
<form class="user" action="/returningAgent/" method="post" >
<div class="form-group">
<input type="email" class="form-control form-control-user" id= "InputEmail" name="InputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address...">
</div>
<div class="form-group">
<input type="password" class="form-control form-control-user" id="InputPassword" name="InputPassword" placeholder="Password">
</div>
<div class="form-group">
<div class="custom-control custom-checkbox small">
<input type="checkbox" class="custom-control-input" id="customCheck">
<label class="custom-control-label" for="customCheck">Remember Me</label>
</div>
</div>
<a href="/returningAgent/" class="btn btn-primary btn-user btn-block">
Login
</a>
<hr>
<a href="/returningAgent/" class="btn btn-google btn-user btn-block">
<i class="fab fa-google fa-fw"></i> Login with Google
</a>
<a href="/returningAgent/" class="btn btn-facebook btn-user btn-block">
<i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
</a>
</form>
and here is the code that the form submission triggers:
def returningAgent(request):
#try:
x = Agent.objects.get(bizEmail = request.POST["InputEmail"], password = request.POST["InputPassword"])
diction = {
'f' : x.firstName,
'l' : x.lastName,
'e' : x.bizEmail
}
return render(request, 'index.html', diction)
#except:
#return HttpResponseRedirect('/404/')
I have tried switch request.POST to request.POST.get, and have the name of the field within the HTML form code, yet I still continue to get an error everytime I try to use credentials that are already in my database. Any ideas?
You should update you html form Login a href to button i give
<button type="submit" class="btn btn-primary btn-user btn-block">
Login
</button>
error you actually get in request.POST.get('InputEmail') if you print in your view you get this error because data not getting you use a href in login so it will get request and not actual submit form
and also see get method dictionary produce this error not actually get data if you want get default data when data not pass by request get default value get('key name',default value)
so need to update as i gave in a href to button then let me what's happened
I have the following WTF form
class config_reports(FlaskForm):
test2use = SelectMultipleField('Choose Test(s):', [DataRequired()], choices=[('', '')])
display_cuts = BooleanField('Display Proficiency Cuts?', default = True)
submit = SubmitField('Run Report')
and now I'm trying to fancy up my checkbox to use the example found here, https://getbootstrap.com/docs/4.0/components/forms/, which uses this code
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
Within my jinga2 template file, I'm trying the following. Some of the style is applied, but my checkbox isn't clickable. Any advice on how to properly apply the styling here?
<div class = 'col'>
<div class="formwrapper">
<form method="POST" action="{{url_for('config_tools.config_reader')}}">
<div class="form-field">
{{form2.test2use.label}}
{{form2.test2use (class="form-control", required=False)}} <br>
<div class="custom-control custom-checkbox">
{{form2.display_cuts.label(class="custom-control-label")}}
{{form2.display_cuts (class="custom-control-input") }}<br>
</div>
{{form2.submit(class = "btn btn-primary")}} <br><br>
</div>
</form>
</div>
</div>
I am trying to put a button inside an email input in a Django form.
This is the code with the button next to the email input:
<div class="container" id="notifyEmailFormContainer">
<form action="{% url "landing:notify_email_add" %}" method="post" id="notifyEmailForm">
{% csrf_token %}
<div class="form-group row">
<div class="col-sm-10 input-group" id="emailInput">
<div class="input-group-addon" id="comingSoonEmailIcon"><i class="fa fa-envelope fa fa-2x" aria-hidden="true"></i></div>
<input class="form-control" type="email" name="email" placeholder="Your email...." maxlength="255" required id="id_email"/>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-block btn-primary" onclick="addNotifyEmail()" id="submitNotifyEmail">Notify Me</button>
</div>
</div>
</form>
</div>
I have a tried a couple answers in similar questions but it seems I can't get it to work.