フォーム送信ボタンが機能しないjQueryの非表示/表示機能を使用する場合

フォームがあり、ユーザーはjQueryを使用してそれを表示/非表示できます。フォーム送信ボタンが機能しないjQueryの非表示/表示機能を使用する場合

問題：ユーザクリック表示/非表示（矢印アイコン）フォーム送信後のみ1時間に動作します。その後、フォーム提出ボタンをクリックしたときに動作しません。

私が見つけたもの：この問題に関連するURLに「＃」があるようです。

この問題を解決するにはどうすればよいですか？

Jsfiddle：https://jsfiddle.net/damithruwan1234/t795ewx3/2/（jsfiddleはgetメソッドを許可していないので、あなたがこのことから、それをテストすることはできません）

全コード：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Example</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> 

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

$("#hide_search").click(function(){ 
    $("#search_panel").hide(1000); 
    $("#show_search").show(); 
    $("#hide_search").hide(); 
}); 

$("#show_search").click(function(){ 
    $("#search_panel").show(1000); 
    $("#show_search").hide(); 
    $("#hide_search").show(); 
}); 
}); 
</script> 


</head> 
<body> 

<div class="container"> 
    <h2>Vertical (basic) form</h2> 
    <div class="col-sm-8 col-sm-offset-2" id="search_panel"> 
    <form action=""> 
    <div class="form-group"> 
     <label for="email">Email:</label> 
     <input type="text" class="form-control" id="email" value="dfdf" placeholder="Enter email" name="email"> 
    </div> 
    <div class="form-group"> 
     <label for="pwd">Password:</label> 
     <input type="text" class="form-control" id="pwd" value="ssds" placeholder="Enter password" name="pwd"> 
    </div> 
    <div class="checkbox"> 
     <label><input type="checkbox" name="remember"> Remember me</label> 
    </div> 
    <input type="submit" class="btn btn-info" value="SEARCH"> 
    </form> 
    </div> 
</div> 

<div class="col-sm-8 col-sm-offset-2"> 
<a href="#" id="hide_search"> 
<span class="fa-stack fa-lg"> 
    <i class="fa fa-circle fa-stack-2x"></i> 
    <i class="fa fa fa-angle-up fa-stack-1x fa-inverse"></i> 
</span> 
</a> 

<a href="#" id="show_search" style="display: none;"> 
<span class="fa-stack fa-lg"> 
    <i class="fa fa-circle fa-stack-2x"></i> 
    <i class="fa fa fa-angle-down fa-stack-1x fa-inverse"></i> 
</span> 
</a> 
</div> 

</body> 
</html>

出典

2017-08-15 Ruwantha

'a'タグの' href = '＃' 'を削除しようとしました – prasanth

@prasad試しました。 ''表示/非表示機能から削除すると機能しません。 – Ruwantha

'aタグ全体ではなく' hrefのみを削除するだけです。このhttps://jsfiddle.net/t795ewx3/3/ – prasanth

は、表示/非表示をクリックしてイベントにpreventDefault()を追加します。以下の変更されたスクリプトを使用してください。（実際の問題は、あなたが表示/非表示]ボタンをクリックしたとき、それはURLに「＃」を追加しますです、それは、なぜ「ゲット」メソッドを使用してフォームを送信することができない）

$("#hide_search").click(function(e){ 
e.preventDefault(); 
    $("#search_panel").hide(1000); 
    $("#show_search").show(); 
    $("#hide_search").hide(); 
}); 

$("#show_search").click(function(e){ 
e.preventDefault(); 
    $("#search_panel").show(1000); 
    $("#show_search").hide(); 
    $("#hide_search").show(); 
});

出典

2017-08-15 08:58:21 Karthik

ありがとう:-) URLに「＃」が付いていると送信できない理由はありますか？ – Ruwantha

'Get'メソッドはフォームの値をURLクエリ文字列として渡しますが、 '＃'の後ろにあるものは送信されません（非表示/表示リンクをクリックするとフォームにフォームの末尾に '＃'が追加されます）。 URLとフォームの値を '＃'の後に追加してフォームを送信すると、それが動作しない理由）、POSTメソッドで動作します。 – Karthik

はあなたが表示/非表示ボタンを変更する必要がありますあなたはjqueryの中でこのような何かを行うことができます

<a href="javascript:void(0);"

またはこのようなhref属性、それはハッシュが変更されたためで、おそらく動作しないのです

$('a[href="#"]').on('click', function(e){ 
    e.preventDefault(); 
});

。この方法を使用すると、ハッシュは変更されません。

出典

2017-08-15 09:00:20

フォーム送信ボタンが機能しないjQueryの非表示/表示機能を使用する場合

答えて

関連する問題