Reputation: 83

Flask Confirm modal with multiple buttons

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!

Upvotes: 0

Answers (3)

user3349907

Reputation: 357

*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>

Upvotes: 0

Dusan Pilipovic

Reputation: 83

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>''')

Upvotes: 3

Jessi

Reputation: 1468

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.

Upvotes: 1

Flask Confirm modal with multiple buttons

Answers (3)

Related Questions