Why Does My Form Close When I Click On Previous And Next buttons?

[ChrisSergent]

I have a form named attributes modal that uses esriBootstrap. I have the following code as I want the form to close after an update or when a user clicks cancel, but it closes even when a user clicks on previous or next. Any idea why? Here is the code:

query("#attributesModal .btn").on("click", function (e) {
            var target = e.target;
            if (target.innerText === "Update") {
                updateSupports();
                app.attributesModal.modal("hide");
                document.getElementById("btnSupportUpdate").style.visibility = "hidden";
            } else if (target.innerText === "Cancel") {
                app.attributesModal.modal("hide");
                document.getElementById("btnSupportUpdate").style.visibility = "hidden";
            }
            
        });

Thoughts Tom Wayson​

Here is my latest commit on Github: https://github.com/csergent45/streetSigns/tree/31dcc8e2306e00c81e7e2094ca14b4fa583ae44a

and my site has been updated at: http://maps.decaturil.gov/streetsigns/

[KellyHutchins]

If I set a breakpoint in your app and debug through the following code is executed each time you click one of the buttons on the attributes dialog. When this code runs you set app.attributesModal.modal("hide") which I assume hides the attributes dialog.

        // submit or cancel request and hide support modal  
        query("#attributesModal .btn").on("click", function (e) {
            var target = e.target;
            if (target.innerText === "Submit") {
                addSupports();
            }
            
            app.attributesModal.modal("hide");
            document.getElementById("btnSupportSubmit").style.visibility = "hidden";
        });

[TomWayson · Accepted solution]

This query:

```

query("#attributesModal .btn")

```

Selects every dom node w/ the class "btn" in the DOM node w/ id "attributesModal" and applies that click handler, so I presume your previous and next buttons have the class "btn" as well (which is the bootstrap base class for buttons). Try giving your submit/cancel buttons a distinct class name and us that in the above query in place of "btn".

[ChrisSergent]

Tom and Kelly Hutchins​ I removed the class btn from the buttons and commented out the query lines completely, but for some reason, there was a postback when I clicked on the previous or next buttons. I also had to add a button type of button to prevent that. This part is working. Thanks guys.