Issue
I'm working on a web application using Flask and I'm having trouble with an AJAX POST request. I am working of a signup page. When I click the submit button on my form, nothing is happening, and there are no XHR entries in the network tab of the browser's developer tools as well as no console entries. I've double-checked my code, but I'm unable to identify the issue. Can someone please help me troubleshoot this problem?
Please find below the relevant parts of my code:
#app.py
from flask import Flask, render_template, request
app = Flask(__name__)
from user import routes
@app.route('/', methods=['GET', 'POST'])
def home():
if request.method == 'GET':
return render_template("login/home.html")
else:
print("do not know")
# @app.route('/dashboard/')
# def dashboard():
# return render_template("login/dashboard.html")
if __name__ == "__main__":
app.run(debug=True)
Created users folder for managing the model classes and there routes
#user/models.py
from flask import Flask, jsonify
class User:
def signup(self):
user ={
"_id":"",
"name":"",
"email":"",
"password":""
}
return jsonify(user), 200
\#user/routes.py
from flask import Flask
from __main__ import app
from user.models import User
@app.route('/user/signup', methods=\['POST'\])
def signup():
user = User()
return user.signup()
The view or HTML code
base.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="/static/js/jquery.js"></script>
<script src="/static/js/scripts.js"></script>
</head>
<body>
{% block login_content %}
{% endblock login_content %}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>
home.html
{% extends 'login/base.html' %}
{% block login_content %}
<div class="container d-flex justify-content-center mt-5">
<div class="card w-75 d-flex flex-column flex-wrap">
<div class="container-fluid card-header">
Featured
</div>
<div class="card-body">
<form class="container-fluid" id = "signup_form" name="signup_form">
<div class="mb-3 d-md-flex">
<label for="register_name" class="form-label col-md-2">Name</label>
<input type="text" class="form-control" id="register_name" name="register_name">
</div>
<div class="mb-3 d-md-flex">
<label for="register_email" class="form-label col-md-2">Email address</label>
<input type="email" class="form-control" id="register_email" name="register_email">
</div>
<div class="mb-3 d-md-flex">
<label for="register_password" class="form-label col-md-2">Password</label>
<input type="password" class="form-control" id="register_password" name="register_password">
</div>
<!-- <div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div> -->
<button type="submit" id="submit_signup_form" class="btn btn-primary">Sign Up</button>
</form>
</div>
</div>
</div>
{% endblock login_content %}
script.js
$("#signup_form").submit(function(e) {
var $form = $(this);
var $error = $form.find(".error");
var data = $form.serialize();
$.ajax({
url: "/user/signup",
type: "POST",
data: data,
dataType: "json",
success: function(resp) {
// window.location.href = "/dashboard/";
console.log(resp)
},
error: function(resp) {
// $error.text(resp.responseJSON.error).removeClass("error--hidden");
console.log(resp)
}
});
e.preventDefault();
});
What I've Checked:
I've verified that jQuery is included and the paths to JavaScript files are correct.
My server is running and accessible at the specified URL.
The Flask route seems to be correctly configured, but I'm not getting the expected response in the browser.
Also changed between form id and form name
I would greatly appreciate any guidance or insights you can provide to help me resolve this issue. Thank you in advance!
Solution
The button id is submit_signup_form
<button type="submit" id="submit_signup_form" class="btn btn-primary">Sign Up</button>
but in the script you have signup_form
$("#signup_form").submit(function(e) {
Try to change the id of the button to <button type="submit" id="signup_form" ...
Answered By - user2314737
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.