[FIXED] Not getting any errors in flask but still not able to render template

Issue

I am retrieving form elements in JS and sending it to flask route using fetch. I am not getting any errors, able to properly get data from JS into flask. At the end when I modified the data in flask and trying to render template it is taking me back to the home page where I started your text
Below is the html form

<form id="userinfo">
            <div class="search-container">
              <div class="first-child">
                <input type="text" autofocus class="search search-bar" name="street-address" placeholder="Type your address, e.g. 145 Main... " autocomplete="address-line1">   
              </div>
              <div class="second-child">
                <input type="text" class="search child-search" name="apartment" placeholder="Apartment, unit, etc." autocomplete="address-line2">
                <input type="text" class="search child-search" name="city" placeholder="City" required autocomplete="address-level2">
                <input type="text" class="search child-search" name="state" placeholder="State / Region" autocomplete="address-level1" required>
                <input type="text" class="search child-search" name="country" placeholder="Country" autocomplete="country-name" required>
                <input type="text" class="search child-search" name="postal_code" placeholder="Postal Code" autocomplete="postal-code" required>
              </div>  
            </div>
            <button type="submit" class="submit">Search</button>      
          </form>

Below is the flask route

@app.route("/submit", methods=["POST"])
def submit():
    try:    
        data = request.get_json()  # retrieve the data sent from JavaScript
        print(data)
        data_list = helpers.check_format(data)
        print(data_list) 
        if not data_list:
            print("Not")
            return jsonify({"Status": "Incorrect Data"})

        address_search = reviews.query.filter(reviews.address.startswith(data_list[0])).all()
        print(address_search)
        print("POST")

        # Render the template along with the JSON response
        return render_template("result.html", address_search=address_search, status="OK")

    except Exception as e:
        print("Exception Happened:", str(e))
        return jsonify({"Status": "Error"})

Below is the JS code

document.getElementById('userinfo').addEventListener('submit', function (event) {
  event.preventDefault();

  const formData = new FormData(this);
  const jsonData = {};
  
  formData.forEach((value, key) => {
      jsonData[key] = value;
  });

  // Use the form data in your JavaScript logic
  // console.log(jsonData);

  // Clear the form if needed
  this.reset();

  sendData(jsonData);
});

// for sending address
function sendData(jsonData) { 
  fetch('/submit', {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json',
      },
      body: JSON.stringify(jsonData),
  })
} 

I tried using AJAX first did not work then thought of using the fetch method still having the same issue. The reason why I am not directly retrieving data in Flask is because I was getting none when fetching the value from the below input field

<input type="text" autofocus class="search search-bar" name="street-address" placeholder="Type your address, e.g. 145 Main... " autocomplete="address-line1">   

Solution

I would remove the form tag and just use a div so browsers won't automatically send form data to the current URL. You can add an onclick action to your button for calling the JS function.

And I saw you are rendering template for a fetch request, it won't output anything. If the street-address is the only one which you can't retrieve information from with flask, you may change the name to "street_address" and try it again.

Change the form of your html like this:

<form action='/submit' method='POST'>

...

And try to get it from the route /submit

@app.route("/submit",methods=["POST"])
def submit():
    mydata1 = request.form.get("mydata1")#same thing for every form attribute
    #If you get directly as json, attackers may send you values that you don't want with just a simple curl request.

Also don't forget to check your networking tools from your browser to see more details about your payloads and possibly see the error right trough. Don't forget to check any potential JS errors may lead your js file not to function properly.

I hope my answer helped!

Answered By - efeakaroz13