如何在弹出框中显示一个表单,该表单将在其他jsp上

时间:2015-08-12 10:51:46

标签: javascript java jquery jsp

我有两个jsp页面。在第一页上,我显示一些内容,点击该按钮EditButton,我必须显示一个将来自第二个jsp的表单。 谁能请给我一些例子? 我的第一个jsp在这里

  

test1.jsp

<%@ include file="/WEB-INF/includes/includes.jsp"%>

<portlet:actionURL var="dependantModeActionUrl">
    <portlet:param name="mode" value="dependantsMode"/>
</portlet:actionURL>


<form:form id="dependentsModeForm" name="dependentsModeForm" modelAttribute="dependantsForm" method="post" action='<%=renderResponse.encodeURL(dependantModeActionUrl.toString())%>'>

<div class="cta-group pull-right">
<div id="terms" style="display:none;">
   </div>
         <button type="submit" class="cta" name="add">Add</button>
         <button type="submit" class="cta" name="edit">Edit</button>
         <button type="submit" class="cta cta--primary" name="view">View</button>
          <button type="submit" id="remove" class="cta" name="remove" >Remove</button>
          <!-- <a id="remove" href="#" onclick="removeDependants()">Remove</a> -->
          <!-- <input type="button" class="cta" onclick="loadPage()" value="Remove"/>
          <div  id='modalbox'></div> -->
         <!--  <a  href="#" onclick="openMyDialog()" >test</a> -->


   </div> 
</form:form>
<script type="text/javascript">

$(document).ready(function () {
    $(function () {
        $("#terms").dialog({

            autoOpen: false,
            modal: true,
            draggable:false,
            cache:true,
            resizable:false,
            width:'90%',
            title:'Remove Contact',
            buttons:[
                     {
                         text:'Remove',
                         class:'cta',
                         click:function(){
                             $(this).dialog('close');
                         }
                     }

                     ]

        });
    });
});

$("#remove").click(function (e) {
    e.preventDefault();
    $("#terms").dialog('open');
});
</script>

另一方面,我在其他

上创建了一个表单
  

test2.jsp

<html>
<head>
<title>Testtitle>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="/jquery_popup.css" />
<script src="/jquery_popup.js"></script>
</head>
<body>
<div id="mainform">

<div class="form" id="popup">
<p id="onclick">Popup</p>
<br/>
</div>
</div>

<!--Contact Form -->
<div id="contactdiv">
<form class="form" action="#" id="contact">
<img src="images/button_cancel.png" class="img" id="cancel"/>
<h3>Contact Form</h3>
<hr/><br/>
<label>Name: <span>*</span></label>
<br/>
<input type="text" id="name" placeholder="Name"/><br/>
<br/>
<label>Email: <span>*</span></label>
<br/>
<input type="text" id="email" placeholder="Email"/><br/>
<br/>
<label>Contact No: <span>*</span></label>
<br/>
<input type="text" id="contactno" placeholder="10 digit Mobile no."/><br/>
<br/>
<label>Message:</label>
<br/>
<textarea id="message" placeholder="Message......."></textarea><br/>
<br/>
<input type="button" id="send" value="Send"/>
<input type="button" id="cancel" value="Cancel"/>
<br/>
</form>
</div>
</form>

</div>
</body>
</html>

现在,当我点击

上的删除按钮时
  

test1.jsp   我可以看到一个弹出窗口即将到来,但我想在弹出窗口中显示来自的字段   test2.jsp

1 个答案:

答案 0 :(得分:0)

你需要在这里使用CSS来创建固定在其他一切之上的div&amp;你可以在iFrame中调用第二个JSP页面。

或者更好地使用相同的JSP页面&amp;使用AJAX点击按钮时显示内容。