Oh Snap!

Please turnoff your ad blocking mode for viewing your site content

Hit enter after type your search item

Python 3 Flask Form Submit or Submission Using AJAX without Page Refresh or Reload Full Example For Beginners

/
/
/
15 Views

 

Welcome folks today in this blog post we will be submitting form in flask without page refresh or reload using ajax in python. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to install the following library using the pip command as shown below

 

pip install flask

 

After installing this library make an app.py file and copy paste the following code

 

app.py

 

from flask import Flask,render_template,request 

app = Flask(__name__) 


@app.route("/",methods=["POST","GET"]) 
def home(): 
    if request.method == "POST": 
        todo = request.form.get("todo") 
        print(todo) 
    return render_template('home.html') 


if __name__ == '__main__': 
    app.run(debug=True)

 

READ  Python 3 Script to Find Area of Rectangle Using Classes and Functions in Object Oriented Programming Full Tutorial For Beginners

 

Now we are loading the home.html file which we need to create in the root directory. So for that we need to create a special directory called as templates inside the root directory and in that create this home.html file as shown below

 

templates/home.html

 

<!DOCTYPE html> 
<html> 
<head> 
    <title>GFG</title> 
</head> 
<body> 
<form method="post" id="todo-form"> 
        <input type="text" name="todo" id="todo"> 
        <button type="submit">submit</button> 
    </form> 

        <!--Jquery Cdn -->
<script src="https://code.jquery.com/jquery-3.5.1.js"
        integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
        crossorigin="anonymous"></script> 

<script type="text/javascript"> 
    $(document).on('submit','#todo-form',function(e) 
                { 
    console.log('hello'); 
    e.preventDefault(); 
    $.ajax({ 
        type:'POST', 
        url:'/', 
        data:{ 
        todo:$("#todo").val() 
        }, 
        success:function() 
        { 
        alert('saved'); 
        } 
    }) 
    }); 
</script> 

</body> 
</html>

 

READ  Python 3 OpenCV Library Script to Flip or Rotate Live Webcamera Video at ClockWise or AnticlockWise Direction at any Angle Full Project For Beginners

 

So now if you run the flask app by typing the below command as shown below

 

python app.py

 

And now if you open localhost:5000 in your browser and submit your form then the information will be displayed inside the popup window due to ajax as shown below

 

Leave a Comment

Your email address will not be published. Required fields are marked *

This div height required for enabling the sticky sidebar
Coding Shiksha 2020. All Rights Reserved.
Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views : Ad Clicks : Ad Views :