Search code examples
ajaxflaskxmlhttprequest

Can not pass form data by JS to Python Flask


I need to send form input data to Python Flask without reloading page or submit button. I am using XMLHttpRequest Object for sending input data but I can not receive it from Python Flask.

Html part:

  <form method="POST">
        <div class="Enter">
            <div class="MM">Management Module Name:<span style="margin-left: 66px;"></span>
                <input type="text" id="MM" class="input" name="MM" placeholder="MM name as seen in temip_enroll -d" required>
            </div>
  </form>

JS part:

            var input = document.getElementById('MM')
            input.addEventListener('keyup',e => {
              var mm_name = e.target.value

              const request = new XMLHttpRequest()
              request.open('POST',"Enter",true)
              request.send(e.target)
              console.log(mm_name)
            })

Python code:

@app.route('/Enter', methods = ['POST','GET'])
def enter_case():
    if request.method == 'POST':
        MM = request.form.get('MM')
        print(MM)

this prints "None"


Solution

  • You send unformatted raw data to the server. For this reason you can request this via request.data on the server.
    If you want to submit the data as a form, you can use a FormData object. Then the query after receipt is possible via request.form.

    const input = document.getElementById('MM');
    input.addEventListener('keyup', e => {
      const formData = new FormData();
      formData.append('MM', e.target.value);
    
      const xhr = new XMLHttpRequest();
      xhr.open('POST', '/enter', true);
      xhr.send(formData);
    });