相同的模态在页面上失败，然后在同一页面上工作

I am using the same modal code at the top and bottom of a page. Both show the button correctly.

我在页面的顶部和底部使用相同的模态代码。两者都正确显示按钮。

When Rendered:

The first button will go straight through as if the submit button were pressed, without waiting.

第一个按钮将直接通过,就像按下提交按钮一样,无需等待。

The second one will work as expected...

第二个将按预期工作......

Any ideas how to figure out how to get the first button to act correctly would be appreciated.

任何想法如何弄清楚如何让第一个按钮正确行动将不胜感激。

Here is my code:

这是我的代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
<link href="/Content/css/bootstrap.min.css" rel="stylesheet">

<script src="/Content/js/jquery-2.2.0.js"></script>
<script src="/Content/js/bootstrap.min.js"></script>
<script src="/bundles/livevalidation.js"></script>
<script src="/Content/bootstrap-confirmation.min.js"></script>

</HEAD>
<body>

<!-- ########### FIRST TIME ############### -->

<form id="normal" action="/dev/clientEntry.do" method="post" name="UpdateClient">
        <input name="cID" type="hidden" value="360" form="normal"  />

<div id="myModal" class="modal fade" role "dialog">
  <div class="modal-dialog ">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
        <span class="close"><button type="button" class="close" data-dismiss="modal">&times;</button></span>
        <center><h2><font color="FF3322">Are you sure?</font></h2></center>
        </div>
        <div class="modal-body">
            <p><font color="994433">
                <center><B><h3>Please Verify your edits!!</h3></b><br>
                <u>Especially the <b>'Add to Balance'</b> field</u>...</center><br><br>
            </font></p>
            <center>        
            <form action="UpdateClient" method="post" name="UpdateClient" style="display: inline;">
                <button type="submit" class="btn btn-danger btn-xs" value="UpdateClient" name="DO_ME" style="display: inline;">SAVE UPDATE</button>
            </form> &nbsp;
            <form action="" method="post" name="" style="display: inline;">
                <button type="button" class="btn btn-info btn-xs" data-dismiss="modal" style="display: inline;">GO BACK</button>
            </form>
            <form action="/dev/Dashboard_Management.do" method="post" name="" style="display: inline;">
                <button type="submit" class="btn btn-link btn-xs" value="" name="do_NoARGS" style="display: inline;"> or 
                    <font color="FF3322">ABORT</font> (to Dashboard) </button>
            </form>
            </center>
        </div>
        <div class="modal-footer">
            <center><h3>Your caution and diligence are appreciated!</h3></center>
        </div>
    </div>
  </div>
</div>

<center>
<button id="myBtn" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" >SAVE EDITS for ID#359</button>
</center>

<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() { modal.style.display = "block"; }
span.onclick = function() { modal.style.display = "none"; }
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
} 
</script>
    <!-- ############ FIRST INSTANCE FINISHED ############## -->
<b>or </b>

<br><button type="submit" value="NewCustomer" name="DO_ME" form="special"> ADD ANOTHER NEW ENTRY </button></center><br>

<h4><span style="display:inline-block; width: 25pt;"></span>
ID : 360
<span style="display:inline-block; width: 25pt;"></span>
<font color="#ff4444"><B>*</B></font>
Company : <font color="#2222ff"><b>SLATE GRANITE<input name="cCompany" id="cCompany" type="hidden" value="SLATE GRANITE" form="normal"  /></b></font></h4>
<span style="display:inline-block; width: 60pt;"></span>Notes:<span style="display:inline-block; width:78pt;"></span><font size="2">Lifetime Account Value: <b>$0.00</b> (spent so far) </font><br>
<span style="display:inline-block; width: 60pt;"></span> <textarea cols="90" rows="10" name="cNotes" form="normal" ></textarea><br>
<span style="display:inline-block; width: 60pt;"></span><font size="2">Client Since: 2016-01-31 19:21:38.403&nbsp;&nbsp;|&nbsp;
  Last Modified: 2016-01-31 19:21:38.403&nbsp;&nbsp;| 
  &nbsp;&nbsp;Available Balance: <b>$0.00</b> as of (2016-01-31 19:21:38.403) </font><br>
<span style="display:inline-block; width: 60pt;"></span><b>Add to Balance</b>: $<input maxlength="12" name="crAmt" size="12" type="text" value="0" form="normal" /> (amount being deposited) <br>

<hr>

<!-- ############ REPEATING ############## -->

<div id="myModal" class="modal fade" role "dialog">
  <div class="modal-dialog ">
    <!-- Modal content -->
    <div class="modal-content">
        <div class="modal-header">
        <span class="close"><button type="button" class="close" data-dismiss="modal">&times;</button></span>
        <center><h2><font color="FF3322">Are you sure?</font></h2></center>
        </div>
        <div class="modal-body">
            <p><font color="994433">
                <center><B><h3>Please Verify your edits!!</h3></b><br>
                <u>Especially the <b>'Add to Balance'</b> field</u>...</center><br><br>
            </font></p>
            <center>         
            <form action="UpdateClient" method="post" name="UpdateClient" style="display: inline;">
                <button type="submit" class="btn btn-danger btn-xs" value="UpdateClient" name="DO_ME" style="display: inline;">SAVE UPDATE</button>
            </form> &nbsp;
            <form action="" method="post" name="" style="display: inline;">
                <button type="button" class="btn btn-info btn-xs" data-dismiss="modal" style="display: inline;">GO BACK</button>
            </form>
            <form action="/dev/Dashboard_Management.do" method="post" name="" style="display: inline;">
                <button type="submit" class="btn btn-link btn-xs" value="" name="do_NoARGS" style="display: inline;"> or 
                    <font color="FF3322">ABORT</font> (to Dashboard) </button>
            </form>
            </center>
        </div>
        <div class="modal-footer">
            <center><h3>Your caution and diligence are appreciated!</h3></center>
        </div>
    </div>
  </div>
</div>

<center>
<button id="myBtn" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" >SAVE EDITS for ID#359</button>
</center>

<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() { modal.style.display = "block"; }
span.onclick = function() { modal.style.display = "none"; }
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
} 
</script>
    <!-- ############ SECOND INSTANCE FINISHED ############## -->

<script src="http://mistic100.github.io/Bootstrap-Confirmation/dist/bootstrap-confirmation2/bootstrap-confirmation.min.js"></script>
<script>
    \$('[data-toggle=confirmation]').confirmation();
    \$('[data-toggle=confirmation-singleton]').confirmation({ singleton:true });
    \$('[data-toggle=confirmation-popout]').confirmation({ popout: true });
</script>

</body>
</html>

1 个解决方案

#1

You have repeated a lot of the code twice. Also repeating id's for elements, and repeating the actual js-code. This will probably lead to interference of some kind.

你重复了很多代码两次。同时重复元素的id,并重复实际的js-code。这可能会导致某种干扰。

Try to write functions to achieve this instead of repetitive code, and you'll probably have more luck...

尝试编写函数来实现这个而不是重复的代码,你可能会有更多的运气......

#1