Question

我目前正面临一个问题，我想通过点击按钮使用bootstrap显示对话框。我在html（.jsp）中创建了对话框，在另一个.jsp中创建了提交按钮但是，在我单击按钮后，它只显示空白页而不是对话框。

SubmitForm.jsp

<form id="cusPayment" name="cusPayment" method="post" action="CusConfirmPayment.jsp">
                <input id="accid" name="accid" type="hidden" value="<%=accno%>">
                <input id="statid" name="statid" type="hidden" value="<%=ref%>">
                <input id="amt" name="amt" type="hidden" value="<%=amt%>">
                <input id="lflag" name="lflag" type="hidden" value="E">


 </form> 



            <a data-toggle="modal" data-target="#loginModal" href="#" class="btn-green   pay-btn" id='paynow'>Pay Bill Now<i class="fa fa-chevron-right"></i></a>
           <div>
    </div>


$(document).ready(function() {
 $(".paynow,#paynow").click(function(event){
            event.preventDefault();
             $("#cusPayment").submit();
 });

CusConfirmPayment.jsp

    <div class="modal fade pay-now" id="loginModal"  tabindex="-1" role="dialog" aria-hidden="true">
                <div class="modal-dialog modal-top">
                    <div class="modal-content self-content">
                        <div class="modal-header remove-border">
                            <button type="button" class="close-btn" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body popup-copy">
                            <div class="col-sm-10 popup-title">Confirm Payment Amount</div>
                        </div>
                    </div>
    </div>
  </div>

Answer 1

我做了plunkr for you to try

我必须禁用你的javascript的提交功能，因为你不想在这里提交表单，你只想显示模态窗口。如果你这样做，你也不需要通过隐藏输入传递变量。它应该在同一页面上。在plunkr中，我删除了另一页并将其内容添加到同一页面上，以便它可以看到它。

<form id="cusPayment" name="cusPayment" method="post" action="#">
<input id="accid" name="accid" type="hidden" value="<%=accno%>">
<input id="statid" name="statid" type="hidden" value="<%=ref%>">
<input id="amt" name="amt" type="hidden" value="<%=amt%>">
<input id="lflag" name="lflag" type="hidden" value="E">
</form>
<a data-toggle="modal" data-target="#loginModal" href="#" class="btn-green pay-btn" id='paynow'>Pay Bill Now<i class="fa fa-chevron-right"></i></a>
<div>
</div>



<div class="modal fade pay-now" id="loginModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-top">
      <div class="modal-content self-content">
        <div class="modal-header remove-border">
          <button type="button" class="close-btn" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body popup-copy">
          <div class="col-sm-10 popup-title">Confirm Payment Amount</div>
        </div>

      </div>
    </div>
  </div>
  <script>
    $(document).ready(function() {
      $("#paynow").click(function(event) {
        event.preventDefault();

        //$("#cusPayment").submit();
        //this submits the page, you want to show a modal window not another page
      })
    })
  </script>

如何将数据目标id传递给另一个jsp引导程序

1 个答案: