Receiving 'None' from request.form.get when called flask route via XMLHttpRequest

Question:

I am new to flask and pyhton. I searched many blogs but could not find my use case.

I have created a form in HTML. there are two buttons. If the User clicks the First button, data from the HTML form should be passed to python for further calculations and passed to the HTML form. I am using XMLHttpRequest for this and It works fine if I want to pass static data from Python.

But the problem is when I use request.form.get(‘instanceid’), "None" is passed. I want this field for further calculations.

My partial HTML:

<form method="post" enctype="multipart/form-data">
       <label for="tname">Enter Task Name</label>
       <input type="text" id="tname" name="taskname" placeholder="Request Name">
   
       <label for="Instance">Choose Instance</label>
       <select id="instanceid" name="instanceid">  <!-- /////THis is Tag Value I need/// --> 
           {% for instance in instanceid %}
           <option value="{{instance}}" SELECTED>{{instance}}</option>"
           {% endfor %}
       </select>
       
       <fieldset class="whiteborder">
       <legend><b>Oracle Cloud Credentials:</b></legend>
       <label for="uname">User Name</label>
       <input type="text" id="uname" name="username" placeholder="Oracle User Name">
       <label for="password">Password</label>
       <input type="password" id="password" name="password" placeholder="Oracle password">
       </fieldset>
       
       <button class="sidebyside" type="button" onclick="loadver()">Check Version!</button>   

<!-- /////THis is the button that user presses to refresh below two tags////// --> 
       

<p class="sidebyside" id="version"><b><u>{{Patch_version}}</u></b></p>
       <p class="sidebyside" id="version"><b><u>{{Oracle_version}}</u></b></p>
       <br>
       <br>

       <fieldset class="whiteborder">
           <legend><b>Choose Task:</b></legend>
           <input type="radio" id="releasechanges" name="changes" value="releasechanges">
           <label for="releasechanges">Get Release Changes</label><br>
           <input type="radio" id="analyzeimpact" name="changes" value="analyzeimpact">
           <label for="css">Analyze Impact</label><br>
       </fieldset>
       <fieldset class="whiteborder">
           <legend><b>Choose Module:</b></legend>
           <input type="radio" id="All" name="choosemodule" value="choosemodule">
           <label for="releasechanges">All</label><br>
           <input type="radio" id="Manufacturing" name="choosemodule" value="Manufacturing">
           <label for="css">Manufacturing Cloud</label><br>
           <input type="radio" id="Financial" name="choosemodule" value="Financial">
           <label for="css">Financial Cloud</label><br>
           <input type="radio" id="Procurement" name="choosemodule" value="Procurement">
           <label for="css">Procurement Cloud</label><br>
           <input type="radio" id="Order" name="choosemodule" value="Order">
           <label for="css">Order Management Cloud</label><br>
       </fieldset>
       <input type="submit" value="Submit">

     </form>

My Py code

@app.route('/patchversion', methods = ['POST','GET'])
def check_version():
    print(str(request.method))
    path = 'xmlpserver/services/v2/ReportService'
    instance = request.form.get('instanceid') #----------------THis is getting 'None' value
    print(instance)
    version = 'Current Installed Patch : 23C'
    print(version)
    return version

JS in HTML:

  </script>
  <script type="text/javascript">
    function loadver() {

        const req = new XMLHttpRequest();
        req.onload = function() {
            document.getElementById('version').innerHTML = this.responseText;
     }
        req.open('POST', '/patchversion', true);

        req.send();
    }
    
</script>

Can someone please let me know what is the mistake I am making?

Asked By: MAYANK PANDE

||

Answers:

The request you are making in your html javascript code doesn’t have any form data attached, you can make a form data object like so:

formData = new FormData();

After that add the instanseid and other parameters to the formData object

formData.append("instanceid", 0)

replace 0 with your value, you can get the value from the element in your form using the .value variable of the element

document.getElementById("instandid_input").value

You also then send the request with the form data

req.send(formData)

I hope this answers your question

Answered By: RedstoneHair
Categories: questions Tags: ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.