使用jQuery隐藏/显示功能时表单提交按钮不起作用答案

【问题标题】：Form Submitting Button Not Working When using jQuery hide/show function使用jQuery隐藏/显示功能时表单提交按钮不起作用
【发布时间】：2017-08-15 08:44:16
【问题描述】：

我有表单，用户可以使用 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>

【问题讨论】：

尝试删除a标签中的href='#'
@prasad 我试过了。如果从<a href="#" id="hide_search"> 中删除，则显示/隐藏功能将不起作用。
只删除href 不是整个a tag 看到这个jsfiddle.net/t795ewx3/3
@prasad 首先，我只删除了#。然后按照您的建议，我删除 href="#"part 工作正常 :-) 感谢您的帮助 :-) 您知道为什么当 URL 有 # 标记时它不起作用吗？
我想是的。如果你点击a# 值更新为.com#.# 等url 防止下一页重定向。它只执行相同的页面。这就是为什么它限制了提交。如果你应用提交路径 url 是下一个 #。它有一些路径问题 com#/aftersubmit.html

标签： javascript jquery html css forms

【解决方案1】：

在隐藏/显示点击事件中添加preventDefault()。使用以下修改后的脚本。（实际问题是当您点击隐藏/显示按钮时，它会在 URL 上添加“#”，这就是为什么无法使用“Get”方法提交表单的原因）

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

【讨论】：

谢谢 :-) 你知道为什么 URL 有 '#' 时无法提交吗？
因为 'Get' 方法会将表单值作为 URL 查询字符串传递...但是 '#' 之后的任何内容都不会提交（在您的表单中单击它正在添加的隐藏/显示链接URL 末尾的“#”以及提交表单时在“#”之后添加的所有表单值。这就是它不起作用的原因），它将适用于“POST”方法。

【解决方案2】：

您应该像这样更改隐藏/显示按钮的 href 属性，

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

或者你可以在 jquery 中做这样的事情，

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

它不起作用可能是因为哈希更改了。如果您使用这种方式，哈希不会改变。

【讨论】：