Show a Bootstrap-Modal on button-click if certain switch-state is true

Question

there have been several related posts here and through the net but i am not so good with javascript (and I´m pretty sure, it will end up in a JS solution) and dind't yet find a solution by reading them...

What i want, is to give user the option either to get displayed query results within a database application or get them directly exportet to their download-directories.

This is working as intended, but if user chooses option to have the results as a download, i want to show a modal bootstrap-modal with some further information.

my html-code for the button is:

<button class="btn btn-sm"
        type="submit"
        name="custom_query"
        id="custom_query_button"
        value="{{ custom_query }}"
        >
        make query
        <span class="form-check form-switch float-end">
            <label class="form-check-label" for="export_toggle2"
                    title="Abfrageergebnisse in Excel-Datei exportieren">
            </label>
            <input class="form-check-input pe-2" type="checkbox" id="export_toggle2"
                    name="export"
                    value="custom_query"
                    style="cursor: pointer">
        </span>
</button>

my code for the Bootstrap-modal is:

<div class="modal fade" id="QueryModal" tabindex="-1" role="dialog" aria-labelledby="QueryModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="QueryModalLabel">Done!</h5>
      </div>
      <div class="modal-body">
        .....
      </div>
      <div class="modal-footer">
        <button type="button" class="btn" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

So if i put the

data-toggle="modal" data-target="#QueryModal"

no matter where in this code, i get the modal alwas i push the button or even worse always i toggle the switch...

The goal would be, that the modal only shows up if the button is pushed with a toggled switch in "checked" position...

Let me try to understand, seems like you want something that works like this: 1.Calling query in some way 2.Displaying a choose (Would you like to see result or download it? View/Download) 3.if "View" then you show on your page something (like a table) 4.if "Download", modal pop up and say something more, and eventually start the download. Am i right? — DarioS, Aug 23 '23 at 15:18
The problem here is that you have your checkbox embedded within your button, you'll probably need to separate the two and yes, you'll probably need some JS to achieve what you want. — Waldir Bolanos, Aug 23 '23 at 15:24
@DarioS you are right besides the 2nd point. user can make this choice by checking the checkbox in the button/toggling the switch in the button. After that no need for another dialog. And if checkbox is checked AND button is clicked, i want to show modal, yes — Krallenkroete, Aug 23 '23 at 15:44

score 1 · Accepted Answer · answered Aug 23 '23 at 16:22

I guess this is what you are looking for:

  // Show modal when the download button is clicked, based on checkbox state
    document.getElementById("downloadResults").addEventListener("click", function() {
        var openModalCheckbox = document.getElementById("openModalCheckbox");
        if (openModalCheckbox.checked) {
            $('#infoModal').modal('show');
        }
    });

<!DOCTYPE html>
<html>
<head>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <h2>Query Results</h2>
    
    <!-- Option buttons -->
    <button class="btn btn-primary" id="viewResults">View Results</button>
    <button class="btn btn-success" id="downloadResults">
        Download Results
        <label class="mb-0 ml-2">
            <input type="checkbox" id="openModalCheckbox"> Open Modal
        </label>
    </button>
</div>

<!-- Bootstrap Modal -->
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" aria-labelledby="infoModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="infoModalLabel">Additional Information</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <!-- Additional information content here -->
                This is some additional information about the download process.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<!-- Include Bootstrap JS and your custom JavaScript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


</body>
</html>

Thx for your efforts. But when i run your snippet, the modal is displayed as soon as i check the checkbox....this behavior i could also achieve if i put the "toggle-data......" part in my existing code in the passage with the switch without further coding....and without any additional JS code. My goal is, to show modal when - to stay in YOUR example - the "VIEW RESULTS" Button is clicked WHILE the checkbox is checked ;-) — Krallenkroete, Aug 23 '23 at 17:41
Forget about my last comment....i tried your solution within a new html file in my browser and it works perfectly...the fact, that i do not get it to work with same code in my Django environment is an other problem i have to deal with now :-P — Krallenkroete, Aug 24 '23 at 08:55

Show a Bootstrap-Modal on button-click if certain switch-state is true

1 Answers1