如何获取表单结果URL jquery答案

【问题标题】：How to get form result URL jquery如何获取表单结果URL jquery
【发布时间】：2021-12-29 20:48:50
【问题描述】：

HTML

<form action="/" method="get" class="form-search" autocomplete="off">
  <input type="search" name="s" id="search" placeholder="Search" value="test">
  <input type="hidden" name="post_type" value="post" />
</form>

结果：/?s=test&post_type=post

$("form").submit(function(e) {
  e.preventDefault();
  const formAction = $(this).attr("action");
  alert(formAction);
  return false;
});

body {
  margin: 100px;
  font-size: 20px;
  font-family: sans-serif;
}

input {
  margin-bottom: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/" method="get" class="form-search" autocomplete="off">
  <input type="search" name="s" id="search" placeholder="Search" value="test">
  <input type="hidden" name="post_type" value="post" />
</form>

result<br> <strong>/?s=test&post_type=post</strong>

结果：/

【问题讨论】：

这里没有问题。

标签： jquery forms url action

【解决方案1】：

使用.serialize() 将所有表单输入作为 URL 编码字符串。

$("form").submit(function(e) {
  e.preventDefault();
  const formAction = $(this).attr("action");
  const formFields = $(this).serialize();
  alert(`${formAction}?${formFields}`);
  return false;
});

body {
  margin: 100px;
  font-size: 20px;
  font-family: sans-serif;
}

input {
  margin-bottom: 50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="/" method="get" class="form-search" autocomplete="off">
  <input type="search" name="s" id="search" placeholder="Search" value="test">
  <input type="hidden" name="post_type" value="post" />
</form>

result<br> <strong>/?s=test&post_type=post</strong>

【讨论】：