Home » Jquery » python – Multiple Button in one Form Request with Flask + Jquery + Ajax

python – Multiple Button in one Form Request with Flask + Jquery + Ajax

Posted by: admin February 22, 2020 Leave a comment

Questions:

This is my myindex.html file where I have 2 buttons for 2 different requests. Both the buttons share same textarea as input.

<script type="text/javascript">

 jQuery(document).ready(function($)
 {
    var textbox = document.getElementById('textarea');
    var dropdown = document.getElementById('dropdown');

    dropdown.onchange = function() {
     var dropdownValue = dropdown.options[dropdown.selectedIndex].value;
     textarea.value = dropdownValue;
    }
   });
   jQuery(document).ready(function($)
   {
      $.fn.callsm = function()
      {
        alert('You have successfully defined the function!')
      }
      $(".callsm").click(function()
      {
        var request_body = $("#textarea").val()
        console.log(request_body)
        $.ajax
        ({
            type: 'POST',
            url: "/invocations",
            data : request_body,
            headers: 
            {
                    'Content-Type': 'text/plain'
            }
         }).done(function(data) 
         {
          //DO SOMETHING  
         }
            }).fail(function(data) 
            {
                console.log('fail: '+data);
            });

     });

    $.fn.calldm = function()
      {
        alert('You have successfully defined the function!')
      }
      $(".calldm").click(function()
      {
         var request_body = $("#textarea").val()
         console.log(request_body)

         $.ajax
         ({
            type: 'POST',
            url: "/invocations",
            data : request_body,
            headers: 
            {
                    'Content-Type': 'text/plain'
            }
            }).done(function(data) 
            {
                //DO SOMETHING
            }).fail(function(data) 
            {
                console.log('fail: '+data);
            });

       });

    });

    </script>

     <form name="myform" action="/invocations" method = "post">

    <select id="dropdown">
        <option value=" ">leer</option>
        <option value=" Hi, I am dataplumber">option1</option>
    </select><br><br>
      <textarea rows="20" cols="50" id="textarea" name="textarea"></textarea><br>
      <button type="button" id="document" class="calldm" name="document">Call DM</button>
      <button type="button" id="sentence" class="callsm" name="sentence">Call SM</button>


    </form>

And below is my app.py file

@app.route("/invocations", methods=["POST"])
def invocations():
    if "document" in request.form:
        url = 'http://XXXX/invocations'
        //DO SOMETHING
        return x.content
    elif "sentence" in request.form:
        //DO Something
        return x.content.decode('utf-8')
    else:
            return render_template('myindex.html')

But my python code fails as the ImmutableMultiDict is empty. If I remove if else from python and call document and sentence individually it succeeds..Am I doing something wrong here.

How to&Answer:

You’re not submitting the form, so your data will be in request.data instead of request.form.