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/

看起来很好。

text-align:center;

表单提交使用html而不是javascript同时使用

1 个答案: