how to pass data-target id to another jsp bootstrap - html

Question

I am currently facing an issue that I want to display the dialog box using bootstrap by clicking on the button. I made the dialog box in html (.jsp), and the submit button in another .jsp but, after I click on the button, it just displays blank page instead of the dialog box.
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">×</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

I have made a plunkr for you to try
I had to disable the submit function of your javascript because you don't want to submit the form here you just want to show the modal window. If you do it this way you don't need to pass variables via hidden inputs either. it should be on the same page.
In the plunkr I have removed the other page and added its content on the same page so it can see it.
<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">×</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>