CODEWITHSUNDEEP
javascriptflaskpostrequest
Glooc
Glooc

Reputation: 13

Flask differentiating between different post requests

I have a webpage which contains an input field for users to input text into and a button to add the note to a database, and I want to add a button where the user can delete those notes. Now the creation of the note will send a post request, which I can check using:

if request.method == "POST":

but what can I do when the other button will send the same request method over the same URL (POST)? How can I make it so that my program differentiates between when a user has clicked the 'add note' button or the 'delete note' button, rather than running all of the code when a user simply sends a POST method?

I have seen a solution using Javascript fetch api, where clicking the button would send a POST method under a different endpoint but would like to know if there was a way to do it using python only.

I was thinking of some way to use python requests module along with flask RESTful api to handle database modifications but I couldn't piece the functionality of the whole code together.

I am not going to post any of my code unless anyone asks, since I wouldn't know what to post anyway as this is not an error-related question. I am simply asking for any ideas as to how I could go about handling multiple post requests on the same webpage, and how the server would be able to know which of the 2 buttons a user clicks, since they are both using the same method.

Here is my 'create note' form:

<form method = "POST" class = "pt-3">
    <div class = "d-flex justify-content-center">
        <textarea name = "text" id = "text"></textarea>
    </div>
    <br/>
    <div class = "d-flex justify-content-center">
        <button type = "submit" class = "btn btn-success" name = "addNote">Add Note</button>
    </div>
    <div class = "d-flex justify-content-end">
    </div>

</form>

Now this is the solution that I have found using javascript fetch api which I have stored in a separate javascript file linked to my html webpage:

function deleteNote(noteId){
    fetch('/delete-note', {
        method: 'POST',
        body: JSON.stringify({ noteId:noteId }),
    }).then((_res) => {
        window.location.href = "/";
    });
}

Which communicates with this endpoint in my flask file:

@views.route("/delete-note", methods = ["POST"])
def delete_note():
    #pylint: disable = no-member
    note = json.loads(request.data)
    noteId= note['noteId']
    note = Note.query.get(noteId)
    if note:
        if note.user_id == current_user.id:
            db.session.delete(note)
            db.session.commit()
    
    return jsonify({})

The reason I see this is possible is because I can explicitly call the javascript function by specifying an 'onclick' attribute to my html button, then the fetch api does its communication with the /delete-note endpoint url. I would like an alternative to mimic this sort of functionality by only using the python language.

Upvotes: 1

Views: 1905

Answers (2)

Andrew Clark
Andrew Clark

Reputation: 880

You can to the following:

if request.method=='POST':
    if 'add_note_button' in request.form:
        # do things
    elif 'remove_note_button' in request.form:
        # do things

replace my button names w/ the names of your buttons declared in your form

Upvotes: 3

Kate
Kate

Reputation: 1836

You should really post some code. Otherwise we are having an abstract discussion. But I don't see what's difficult. You have at least two possibilities if I understand your requirement right.

Option 1: build an HTML form with two buttons. Use the name attribute to differentiate them. Then Flask can tell which one was pressed.

Option 2: : build a page with two HTML forms, each having its own target (and a different Flask endpoint) and one button. It's perfectly valid to have more than one in a web page. It's all a matter of design.

Upvotes: 0

Related Questions