Clicking on the submit button literally does nothing. Submitting a blank form will trigger the validation for the required fields, but filling out the form as required results in the form not submitting/submit button doing nothing. The template has the CSRF_Token, Submit Button is in the form tag, and the form tag has an action attribute pointing in the right direction. Chrome doesn't bark any errors so I'm stuck on how to proceed.
views.py
#blueprint.route("register/", methods=['GET', 'POST'])
def register():
"""Renders register page."""
form = RegisterForm()
if request.method == 'POST':
if not form.validate_on_submit():
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
company, err = get_company(form.organization.data)
if err:
company, err = create_company(form.organization.data)
if err:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
customer, err = get_or_create_customer(
form.first_name.data + " " + form.last_name.data, form.email.data,
company_id, form.position.data, phone_number
)
if err:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
if err:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
else:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=True, message=success_msg, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
return render_template('main/register.html', page_title="Service Registration",
form=form, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
#blueprint.route("register/", methods=['POST'])
def upload_register():
"""Handles file upload POSTs."""
first_name = request.form.get("first_name")
last_name = request.form.get("last_name")
name = request.form.get("first_name") + " " + request.form.get("last_name")
email = request.form.get("email")
filename = request.form.get("filename")
file_type = request.form.get("file_type")
if filename == '':
response = make_response("No selected file")
return response, 400
if check_file_type(file_type):
filename = clean_filename(filename)
filename = secure_filename(filename)
filename = unique_filename(filename)
response = generate_presigned_post(filename, file_type)
# CREATE DB REFERENCE
url = "http://nevcodocs.s3.amazonaws.com/Uploads/{}".format(filename)
instance = CustomerFileUpload.query.filter_by(url=url).first()
if not instance:
instance = CustomerFileUpload(url=url, email=email, name=name)
db.session.add(instance)
db.session.commit()
else:
instance.update(created_at=datetime.utcnow())
return response, 200
else:
response = make_response("Invalid file type")
return response, 500
javascript/jquery
// Enables/disables form submission and colors button accordingly
var enableSubmit = function(enabled) {
if (enabled) {
$('#submit_ticket').removeAttr('disabled');
$('#submit_ticket').removeAttr('style');
} else {
$('#submit_ticket').attr('disabled', 'disabled');
$('#submit_ticket').attr('style', 'background-color: rgba(244, 121, 32, 0.5) !important; border-color: rgba(244, 121, 32, 0.25) !important;');
}
};
$('#ticket-form').submit(function(event) {
enableSubmit(false);
showSpinner(true);
var validated = true;
var didSelectFile = true;
didSelectFile = validateField('#upload') && validated;
validated = didSelectFile && validated;
if (didSelectFile && !validateContentType()) {
$('invalid-upload-alert').show();
validated = false;
} else {
$('#invalid-upload-alert').hide();
}
if (validated) {
$('#filename').val($('#upload').val());
$('#file_type').val($('#upload').prop('files')[0].type);
$.ajax({
type: 'POST',
url: '/register/',
data: $('#ticket-form').serialize()
}).done(function(data) {
var formData = new FormData();
for (var key in data.data.fields) {
formData.append(key, data.data.fields[key]);
}
formData.append('file', $('#upload').prop('files')[0]);
var req = new XMLHttpRequest();
req.onload = function() {
showSpinner(false);
$('#ticket-form-failed').removeClass("support-form-show");
$('#ticket-form-failed').addClass("support-form-hide");
$('#ticket-form').removeClass("support-form-show");
$('#ticket-form').addClass("support-form-hide");
$('#ticket-form-success').removeClass("support-form-hide");
$('#ticket-form-success').addClass("support-form-show");
};
req.onerror = function() {
showSpinner(false);
$('#ticket-form-failed').removeClass("support-form-hide");
$('#ticket-form-failed').addClass("support-form-show");
};
req.open('POST', data.url);
req.send(formData);
}).fail(function(err) {
showSpinner(false);
$('#ticket-form-failed').removeClass("support-form-hide");
$('#ticket-form-failed').addClass("support-form-show");
});
} else {
showSpinner(false);
enableSubmit(true);
}
{% endif %}
if (!validated) {
event.preventDefault();
showSpinner(false);
enableSubmit(true);
}
});
What you have written looks really complicated, why not try something easy like-
#app.route("/connect",methods=['GET','POST'])
def connect():
if request.method=='GET':
return render_template('connect.html')
if request.method=="POST":
return render_template('Thankyou.html',name=request.form['name])
in you views.py and in your connect.html form just write-
<form name="connect" method="post" action="{{ url_for('connect') }}">
<input class="t1" type="text" id="email" name="email" placeholder="Your Email ID">
<input class="t2" type="text" id="name" name="name" placeholder="name">
<button class="btn btn-primary but" type="submit">Send</button>
</form>
the final page, Thankyou.html can look like this-
<p>Thanks for contacting me, {{ name }} </p>
Related
I'm following a tutorial to add new users to my database via a html form and flask. I'm able to run the code using the html template with: localhost/5000
But if I enter the data that should be add to the database I get the following error:
The requested URL was not found on the server. If you entered the URL manually please check your spelling and try again.
with this url: http://localhost:5000/sign_in?stage=login
Python code:
#app.route("/")
def showForm():
# show our html form to the user
t_message = "Python and Postgres Registration Application"
return render_template("register.html", message = t_message)
#app.route("/register", methods=["POST","GET"])
def register():
# get user input from the html form
t_email = request.form.get("t_email", "")
t_password = request.form.get("t_password", "")
# check for blanks
if t_email == "":
t_message = "Please fill in your email address"
return render_template("register.html", message = t_message)
if t_password == "":
t_message = "Please fill in your password"
return render_template("register.html", message = t_message)
# hash the password they entered
t_hashed = hashlib.sha256(t_password.encode())
t_password = t_hashed.hexdigest()
# database insert
t_host = "localhost"
t_port = "5432"
t_dbname = "register_dc"
t_user = "postgres"
t_pw = "=5.k7wT=!D"
db_conn = psycopg2.connect(host=t_host, port=t_port, dbname=t_dbname, user=t_user, password=t_pw)
db_cursor = db_conn.cursor()
# We take the time to build our SQL query string so that
# (a) we can easily & quickly read it
# (b) we can easily & quickly edit or add/remote lines
# The more complex the query, the greater the benefits
s = "INSERT INTO public.users "
s += "("
s += " t_email"
s += ", t_password"
s += ") VALUES ("
s += " '" + t_email + "'"
s += ",'" + t_password + "'"
s += ")"
db_cursor.execute(s)
try:
db_conn.commit()
except psycopg2.Error as e:
t_message = "Database error: " + e + "/n SQL: " + s
return render_template("register.html", message = t_message)
t_message = "Your user account has been added."
return render_template("register.html", message = t_message)
if __name__ == "__main__":
app.run(debug=True)
HTML code:
<script language="JavaScript" type="text/javascript">
function checkform (form)
{
/* isEmpty() returns true and alerts the user if they left a field empty */
function isEmpty (fixwhat, s_called)
{
if (fixwhat=="")
{
alert("Please enter " + s_called);
return true;
} else {
return false;
}
}
/* charCheck() returns false and alerts the user if they used any non-alphanumeric characters */
function charCheck(fixwhat)
{
var validchars = '#-_.0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
if(isValid(fixwhat,validchars))
{
return true;
} else {
alert("Please use only letters or numbers in this field");
return false;
}
}
/* isValid is used by the charCheck() function to look through each 'validchars' one at a time */
function isValid(string,validchars)
{
for (var i=0; i< string.length; i++)
{
if (validchars.indexOf(string.charAt(i)) === -1) {return false;}
}
return true;
}
// Check for empty fields
if (is_empty (form.t_email.value,"your email address")) { form.t_email.focus(); return false;}
if (is_empty (form.t_password.value,"your password")) { form.t_password.focus(); return false;}
//check for weird chars
if (charCheck(form.t_email.value)===false) {form.t_email.focus(); return false;}
if (charCheck(form.t_password.value)===false) {form.t_password.focus(); return false;}
return true ;
}
</script>
<div class='container'>
<form id='frmSignIn' name='frmSignIn' action='/sign_in?stage=login' method='post' onsubmit='return checkform(this);'>
<div class="form-row">
<label for="Email">Email address:</label>
<input type="text" id="t_email" name="t_email">
</div>
<div class="form-row">
<label for="Email">Password:</label>
<input type="text" id="t_password" name="t_password">
</div>
<div class="form-row">
<input type="submit" id="btn_submit_sign_in" value='Sign In'>
</div>
</form>
You are using the route /sign_in in your browser (and in your template), but you declared your route as /register, thus a 404 is returned.
I have a profile method and a profile.html template.
profile.html has a drop-down list of user e-mails. When I select one of them, a modal window appears with this email, and I can send a message to it. I get it via AJAX.
The problem is that born_date and phone_number of this user, which I get from the database are not rendered into a template, and I can not see them in modal window, but I can get them in the console.
def str_value_to_list(text: str):
*_, email_json = re.findall(r'[^ \',()]+', text)
return email_json
#profile page method
#app.route('/profile', methods=['GET','POST'])
def profile():
if request.method == 'GET' and 'loggedin' in session:
cur = mysql.connection.cursor()
cur.execute("SELECT firstname, lastname, email FROM users.data WHERE description = 'doctor'")
account = cur.fetchall()
description = account
countries = ['USA','France','Italy','Spain','Australia','New Zealand']
cur = mysql.connection.cursor()
cur.execute("SELECT born_date, phone_number FROM users.data WHERE email = '%s'" % (dtx, ))
account = cur.fetchone()
born = account[0]
num = account[1]
print(born)
print(num)
return render_template(
'profile.html',
id = session['id'],
email = session['email'],
firstname = session['firstname'],
description = description,
countries = countries,
born=born,
num=num
)
#app.route('/api/get_data', methods=['POST'])
def get_data():
if request.method == 'POST':
print('Holy Shit!')
data = request.json
print(str_value_to_list(data['selectedItems'][0]))
cur = mysql.connection.cursor()
cur.execute("SELECT born_date, phone_number FROM users.data WHERE email = '%s'" % str_value_to_list(data['selectedItems'][0]))
account = cur.fetchone()
born = account[0]
num = account[1]
print(born)
print(num)
return jsonify({
'born': born,
'num': num,
})
html
<script type="text/javascript">
function printValue(selectedItem) {
$('#mySelectedValue').html(selectedItem.value);
}
</script>
<h2 class="white-text" style="font-size: 14px; color: #000;">born: {{ born }}</h2>
<h2 class="white-text" style="font-size: 14px; color: #000;">num: {{ num }}</h2>
<script type="text/javascript">
function printValue(selectedItem) {
$('#mySelectedValue').html(selectedItem.value.replace(/[{()}]/g, '').replace(/['"]+/g, '').replace(/[{,}]/g, ''));
console.log(selectedItem.value);
}
function process(selectedItem) {
$('#exampleModalCenter').modal('show')
document.getElementById('#exampleModalCenter')
const data = JSON.stringify({
"selectedItems": $('#sel').val()
});
$.ajax({
url: "/profile",
type: "POST",
contentType: "application/json",
data: data,
success: function (data) {
console.log(data);
},
});
}
function optionClick(selectedItem) {
printValue(selectedItem);
}
</script>
Per your code, you should use Javascript to update the born and num variable inside your Ajax success funtion:
$.ajax({
url: "/api/get_data",
type: "POST",
contentType: "application/json",
data: data,
success: function (data) {
h2 = document.querySelectorAll('.white-text')
h2[0].innerText = `born: ${data.born}`
h2[1].innerText = `num: ${data.num}`
},
});
You didn't put variable born, num in the render_template function, so you are not able to render it using {{ var }}
I'm attempting to submit my form, but it continually fails as there's something wrong with the POST. I'm unsure where/what exactly is causing the server to not process the request whether it's related to syntax, request routing, etc. I've also commented out every line related to file uploads, as well as comment out the if (validated) statement. There are no errors in the console as a result of this, but the form submission still fails. I'd appreciate any help/direction thanks.
I get this error message when I submit the form:
POST http://127.0.0.1:5051/register/ 400 (BAD REQUEST)
views.py
#blueprint.route("register/", methods=['GET', 'POST'])
def register():
"""Renders register page."""
form = RegisterForm()
if request.method == 'POST':
if not form.validate_on_submit():
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
ticket, err = create_ticket2(customer_id, organization + "\n" + venue_name + "\n" + street + "\n" + country + "\n" + teamviewquestion + "\n" + teamviewerid + "\n" + deviations + "\n" + deviationsnotes + "\n" + displaydirector + "\n" + composer + "\n" + decryptor + "\n" + motionrocket + "\n" + othersoftware,
location=location)
if err:
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=False, message=err, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
else:
success_msg = "Error"
.format(ticket.get('id'))
return render_template('main/register.html', page_title="Service Registration",
form=form, form_success=True, message=success_msg, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
return render_template('main/register.html', page_title="Service Registration",
form=form, media_types=current_app.config["ACCEPTED_"
"MEDIA_TYPE"])
"""Handles file upload POSTs."""
first_name = request.form.get("first_name")
last_name = request.form.get("last_name")
name = request.form.get("first_name") + " " + request.form.get("last_name")
email = request.form.get("email")
filename = request.form.get("filename")
file_type = request.form.get("file_type")
if filename == '':
response = make_response("No selected file")
return response, 400
if check_file_type(file_type):
filename = clean_filename(filename)
filename = secure_filename(filename)
filename = unique_filename(filename)
response = generate_presigned_post(filename, file_type)
# CREATE DB REFERENCE
url = "http://nevcodocs.s3.amazonaws.com/Uploads/{}".format(filename)
instance = CustomerFileUpload.query.filter_by(url=url).first()
if not instance:
instance = CustomerFileUpload(url=url, email=email, name=name)
db.session.add(instance)
db.session.commit()
else:
instance.update(created_at=datetime.utcnow())
return response, 200
js (ticket submission function)
$('#ticket-form').submit(function(event) {
if (validated) {
$('#filename').val($('#upload').val());
$.ajax({
type: 'POST',
url: '/register/',
data: $('#ticket-form').serialize()
}).done(function(data) {
var formData = new FormData();
for (var key in data.data) {
formData.append(key, data.data[key]);
}
formData.append('file', $('#upload').prop('files')[0]);
formData.append('csrf_token', '{{ csrf_token }}');
var req = new XMLHttpRequest();
req.onload = function() {
showSpinner(false);
$('#ticket-form').removeClass("support-form-show");
$('#ticket-form').addClass("support-form-hide");
};
req.onerror = function() {
showSpinner(false);
$('#ticket-form-failed').removeClass("support-form-hide");
$('#ticket-form-failed').addClass("support-form-show");
};
req.open('POST', '/register/');
req.send(formData);
}).fail(function(err) {
showSpinner(false);
$('#ticket-form-failed').removeClass("support-form-hide");
$('#ticket-form-failed').addClass("support-form-show");
});
} else {
showSpinner(false);
enableSubmit(true);
}
});
Usually, bad request means that you're trying to fetch data from request object using invalid keys. So you need to make sure that your POST request body (that was sent by javascript) contains all keys which you're using as arguments of request.form.get() method: first_name, last_name, etc...
Hi everyone I want to save the html array for dynamic inputs into the database using django, I have three dynamic inputs on my form, here is my code:
Views.py
def generatescripts(request):
# if this is a POST request we need to process the form data
if request.method == 'POST':
# create a form instance and populate it with data from the request:
form = GenerateScriptsForm(request.POST)
# check whether it's valid:
if form.is_valid():
# process the data in form.cleaned_data as required
# ...
# redirect to a new URL:
Step = request.POST.getlist('Step')
for el in Step:
form.save()
return HttpResponseRedirect('/thanks/')
# if a GET (or any other method) we'll create a blank form
else:
form = GenerateScriptsForm()
return render(request, 'page/generatescripts.html', {'form': form})
forms.py
from django import forms
from .models import Steps
class GenerateScriptsForm(forms.ModelForm):
class Meta:
model= Steps
fields = "__all__"
models.py
from django.db import models
# Create your models here.
class Steps(models.Model):
Step = models.CharField(max_length=200,default='0')
Description = models.CharField(max_length=200,default='0')
Result = models.CharField(max_length=200,default='0')
multiple inputs with the same name and I cant save with my code, this code only save one value from the array
generatescripts.html
<input type="button" value="Preview form" class="add" id="preview" />
<input type="button" value="Add a Step" class="add" id="add" />
<script>
$(document).ready(function() {
$("#add").click(function() {
var lastField = $("#buildyourform div:last");
var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
fieldWrapper.data("idx", intId);
var step = $("<input type=\"text\" name= \"Step\" placeholder= \"Step\" class=\"fieldname\" />");
var description = $("<input type=\"text\" name= \"Description\" placeholder= \"description\" class=\"fieldname\" />");
var expectedresult = $("<input type=\"text\" name= \"Result\" class=\"fieldname\" />");
var fType = $("<select class=\"fieldtype\"><option value=\"checkbox\">Checked</option><option value=\"textbox\">Text</option><option value=\"textarea\">Paragraph</option></select>");
var removeButton = $("<input type=\"button\" class=\"remove\" value=\"-\" />");
removeButton.click(function() {
$(this).parent().remove();
});
fieldWrapper.append(step);
fieldWrapper.append(description);
fieldWrapper.append(expectedresult);
fieldWrapper.append(fType);
fieldWrapper.append(removeButton);
$("#buildyourform").append(fieldWrapper);
});
$("#preview").click(function() {
$("#yourform").remove();
var fieldSet = $("<fieldset id=\"yourform\"><legend>Your Form</legend></fieldset>");
$("#buildyourform div").each(function() {
var id = "input" + $(this).attr("id").replace("field","");
var label = $("<label for=\"" + id + "\">" + $(this).find("input.fieldname").first().val() + "</label>");
var input;
switch ($(this).find("select.fieldtype").first().val()) {
case "checkbox":
input = $("<input type=\"checkbox\" id=\"" + id + "\" name=\"" + id + "\" />");
break;
case "textbox":
input = $("<input type=\"text\" id=\"" + id + "\" name=\"" + id + "\" />");
break;
case "textarea":
input = $("<textarea id=\"" + id + "\" name=\"" + id + "\" ></textarea>");
break;
}
fieldSet.append(label);
fieldSet.append(input);
});
$("body").append(fieldSet);
});
});
</script>
<input type="submit" />
</form>
{% endblock %}
I just read your view function, change it to this:
def generatescripts(request):
if request.method == 'POST':
Steps = request.POST.getlist('Step')
Results = request.POST.getlist('Result')
Descriptions = request.POST.getlist('Description')
# FIXME: number of each field should equal
c = min([len(Steps), len(Results), len(Descriptions)])
for i in range(c):
# create a form instance and populate it with data from the request:
form = GenerateScriptsForm({'Step': Steps[i], 'Result': Results[i], 'Description': Descriptions[i]})
# check whether it's valid:
if form.is_valid():
form.save()
return HttpResponseRedirect('/thanks/')
else:
form = GenerateScriptsForm()
return render(request, 'page/generatescripts.html', {'form': form})
I can make the simple button or default button work but as there is no option to custom css I need to use "Custom" stripe button. Following is the simple and custom form I am using where simple one works fine but don't know how to make custom work. Currently it is doing nothing when I click and enter information. But Default button works just fine.
View:
#app.route('/monthly', methods=['GET', 'POST'])
def monthly_charged():
if not user_authorized():
return redirect('/')
amount = 1495
# customer
key = stripe_keys['publishable_key']
print key
charge_all = stripe.Charge.list(limit=10000)
charge_dic = {}
charge_list = []
for charge_data in charge_all:
charge_dic['Amount'] = "$" + str(float(charge_data.amount) / 100) + " " + charge_data.currency.upper()
charge_dic['Description'] = charge_data.description
charge_dic['Name'] = charge_data.receipt_email
charge_dic['Date'] = str(datetime.datetime.fromtimestamp(charge_data.created))
charge_list.append(charge_dic)
charge_dic = {}
data = get_profile_data(session['auth_token'])
profile_data = data['StudentProfile']
student_id = profile_data.id
student = get_profile_data(session['auth_token'])['StudentProfile']
pkg = Package.query.filter_by(student_id=profile_data.id).first()
if pkg:
flash('You already have an active subscription.')
else:
stripe_token = request.form['stripeToken']
email = request.form['stripeEmail']
try:
customer = stripe.Customer.create(
email=email,
source=request.form['stripeToken']
)
subscription = stripe.Subscription.create(
customer=customer.id,
plan="monthly",
)
student_id = profile_data.id
student.stripe_customer_id = customer.id
student.stripe_subscription_id = subscription.id
package = Package(
student_id=student_id,
stripe_id = customer.id,
student_email=request.form['stripeEmail'],
is_active=True,
package_type='monthly',
subscription_id=subscription.id
)
dbase.session.add(package)
flash("You've successfylly subscribed for monthly package.")
dbase.session.commit()
except stripe.error.CardError as e:
# The card has been declined
body = e.json_body
err = body['error']
return redirect(url_for('packages', key=key, amount=amount))
Simple or Default Stripe Button:
<form action="/monthly" method="post" >
<div class="form-group">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_YgHVTCLIMQLW4NV6ntnJPAXs"
data-description="Monthly Package"
data-name="Monthly"
data-amount="10000"
data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
data-locale="auto">
</script>
</div>
</form>
Custom Stripe Button:
<form action="/monthlycharged" method="post">
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Enroll</button>
<style>
#customButton{
width:100px;
height:30px;
background-color:red;
color:white;
border:2px solid red;
}
</style>
<script>
var handler = StripeCheckout.configure({
key: 'pk_test_YgHVTCLIMQLW4NV6ntnJPAXs',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
// Open Checkout with further options:
handler.open({
name: 'Monthly',
description: 'monthly',
amount: 10000
});
e.preventDefault();
});
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
</form>
You need to submit your form in the token: function() {} of StripeCheckout.configure.
Here's an example of how to do that: https://jsfiddle.net/osrLsc8m/