Submit button doesn't add second query string to url

Question

I am new to HTML and struggling with query strings url formation

when I click "Submit" button it only adds the first query string (uuid) to the url but not the second one (datetime). I feel like I am making a very silly mistake somewhere. Also how can I put them in a fixed order if there are more than 2 ? eg:

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>

please provide your js code

rsp
– rsp

2020-01-13 10:15:52 +00:00
Commented Jan 13, 2020 at 10:15 — rsp
– rsp, Commented Jan 13, 2020 at 10:15

Niranth Reddy · Accepted Answer · 2020-01-13 10:34:16Z

I observe you are using multiple forms. Add all your input fields in one form and Submit.

Check the below code.

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

Chandan · Accepted Answer · 2020-01-13 10:31:45Z

As per your code, you are making mistake by using multiple FORM tags and that's why your form is submitting only first input value i.e. uuid_id

instead of your form use below form in your code and it will work as expected

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

Collectives™ on Stack Overflow

Submit button doesn't add second query string to url

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related