2

私のページには2つのフォームがあります。HTMLインラインスタイルを使用してフォーム2を非表示にします。

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

フォーム1に入力ボタンがあります。

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

フォーム1のボタンクリックでフォーム2をロードするJQueryコードがあります。私のJQueryコードは次のとおりです。

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

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

フォーム1のボタンをクリックすると、ページが再度リロードされるため、フォーム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 に答える