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

I want to achieve that the user can search on the website and then filter his search results by clicking on a link (which triggers javascript) so he gets people instead of articles. In terms of database and PHP it works, but when I try to submit this code:

我希望用户可以在网站上搜索，然后点击一个链接(触发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>

... with this code:

…这段代码:

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

this is what I use to communicate with my database initially, the url leads to a PHP function that returns the users. (works) The following code only gets submitted with HTML button, but not with the link which will submit the form through javascript.

这是我最初与数据库通信时使用的url，该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");
});

I get no results in the console when I press the link, BUT with the search bar button (html) I get something in the console.

当我按下链接时，控制台里没有结果，但是通过搜索栏按钮(html)，我在控制台里得到了一些东西。

So what I want to do is with the second link in this code:

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

  <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>

I will submit the javascript that part is not working.

我将提交不工作的部分的javascript。

Any suggestions on what I can try?

对我能尝试的有什么建议吗?

1 个解决方案

#1

Here's a working example of your code:

下面是您的代码的一个工作示例:

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

It seems perfectly fine.

看起来非常好。

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

#1