2

我的页面中有两个表格。我使用 HTML 内联样式隐藏表单 2。

        <form id="productionForm" name="productionForm" method="POST" style="display:none;">

我在表格 1 上有输入按钮。

    <input id="buttonProductionSummary"  class="buttonProductionSummary" type="submit" value="Submit" />

我有 JQuery 代码在表单 1 的按钮单击时加载表单 2。我的 JQuery 代码如下。

    <script type="text/javascript">
    $(document).ready(function(){

        $("#buttonProductionSummary").click(function() {
            $("#productionForm").show();
        });
    });
</script>

当我单击表单一中的按钮时，页面再次重新加载，因此表单 2 出现并再次消失。当我单击表单 1 上的按钮时，如何使表单 2 出现。

4

4 回答 4

3

您需要防止表单的默认行为：

$("#buttonProductionSummary").click(function(e) {
    $("#productionForm").show();

    e.preventDefault();
});
于 2012-12-15T00:24:51.567 回答
1

问题是单击表单 1 中的按钮会触发表单的提交（默认事件）......因此，页面重新加载。您应该通过使用提交事件作为触发器来防止这种情况，使用 AJAX 处理表单并将结果输出到#productionForm显示之前：

$("#form1").submit(function() {
    /* AJAX calls and insertion into #productionForm */
    $("#productionForm").show();
    return false;
});
于 2012-12-15T00:29:26.147 回答
1

根据我的要求，我尝试使用以下方式显示要编辑的表单并隐藏所有剩余的表单；

<html>

<head>
<script>
$(document).ready(function(){   

    $("#what").click(function() { //event called

         $(".hello").hide(); // to hide all forms
          $('#ayyappa1').show();  //to dispaly needed form only
          return false //option to stop
 });

 });


</script>


</head>
<body>
<form id ="ayyappa1 " class ="hello"> // declare class for every form
<input type="check" class="what">   // trigger of click event 
</form>
<form id ="ayyappa2 " class ="hello">
<input type="check" class="what">
</form>
<form id ="ayyappa3 " class ="hello">
<input type="check" class="what">
</form>
<form id ="ayyappa4 " class ="hello">
<input type="check" class="what">
</form>
</body>
</html>
于 2013-12-14T13:46:35.243 回答
1

上面的答案都不起作用，所以我自己想通了。这段代码就像一个魅力。

<button id="btn" class="editbutton" >Edit your Profile</button>
<form id="editForm"  action="" method="post" name="editForm">

<input type="text" name="txtname" placeholder="enter your name">

</form>`

<script type="text/javascript">

    $(document).ready(function(){
        $("#editForm").hide();
        $("#btn").click(function(e) {
            $("#editForm").show();
            $("#btn").hide();

        });
    });
</script>
于 2016-12-07T20:25:14.940 回答