2017-01-18 10 views
0

フォームに2つの送信ボタンがあります。ボタン1、ボタン2をクリックすると、クリック(送信)時にbutton2を無効にします。&をクリックします。愚かな質問を申し訳ありません、私は初心者です。
$(document).on("click", "#test2", function() {jQuery Clickイベントがフォーム内の送信ボタンで機能しない

$(document).ready(function(){ 
 
      $(document).on("click", ".test2", function() { 
 
       if ($('#test2').is(':visible')) { 
 
        $('#test2').hide(); 
 
       } else { 
 
        $('#test2').show(); 
 
       }; 
 
      }); 
 
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<form id="test" method="post"> 
 
    <input id="test" type="submit" value="button1" class="test1"> 
 
    <input id="test2" type="submit" value="button2"/> 
 
</form>

+0

削除しないでください。誰かが答える機会があった前に、誰かがこの昨日の質問をほとんど投稿して削除しました。 –

+0

あなたが非表示にしたい同じボタンに 'click''イベント'を使用しているので、一度非表示にすると表示されません。この場合、** else **は役に立たなくなります –

答えて

0

Clickeイベントは、それはここで

$(document).on("click", "#test2", function() 

は、サンプル・コードであるIDに、クラスの変化に招かれています。これについて

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
    <script type="text/javascript"> 
 
     $(document).ready(function() { 
 
      $(document).on("click", "#test2", function (e) { 
 
       if ($('#test2').is(':visible')) { 
 
        $('#test2').hide(); 
 
        e.preventDefault(); 
 
       } else { 
 
        $('#test2').show(); 
 
        e.preventDefault(); 
 
       }; 
 
      }); 
 
     }); 
 
    </script> 
 
</head> 
 

 
<body> 
 

 
    <form id="test" method="post"> 
 
     <input id="test" type="submit" value="button1" class="test1"> 
 
     <input id="test2" type="submit" value="button2" /> 
 
    </form> 
 
</body> 
 

 
</html>

+0

ありがとうございました.... – sadi

+0

申し訳ありませんフォームを提出しません。 – sadi

+0

@sadiその後、 'e.preventDefault();' –

1

変更
$(document).on("click", ".test2", function() {
ボタンが隠されて、それが見えないでしょうしたら、あなたは同じボタンにクリックイベントを使用しているので、非表示にしたいですこの場合、以外のは無意味です。

フォームを送信してこのフォーム/ページに戻ったときに、ボタンが表示されます。 @Nitheeshとmakeによって示唆されているように
e.preventDefault();
私は何をしようとするクリアしていないよ:
をフォームを送信したくない場合、およびいくつかのより多くの操作を実行するには、あなたが使用することをNEDDそれdisplay:noneまたはdisabled

0

どのように? disabled#test2に追加し、#testをクリックすると削除します。

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
    <script type="text/javascript"> 
 
     $(document).ready(function() { 
 
      $("#test").on("click", function() { 
 
\t \t \t \t $("#test2").prop("disabled",false); 
 
      }); 
 
     }); 
 
    </script> 
 
</head> 
 

 
<body> 
 

 
    <form id="test" method="post"> 
 
     <input id="test" type="button" value="button1" class="test1"> 
 
     <input id="test2" type="button" value="button2" disabled /> 
 
    </form> 
 
</body> 
 

 
</html>

0

は私はJS & HTMLを少し変更します。

なぜですか? button1をクリックしたときにsubmit2でbutton2を無効にしたい場合は、formに2つのsubmittedを入れないことをお勧めします。 buttonを提出してform提出を開始し、<a>タグを使用してbutton2を有効にします(<a>タグは送信イベントを再度トリガーしません)。

<form id="test" method="post"> 
    <a id="test1" href="#" class="btn btn-primary">button1</a> 
    <button id="test2" type="submit" class="btn btn-primary">button2</button> 
</form> 

とjQueryで、私たちはあなたの$(document).ready()関数内でこのような何か:https://jsfiddle.net/dobbinx3/Lu2ns80b/1/

CYA:あなたは、アクションのコードを見ることができるので、私はこのバイオリンを作った場合

$('#test').on('submit', formSubmit); 
$('#test1').on('click', unableButton); 

function formSubmit() { 
    $('#test2').prop('disabled', true); 

// Here you put the rules to submit your form 
} 

function unableButton (e) { 
    e.preventDefault(); 

    $('#test2').prop('disabled', false); 
} 

を。

関連する問題