Not able to print out element in Form that is sent from Flask Backend

Question

Problem: I am attempting to send data from a Form in the React Frontend, and simply print out the result from the backend, though I keep getting an empty string.

Attempt:

Here is the axios call: 
formLogin = (e) => {
        e.preventDefault();
        axios
           .post('http://localhost:5000/post', {
               name: document.getElementById("name").value,
           })
           .then((res) => {
                console.log(res.data)
           });
        }

Here is the React form:

<div className="use

    rs-information">
                                <form onSubmit={this.formLogin} className="patient-form" id="patient-form" name="patient-form" method='POST' action='http://localhost:5000/post' >
    
                                    <input type="text" name="name" id="name" />
                                    
                                    <label>
                                        Address: 
                                        <input name="Address" id="users-address" />
                                    </label>
    
                                    <label>
                                        City: 
                                        <input name="City" id="users-city" />
                                    </label>
    
                                    <label>
                                        State: 
                                        <input name="State" id="users-state" />
                                    </label>
    
                                    <label >
                                        Zip: 
                                        <input name="Zip" id="users-zip" />
                                    </label>
    
                                    <input type='submit' value='Submit'/>     
                                 </form>
                            </div>

Here is the Flask Backend:

@app.route('/post',methods=['POST'])
def testPost():
    name = request.form.get("name","")
    print(name)
    return jsonify(name=name)

Does it have something to do with how I am printing out the response in the frontend? How would I check if the axios call is succeeding? As you can see I am grabbing on of the form inputs by Id and sending that data to the backend with an axios call. Can I have some guidance as to how I would go about testing this? I am new to react and Flask.

Try testing with postman first to ensure flask works as expected. Then using front end test it. — Senthil, Sep 18 '21 at 15:47
@Senthil I see the post request, but it is just showing and empty string. I see that the post is successful. — Justin Philip Fulkerson, Sep 18 '21 at 15:48

score 2 · Accepted Answer · answered Sep 18 '21 at 15:47

The snippet:

axios
       .post('http://localhost:5000/post', {
           name: document.getElementById("name").value,
       })
       .then((res) => {
            console.log(res.data)
       });
    }

POSTs the object as JSON, not form. Therefore, you should use:

@app.route('/post',methods=['POST'])
def testPost():
    # name = request.form.get("name","")     # remove this line
    name = request.json["name"]              # add this line
    print(name)

score 0 · Answer 2 · answered Sep 18 '21 at 15:53

0

Here is the changes. Refer to print logic and read json string

@app.route('/post',methods=['POST'])
def testPost():
    content = request.json
    print content['name']
    return jsonify({"name":name})

answered Sep 18 '21 at 15:53

Senthil

2,156
1
14
19

Not able to print out element in Form that is sent from Flask Backend

2 Answers2