Flask Confirm modal with multiple buttons

Question

I am working on a Flask application where I have one page with multiple buttons, and for each of those buttons when clicked I wanted a "confirm - are you sure?" popup to come up, before going on to another view function which takes care of running a job depending on the button. I am stuck trying to find a way to pass a variable from button via modal to run view function.

Here is what I have tried so far:

app.py:

@app.route('/buttons', methods=['GET', 'POST'])
def buttons():
return render_template("buttons.html")

@app.route('/run/<cmd>', methods=['GET', 'POST'])
def run(cmd):
    return render_template_string('''
    cmd = {{ cmd }}<br>
''', cmd=cmd)

buttons.html:

<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<meta charset="utf-8">
 <script type="text/javascript">
 $(document).on("click", ".open-modal", function () {
 var mycmd = $(this).data('id');
 $(".modal-body #cmd").val( mycmd );
 $("#confirm-modal").modal("show");
<script>
</head>
<body>


        <form method="post" action="/">

          <button type="button" class="open-modal" data-toggle="modal" data-id="Test" data-target="#confirm_modal">Test</button>
          <button type="button" class="open-modal" data-toggle="modal" data-id="Test2" data-target="#confirm_modal">Test2</button>

        </div>
    </form>

    <!-- Modal for Pop Up-->
    <div class="modal" tabindex="-1" role="dialog" id="confirm-modal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Confirm</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Confirm - Are you sure?</p>
           <input type="hidden" name="cmd" id="cmd" value=""/>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

            <form action="{{ url_for('run', cmd=cmd) }}" method="POST">
            <input class="btn btn-secondary" type="submit" name="submit_button" value="Confirm">

          </div>
        </div>
      </div>
    </div>

 </body>

Prior to an attempt to add a modal, I was using a submit buttons in a form within button.html where I would catch a value of a button in buttons function and pass a variable to a session and then get it in run function. However modal requires a button type="button" for a trigger which doesn't send anything back to a form. I also looked into using and somehow passing a hidden input value or serving modal from a different HTML page.

Any suggestion on the best way to make this work? Previously I had a confirm delete modal where I just wrapped modal's confirm button in a form with url_for working so I figured this wouldn't be so complicated. Unfortunately I am not too well versed in Java script. Any help is much appreciated!

https://stackoverflow.com/questions/10626885/passing-data-to-a-bootstrap-modal — Jessi, Dec 20 '18 at 16:34
Thanks for your response Jessi, as in regards to link - I got the javascript piece from that exact link, and have already tried a combination of all of the answers posted there. Also tried placing — Dusan Pilipovic, Dec 20 '18 at 19:26

Dusan Pilipovic · Answer 1 · 2018-12-26T19:12:23.237

With help from Jessi - this works out in a way described in the question.

buttons.html:

  <!-- Trigger buttons for modal-->
  <a data-toggle="modal" class="btn btn-primary" id="Test" value="btn_display_value" data-target="#confirm_modal" onclick="aPassValueFunction(this)"> Test</a> &nbsp;
  <a data-toggle="modal" class="btn btn-primary" id="Test2" value="btn_display_value" data-target="#confirm_modal" onclick="aPassValueFunction(this)"> Test2</a> &nbsp;


    <!-- Modal for Pop Up-->
    <div class="modal" tabindex="-1" role="dialog" id="confirm-modal">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Confirm</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Confirm - Are you sure?</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>

            <form action="{{ url_for('run') }}" method="POST">
            <input name="pass_value" type="hidden" value="pass_value" id="hidden_input">
            <input class="btn btn-secondary" type="submit" name="submit_button" value="Confirm">
          </div>
        </div>
      </div>
    </div>

    <script>
        function aPassValueFunction(obj){
            let valuefromID = obj.id;
            $('#hidden_input').val(valuefromID);
            $("#confirm-modal").modal("show");
        }
    </script>

app.py:

@app.route('/buttons', methods=['GET', 'POST'])
def buttons():
return render_template("buttons.html")

@app.route('/run', methods=['GET', 'POST'])
def run():
  if request.method == 'POST':
    if request.form['pass_value'] == 'Test':
    value ='Test just for fools and horses!'
    return render_template_string('''{{ value }}<br>''')
  elif request.form['pass_value'] == 'Test2':
    value ='Test2'
    return render_template_string('''{{ value }}<br>''')

score 1 · Accepted Answer · answered Dec 20 '18 at 19:45

Aside from the link that I've provided in the first comment, this is another way.

<a data-toggle="modal" class="btn btn-primary"
   id="value_you_want_to_pass" value="btn_display_value"
   data-target="#your_modal"
   onclick="aTestFunction(this)">                    
</a> &nbsp;


<script>
    function aTestFunction(obj){
        let valuefromID = obj.id;
        $('#hidden_input').val(valuefromID);
    }
</script>

<!-- your modal starts here -->

<input type="hidden" id="hidden_input">
<!-- your modal ends here -->

Doing it this way, when you click the button, the JS function will be called and assign value to hidden input, and as modal opens, you will be able to pass that value in modal window. If you want to see it, remove hidden attribute.

Thanks a lot Jessi! - your comment helped me in the right direction to resolve this. Basically I was passing value from trigger button to the modal all ok, problem was with obtaining it back from modal to the view function. Wish there were more examples of this online, so I'll post the code in case somebody else stumbles upon the same issue. — Dusan Pilipovic, Dec 20 '18 at 23:09

score 0 · Answer 3 · answered Feb 28 '22 at 07:53

*Create an element to be deleted in the HTML page

<div id="dvtextRemoveDiv" style="display: none">
        <p class="pintitle"> Select a product name to be deleted from the dropdown: </p>
        <table border="0" width="1000">
        <tr>
            <td>
        
                <p class="pinfield"><select name="KeyValuesRemove" id="KeyValuesRemove" class="form-control" onchange="passKeyToBeDeleted()">
                    {% for row in KeyValuesRemove %}                        
                        <option value="{{row}}">{{row}}</option>
                    {% endfor %} 
                   </select>
                </p>
            </td>
        </tr>
        
                        
        <tr>
            <td>
                <button type="button" class="btn btn-danger btn-sm m-1" data-toggle="modal" data-target="#deleteModal">Delete</button>
                
            </td>
        </tr>
      </table>
</div>

Create a modal in the same page

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="deleteModalLabel">Delete Post?</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-footer">
          
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <form action="{{ url_for('delete_post')}}" method="POST">
            <input name="pass_value" type="hidden" value="pass_value" id="hidden_input">
            <input class="btn btn-danger" type="submit" value="Delete">
          </form>
        </div>
      </div>
    </div>
</div>

Javascript function to pass value from html file to views.py (from frontend to backend)

<script>
    
        function passKeyToBeDeleted(){
            var valuefromID = document.getElementById('KeyValuesRemove').value;
            
            $('#hidden_input').val(valuefromID);
            alert(document.getElementById('hidden_input').value);
            $("#deleteModal").modal("show");
        }
</script>

Flask Confirm modal with multiple buttons

3 Answers3