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

Question

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

133 Views Asked by Krallenkroete At 23 August 2023 at 15:10

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

Original Q&A

There are 1 best solutions below

**DarioS** · Accepted Answer · 2023-08-23T16:22:07.300000

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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>


</body>
</html>

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

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in CSS

Related Questions in BOOTSTRAP-MODAL

Related Questions in BOOTSTRAP-SWITCH

Trending Questions

Popular # Hahtags

Popular Questions