I am writing an update form with flask, wtforms and bootstrap4. This form gets value populated from database. I would like the submit button to be disabled if there is no change made in the value from the database.
for example, if username is stringfield, which comes from database. lets say the value is "abc123", so unless this value is changed by the user, submit button should be disable or atleast do not perform send any post request.
code looks like following
forms
class AccountForm(FlaskForm):
username = StringField('Username', validators=[Length(min=4, max=20), DataRequired()])
submit = SubmitField('Update’)
routes
#app.route("/account", methods=['GET', 'POST'])
def account():
form = AccountForm()
if form.validate_on_submit():
username = str(form.username.data).lower()
# ….. update database
elif request.method == 'GET':
form.username.data = username_from_db
return render_template(‘account.html', form=form)
html
<form method="POST" action="" enctype="multipart/form-data">
{{form.csrf_token}}
<input class="form-control" id="username" name="username" placeholder="Username" required type="text" value=“abc123">
<input type="submit" class="btn btn-success" value="Update">
</form>
You can do this with jquery
$(function(){
var usernameValue = $('#username').val();
$('#username').change(function(){
if ($(this).val() != usernameValue){
$('input.btn-success').prop('disabled', false);
}
});
});
and add in your html the disabled attribute to the submit button
<form method="POST" action="" enctype="multipart/form-data">
{{form.csrf_token}}
<input class="form-control" id="username" name="username" placeholder="Username" required type="text" value=“abc123">
<input type="submit" class="btn btn-success" value="Update" disabled>
</form>
Related
Making a little search engine. The idea is to take input from the user and then based on that, make a redirection to the search page.
The following code:
<form action ="/search.html">
<label for="form-search"></label>
<input type="text" id="form-search" placeholder="TYPE HERE!"><hr>
<input type="submit" name="query" value="Search!">
</form>
Always redirects to the following page regardless of what the input user has given:
/search.html?query=++Search%21++
While (for the input "Suppose This Was Entered") it should go to:
/search.html?query=Suppose++This++Was++Entered
Any help will be appreciated.
The var name used in the query string of the url is the name attribute of the form fields so you need add a name atribute to your text field instead to the submit input.
<form action ="/search.html">
<label for="query"></label>
<input type="text" id="query" name="query" placeholder="TYPE HERE!"><hr>
<input type="submit" value="Search!">
</form>
The id and the name in the text field not necessary has to be the same
You can create a function that gets called when the form submits via the form's onsubmit attribute. From within the funciton you can manipulate your URL generation like below:
Note: return false; is to prevent submitting the form since the return value of the function is passed to the form's onsubmit.
function submitFunction() {
let searchText = document.getElementById("form-search").value.trim();
let form = document.getElementById('myForm');
if(searchText.length > 0) {
document.getElementById("s").value = searchText;
form.action = "/search.html";
form.submit();
} else {
return false;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Title of Your page</title>
</head>
<body>
<form id="myForm" method="get" onsubmit="return submitFunction();">
<label for="form-search"></label>
<input type="text" id="form-search" placeholder="TYPE HERE!" value="" >
<input type="hidden" id="s" name="query" value="" />
<hr>
<input type="submit" value="Search!">
</form>
</body>
</html>
I'm getting an error while working with django urls. I want to pass the value of Name input field after i hit the submit button.
Let's say I've this html form-
<form method='POST' action="{% url 'submittedform' slug=[firstname] %}">
{% csrf_token %}
<div>
<label for="name">Name</label>
<input type="text" name="firstname" id="name">
</div>
<div>
<label for="email">Email</label>
<input type="email" name="useremail" id="email">
</div>
<div>
<label for=phone>Phone</label>
<input type="text" name="phonenumber" id="phone" maxlength="12" pattern="[0-9]{10}">
</div>
<input type="submit" name="" id="btn" value="Submit">
</form>
Here's my view that handling it-
def submittedform(request, slug):
if request.method == 'POST':
# do something here
return render(request,'myapp/welcome.html')
return render(request,'myapp/welcome.html')
and here's my view that's handling it-
urlpatterns = [
path('index/',views.index ,name='index'),
path('welcome/<slug:slug>/',views.submittedform, name='submittedform')
]
I'm not using django forms. How can i get welcome/name working.
If you want to pass a variable to an URL you need redirect with the value:
from django.shortcuts import redirect
return redirect("/welcome/%s/" % slug)
Change the following line
<!-- Removed the bracket -->
<form method='POST' action="{% url 'submittedform' slug=firstname %}">
<!-- Children tags here -->
</form>
Now the variables are accessible in view like
def submittedform(request, slug):
if request.method == 'POST':
name = request.POST['name']
# and more variables as you need
# do something here
# do redirect here or give some message that their form has been
# submitted for their confirmation
return render(request,'myapp/welcome.html')
return render(request,'myapp/welcome.html')
I am using flask and jinja2 to create a simple web app to serve up a simple sklearn algorithm for predictions.
In my html I need to get 4 variables: client id, textid, textid1, textid2
It currently works when I have it all connected to one submit button. But I would like to have two submit buttons to have the client id submit at the top of the page and the textid stuff at the bottom of the page. When I try to have two submit buttons it causes the page to refresh and I not able to connect the client id to the 3 textid vars.
<div class="col">
<div class="form-group">
<label>Enter Customer ID or leave blank for random selection </label>
<form method="POST">
<input name="text", id='text', placeholder="Client ID #", value="{{ client_id|round|int }}" >
<br>
<label>Enter 3 suggestions</label>
<br>
<input name="textid", placeholder="Suggested Model ID #", value="{{ request.form['textid'] }}"/>
<input name="textid1", placeholder="Suggested Model ID #", value="{{ request.form['textid1'] }}"/>
<input name="textid2", placeholder="Suggested Model ID #", value="{{ request.form['textid2'] }}"/>
<input type="submit" >
</form>
</div>
I'm simply grabbing it in flask like this:
#app.route('/suggestion', methods=['GET', 'POST'])
def with_suggestions():
try:
client_id=request.form['text']
except:
#custom function when client id is not entered to get random one
client_id = recommender.random_client_id()
try:
model_id=request.form['textid']
model_id1=request.form['textid1']
model_id2=request.form['textid2']
#other functional code after this
How can I break up the html to get two submit buttons? Thanks!!
Now that you have updated your code, all you need to do is add hidden inputs to identify where the click was originated from. Also Remove the leading slash from your url_for like I did below
<div class="col">
<div class="form-group">
<label>Enter Customer ID or leave blank for random selection </label>
<form method="POST" action={{url_for('suggestion')}}>
<input name="text", id='text', placeholder="Client ID" >
<input type="hidden" name="btn_identifier" value="client_id_identifier" />
<input type="submit" >
</form>
<form method="POST" action={{url_for('suggestion')}}>
<input name="textid", id='text', placeholder="Textid1">
<input name="textid1", id='text', placeholder="textid2 ">
<input name="textid2", id='text', placeholder="Textid3">
<input type="hidden" name="btn_identifier" value="text_id_identifier" />
<input type="submit" value="Submit">
</form>
main.py
from flask import Flask
from flask import render_template, url_for, request, redirect
app = Flask(__name__)
#app.route('/suggestion', methods=['GET', 'POST'])
def with_suggestions():
if request.methods == 'POST':
if request.form['btn_identifier'] == 'client_id_btn':
try:
client_id=request.form['text']
except:
# I think this would go in the second elif statement
model_id=request.form['textid']
model_id1=request.form['textid1']
model_id2=request.form['textid2']
elif request.form['btn_identifer'] == 'text_id_btn':
# run some code to handle a click that was originated from the second button
return render_template('index.html')
if __name__ == '__main__':
app.run()
I made some changes to your code.
index.html
<div class="col">
<div class="form-group">
<label>Enter Customer ID or leave blank for random selection </label>
<form method="POST" action={{url_for('suggestion')}}>
<input name="text", id='text', placeholder="Client ID" >
<input type="submit" >
</form>
<form method="POST" action={{url_for('suggestion')}}>
<input name="textid", id='text', placeholder="Textid1">
<input name="textid1", id='text', placeholder="textid2 ">
<input name="textid2", id='text', placeholder="Textid3">
<input type="submit" value="Submit">
</form>
</div>
main.py
from flask import Flask
from flask import render_template, url_for, request, redirect
app = Flask(__name__)
#app.route('/suggestion', methods=['GET', 'POST'])
def suggestion():
if request.method == 'POST':
try:
client_id=request.form['text']
except:
model_id=request.form['textid']
model_id1=request.form['textid1']
model_id2=request.form['textid2']
return render_template('index.html')
if __name__ == '__main__':
app.run()
Note: Values are store in the variable, print to see
I have simplified the process of fetching the info from multiple buttons. Do note that you require the python flask framework for the "request" method.
home.html
<div class="container mt-5">
<div class="row col-4">
<form method="POST" class="form-register">
<input type="submit" name="submit_button" value="Add Email">
<input type="submit" name="submit_button" value="Clear Recipients">
</form>
</div>
</div>
run.py
if request.method == 'POST':
if request.form['submit_button'] == 'Add Email':
print("add email")
elif request.form['submit_button'] == 'Clear Recipients':
print("clear recipients")
you may refer to the link provided for more example
https://www.codegrepper.com/code-examples/python/checking+if+button+pressed+flask
How to make a form that submit to a text field below
<form action="">
Text: <input type="text" name="firstname">
<input type="submit" value="Submit"><br><br>
Post text: <input type="text" name="firstname">
</form>
You will need to use JavaScript for that:
<script>
function submitted() {
formValue = document.getElementsByName("firstname")[0].value;
document.getElementsByName("firstname")[1].setAttribute("value", formValue); // Copy the value
return false;
}
</script>
<form onsubmit="return submitted()"> <!-- Call submitted when the form is submitted -->
Text: <input type="text" name="firstname">
<input type="submit" value="Submit"><br><br> Post text: <input type="text" name="firstname">
</form>
However, there is no need for a form for that. The onsubmit attribute is mostly used for when you want to alert the user that the form was submitted; the actual submission is done on the server through PHP or something else, and not through JavaScript (since the user has access to the JavaScript code and could change the input checking process as he wishes). Here you could simply have something like this:
<script>
function submitted() {
formValue = document.getElementById("firstname").value;
document.getElementById("postFirstname").setAttribute("value", formValue); // Copy the value
}
</script>
Text: <input type="text" id="firstname">
<button onclick="submitted()">Submit</button>
<br><br> Post text: <input type="text" id="postFirstname">
I want to pass the input field to the form action part covering field; so it looks like /{user}/some_integer_in_field if you know what I mean.
<form action="<c:url value='${user}/?field'/>"
method="post" >
<input type="hidden" name="_method" value="DELETE">
<input type="text" name="field" id="field"/>
<input type="submit" value="DELETE">
</form>
can someone help? is this possible?
I see you've only tagged HTML. What other languages are you using? I recommend you change the desired action via JavaScript, based on the user variable.
HTML
<form>
<input type="hidden" name="_method" value="DELETE">
<input type="text" name="field" id="field"/>
<input type="submit" value="DELETE" id="submitBtn">
</form>
JavaScript
<script>
var sub = document.getElementById('submitBtn');
// When sub is clicked, compare user var
sub.addEventListener('click', function(event){
if(user == 1){
// Perform post action 1
}else if(user == 2){
// Perform post action 2
}
// etc...
});
</script>
You'll have to change the user variable as the field changes as well.