表单提交可以同时使用 html 但不能使用 javascript

Question

我想实现用户可以在网站上搜索，然后通过单击链接（触发 javascript）过滤他的搜索结果，这样他就可以得到人而不是文章。就数据库和 PHP 而言，它可以工作，但是当我尝试提交此代码时：

<form id="searchform" class="navbar-form" role="search" method="post" action="/search">
                    {{ csrf_field() }}
                  <div class="input-group">
                      <input type="text" class="form-control" style="width: 300px;" placeholder="Search" name="searchterm" id="srch-term" value="<?php if(isset($searchterm)) { echo $searchterm; } ?>">
                      <div class="input-group-btn">
                          <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
                      </div>
                  </div>
                  </form>

... 使用此代码：

function submit() {
  document.getElementById("searchform").submit();
}

这是我最初用来与我的数据库通信的东西，url 指向一个返回用户的 PHP 函数。 （作品） 以下代码仅通过 HTML 按钮 提交，而不是通过 javascript 提交表单的链接。

    $("#searchform").submit(function(e){
  e.preventDefault();
  var form = $(this);
  $.ajax({
      type: "POST",
      url : "/search/people",
      data : form.serialize(),
      dataType : "json",
      success : function(data){
          if(data.length > 0) {
            console.log(data);
          } else {
            console.log('Nothing in the DB');
          }
      }
  }, "json");
});

当我按下链接时，我在 控制台 中没有得到任何结果，但是使用搜索栏按钮 (html) 我在控制台中得到了一些结果。

所以我想做的是这段代码中的第二个链接：

  <div class="list-group">
  <a href="#" class="list-group-item active">sounds</a>
  <a id="people" onclick="submit()" href="#" class="list-group-item">people</a>
  <a href="#" class="list-group-item">requests</a>
</div>

我将提交 javascript 那部分不起作用。

有什么我可以尝试的建议吗？

Answer 1

这是您的代码的一个工作示例：

https://jsfiddle.net/jonva/x99nxz0h/1/

看起来很好。

<form id="searchform" class="navbar-form" role="search" method="post" action="/echo/json">
  abc
  <div class="input-group">
    <input type="text" class="form-control" style="width: 300px;" placeholder="Search" name="searchterm" id="srch-term" value="">
    <div class="input-group-btn">
      <button class="btn btn-default" type="submit">Search</button>
    </div>
  </div>
</form>



$("#searchform").submit(function(e) {
   e.preventDefault();
   var form = $(this);
   $.ajax({
     type: "POST",
     url: "/echo/json",
     data: form.serialize(),
     dataType: "json",
     success: function(data) {
       if (data.length > 0) {
         console.log(data);
       } else {
         console.log('Nothing in the DB');
       }
     }
   }, "json");
 });