表單提交按鈕不工作當使用jQuery隱藏/顯示功能

我有窗體，用戶可以使用jQuery顯示/隱藏它。表單提交按鈕不工作當使用jQuery隱藏/顯示功能

問題：用戶點擊顯示/隱藏（箭頭圖標）表單提交後將工作只有一次。我的意思是之後，當我點擊表單提交按鈕不工作。

我發現了什麼：好像在這個問題中有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

只刪除'href'不是一個'標籤'看到這個https://jsfiddle.net/t795ewx3/3/ – prasanth

上隱藏/顯示單擊事件添加preventDefault()。使用下面修改的腳本。（實際的問題是，當你點擊隱藏/顯示按鈕，它會添加「＃」的網址，這就是爲什麼無法使用「獲取」的方法來提交您的形式）

$("#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

你應該改變隱藏/顯示按鈕href屬性就是這樣，

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

，或者你可以做這樣的事情jQuery中，

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

這並不可能，因爲工作的散列改變。如果你使用這種方式，哈希值不會改變。

來源

2017-08-15 09:00:20

表單提交按鈕不工作當使用jQuery隱藏/顯示功能

回答

相關問題