Use Fetch API to pass innerHTML data to flask without json

Question

I have an html form that sends data to my flask application. In addition, to the form's input fields, I also want to pass data from a DIV's innerHTML. I've been able to get data from the input fields to pass over to the flask side, but I haven't been able to get the DIVs innerHTML.

I've read a lot of questions on here that seem similar. But the answers for those questions all revolve around using json to pass the data. However, I don't think my data fits the json format since it's being generated dynamically by the user.

So how can I pass data from a DIV's innerHTML? Am I right in assuming that this isn't a case for json. Here's what I've tried:

When I run the code below, the data for amount comes over in the console. The innerHTML returns 'NONE'

HTML

<form id="action_id" action="/" method="post">
      <div class="row">
        <div class="col-6" id="action_container">      

          <input class="col-12 action_info" type="text" id="amount" name="amount" placeholder="Amount">
          
        </div>

        <div class="col-5 hole_cards" id="hole_cards">          

      <div class="row">     
        
        <div class="col-12 board" id="board">        
          <div class="col-1 cardz" id="flop_one" name="flop_one"></div>          
          <button id="action_button" type="submit" value="submit">Submit</button>
        </div>

      </div>
    </form>

JAVASCRIPT

document.addEventListener('DOMContentLoaded', function() {

    document.querySelector('#action_id').onsubmit = function() {
        
        const myform = document.querySelector('#action_id');
        let data = new FormData(myform);
        
        fetch("/", {
            "method": "POST",                     
            "body": data,
        })                   
        .then(response => response.text)

        .then(data => {                                                                       
            flop_one = document.querySelector('#flop_one').innerHTML;
        })
        .catch(error => {
            console.log('Error:', error);
        });
        return false;
    }
});

PYTHON

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "GET":
        return render_template("index.html")
    
    elif request.method == "POST":
      
        flop_one = request.form.get("flop_one")                                      
        app.logger.info(flop_one)        

        amount = request.form.get("amount")
        app.logger.info(amount)
      
        return render_template("index.html")

Answer 1

I believe your form data is being submitted, but without using the Fetch API, for the following reasons.

The listener for the 'DOMContentLoaded' event is associated with the window and not the document. It will never catch an event the way you use it.

window.addEventListener('DOMContentLoaded', () => {
    // ...
});

The listener for the 'submit' event does not prevent the form from default behavior. Thus, the form is submitted as usual and the use of the Fetch API is never called.

form.addEventListener('submit', function(event) {
    event.preventDefault();
    // ...
});

The data from your div element is not added to the form data to be submitted, so it is not present on the server side.

const flopOne = document.getElementById('flop_one');
const formData = new FormData(this);
formData.append('flop_one', flopOne.innerHTML);

When using the Fetch API, keep in mind that the calls to the .then blocks are used to handle the server's response, as these are not automatically processed by the browser.

Unfortunately, your question does not explain what should happen once the data has been transferred.

Here is the complete example for sending the entire data via Fetch-API.

window.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('action_id');
    form.addEventListener('submit', function(event) {
        event.preventDefault();
        const flopOne = document.getElementById('flop_one');
        const formData = new FormData(this);
        formData.append('flop_one', flopOne.innerHTML);

        fetch('/', {
            method: 'POST', 
            body: formData
        })
        // If you expect a response from the server and want to process it, 
        // use the "then" block here.
    })
});