Кнопка «Отправить» не добавляет в URL вторую строку запроса. - PullRequest
Новая
       6

Кнопка «Отправить» не добавляет в URL вторую строку запроса.

0 голосов
/ 13 января 2020

Я новичок в HTML и борюсь с формированием URL строк запроса

, когда я нажимаю кнопку "Отправить", он добавляет только первую строку запроса (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>

Ответы [ 2 ]

1 голос
/ 13 января 2020

Я заметил, что вы используете несколько форм. Добавьте все поля ввода в одной форме и отправьте.

Проверьте приведенный ниже код. 

<!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>
1 голос
/ 13 января 2020

Согласно вашему коду, вы делаете ошибку, используя несколько тегов 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...