提交按钮不会将第二个查询字符串添加到 url

Question

我是 HTML 的新手，正在努力处理查询字符串 url 的形成

当我单击 "Submit" 按钮时，它只会将第一个查询字符串 (uuid) 添加到 url 而不是第二个 (datetime)。我觉得我在某个地方犯了一个非常愚蠢的错误。另外，如果超过 2 个，我怎样才能将它们按固定顺序排列？例如：

https://foobar12345.com/test/?uuid_id=asjnd938hd-3423-dc-aa3243249&date=20190122

<!DOCTYPE html>
<html>
   <head>
      <title>Testing website</title>
      <meta charset="utf-8">
      <meta name="viewport"
         content="width=device-width, initial-scale=1">
      <link rel="stylesheet"
         href=
         "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
   </head>
   <body>
      <div class="container">
         <h1 style="text-align:center;color:green;">
            Learning HTML and JS
         </h1>
         <form action="https://foobar12345.com/test/" method="get" target="_blank">
            <div class="form-group">
               <label for="">uuid:</label>
               <input class="form-control" type="text" name="uuid_id" placeholder="unique id">
            </div>
         <form>
            <div class="form-group">
               <button class="btn btn-success float-right"
                  type="submit">
               Submit
               </button>
            </div>
         </form>
      </div>
      <form action="https://foobar.com/test/" method="get">
         <div class="container mt-5  mb-5" style="width: 400px">
            <input type="date" id="picker" class="form-control" name="start_date">
      </form>
      </div>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
      <script type="text/javascript" src="daterangepicker.js"></script>
   </body>
</html>

Answer 1

根据您的代码，您在使用多个 FORM 标签时犯了错误，这就是为什么您的表单仅提交第一个输入值，即 uuid_id

在您的代码中使用下面的表单而不是您的表单，它将按预期工作

<form method="GET" action="https://foobar12345.com/test/">
          <div class="form-group">
            <label for="uuid_id">uuid:</label>
            <input type="text" class="form-control" name="uuid_id" placeholder="unique id">
          </div>
          <div class="form-group">
            <label for="date">Date:</label>
            <input type="text" id="picker" class="form-control" name="start_date" />
          </div>
          <input type="submit" class="btn btn-success" name="submit">
        </form>

Answer 2

我发现您使用了多种形式。在一个表单中添加所有输入字段并提交。

检查下面的代码。

<!DOCTYPE html>
<html>

  <head>
    <title>Testing website</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" />
  </head>

  <body>
    <div class="container">
      <h1 style="text-align:center;color:green;">
        Learning HTML and JS
      </h1>
      <form action="https://foobar12345.com/test/" method="get" target="_blank">
        <div class="form-group">
          <label for="">uuid:</label>
          <input class="form-control" type="text" name="uuid_id" placeholder="unique id">
        </div>
        <div class="container mt-5  mb-5" style="width: 400px">
          <input type="date" id="picker" class="form-control" name="start_date">
        </div>
        <div class="form-group">
          <button class="btn btn-success float-right" type="submit">
            Submit
          </button>
        </div>
      </form>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.min.js"></script>
      <script type="text/javascript" src="daterangepicker.js"></script>
      </div>
  </body>
</html>

提交按钮不会将第二个查询字符串添加到 url

Submit button doesn't add second query string to url

html

javascript

url

query-string