How to display a HTML page after the form data has been submitted?

Question

Currently after submitting the form data all it says is whether the process was successful or not. I want to display a specific html page instead of the default white page it opens. Like a page which says the query was successfully submitted instead of a prompt.

I didn't include the CSS as it was pretty messed up!

<script>
      src="https://code.jquery.com/jquery-3.4.1.js"
      integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
      crossorigin="anonymous">
  </script>
    <script>
    function SubForm (){
        $.ajax({
            url:'https://api.apispreadsheets.com/data/14777/',
            type:'post',
            data:$("#myForm").serializeArray(),
            success: function(){
              alert("Form Data Submitted. We will get back to u shortly! :)")
            },
            error: function(){
              alert("There was an error :(")
            }
        });
    }
    </script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Contact - Globe Trotter</title>
    <link rel="stylesheet" type="text/css" href="assets/stylesheets/main.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

    <script src="https://kit.fontawesome.com/493f5db5ed.js" crossorigin="anonymous"></script>

  <script>
      src="https://code.jquery.com/jquery-3.4.1.js"
      integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
      crossorigin="anonymous">
  </script>
    <script>
    function SubForm (){
        $.ajax({
            url:'https://api.apispreadsheets.com/data/14777/',
            type:'post',
            data:$("#myForm").serializeArray(),
            success: function(){
              alert("Form Data Submitted. We will get back to u shortly! :)")
            },
            error: function(){
              alert("There was an error :(")
            }
        });
    }
    </script>
</head>
<body>


    <!-- Header -->

    <header>
        <a href="#" class="logo">Logo</a>
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="destinations.html">Destinations</a></li>

            <li>
                <div class="dropdown">
                    <button class="dropbtn"><a href="destinations.html">Places</a></button>
                <!--    <button class="dropbtn">Places</button> -->
                    <div class="dropdown-content">
                    <a href="rome.html">Rome</a>
                    <a href="venice.html">Venice</a>
                    <a href="london.html">London</a>
                    <a href="paris.html">Paris</a>
                    </div>
                </div>
            </li>

            <li><a href="about.html">About</a></li>
            <li><a href="contact.html" class="active">Contact</a></li>
        </ul>
    </header>


  <style>
            body  {
              background-image: url("assets/images/Contact/intro1.jpg");
              /*background-color: #cccccc;*/
              background-repeat: no-repeat;
            }
  </style>



    <section class="row1">
      <div class="grid1">

      <!--  <img src="assets/images/Contact/intro.jpg" class="banner" alt="banner">  -->

        

        <section class="about1" id="About information">

          <div class="col-2-3-con">

            <h2><br>Contact Info<br><br></h2>

            <ul class="info1">
                <li class="loc">
                    <a href="https://goo.gl/maps/zMdDs5cPDrYeLrKk7"><i class="fas fa-map-marker-alt fa-2x" style="/*color: white;*/"></i></a>
          <!--          <span class="align">2051 S Santa Fe Ave,<br> Los Angeles,<br> CA 90021, USA</span>    -->
                <span><h4 style="padding-left: 35px;margin-top: -43px;">2051 S Santa Fe Ave,<br>Los Angeles,<br>CA 90021, USA</h4></span>
                </li>
                <li class="loc">
                    <span>
                        <a class="hvvr" href="https://mail.google.com/mail/u/0/#inbox?compose=CllgCHrglpJhSBnMQnbFbspHTrZTXQcsNzjLJkPdVpctxmrkbLbjDhDJWNDClBZBSLnWjnXsHCL"><i class="fas fa-envelope-square fa-2x" style="/*color: white;*/"></i></a>
                    </span>
                    <span>66sayak@gmail.com</span>
                </li>
                <li class="loc">
                    <span>
                        <i class="fas fa-phone-alt fa-2x"></i>
                    </span>
                    <span>+91 9903064954</span>
                </li>



              <li>
                <span>
                  <h1><br><br><br></h1>
                  <a href="https://www.facebook.com/sayak.ghosh.982/"><i class="fab fa-facebook-square fa-2x" style="/*color: white;*/"></i></a>       
                  <a href="https://twitter.com/?lang=en"><i class="fab fa-twitter fa-2x"></i></a>     
                  <a href="https://www.instagram.com/magical_mutes567/"><i class="fab fa-instagram fa-2x"></i></a>         
                  <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"><i class="fab fa-youtube fa-2x"></i></a> 
                  <a href="https://www.linkedin.com/in/sayak-ghosh-6195b5200/"><i class="fab fa-linkedin-in fa-2x"></i></a>
                </span>
              </li>

            </ul>



          </div><!--

          --><form class="col-1-3-con" action="https://api.apispreadsheets.com/data/14777/" method="post" style="background-color:rgba(0, 0, 0, 0.87);">

            <!--<style>
                body  {
                          background-color: #000000;
                        }
            </style>-->

            <fieldset class="register-group">

              <label>
                Name
                <input type="text" name="name" placeholder="Full name" required>
              </label>

              <label>
                Email
                <input type="email" name="email" placeholder="Email address" required>
              </label>

              <label>
                Contact Number
                <input type="tel" name="phone-number" placeholder="Mobile Number" required>
              </label>

              <label>
                Number of Persons
                <select name="quantity_1" class="des" required>
                  <option value="1" selected>1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                </select>
              </label>

              <label>
                Destination
                <select name="text" class="des-1" required>
                    <option value="Rome" selected>Rome</option>
                    <option value="London">London</option>
                    <option value="Paris">Paris</option>
                    <option value="Venice">Venice</option>
                </select>
              </label>

              <label>
                Duration Of Trip (Days)
                <select name="quantity_2" class="des" required>
                  <option value="3" selected>3</option>        
                  <option value="4">4</option>
                  <option value="5">5</option>
                  <option value="6">6</option>
                  <option value="7">7</option>
                  <option value="8">8</option>
                  <option value="9">9</option>
                  <option value="10">10</option>
                </select>

              </label>

              <label>
                Date
                <input type="date" name="travel-date" placeholder="Date of travel" required>
              </label>

              <label>
                Comments
                <textarea name="comments"></textarea>
              </label>

            </fieldset>

            <input class="btn btn-default" type="submit" name="submit" onclick="SubForm()" value="Send">
      
          </form>

        </section>

        </div>
    </section>    

    <section class="destination-showcase">

    </div>
        <div style="background-image: url('assets/images/Contact/end.jpg');" class="bg-6">
          <h1>So, where are u going nxt?</h1>
        </div>

        </section>


    <!-- Footer -->

        <footer class="primary-footer container group">

          <small>&copy; Logo</small>
          <style>
            footer  {
              background-image: url("assets/images/Contact/end2.jpg");
              background-color: #cccccc;
              background-repeat: no-repeat;
            }
          </style>

          <nav class="nav">
            <ul>
              <li><a href="index.html">Home</a></li><!--
              --><li><a href="destinations.html">Destinations</a></li><!--
              --><li><a href="about.html">About</a></li><!--
              --><li><a href="contact.html">Contact</a></li>
            </ul>
          </nav>

        </footer>

</body>
</html>

**

      </div><!--

      --><form class="col-1-3-con" action="https://api.apispreadsheets.com/data/14777/" method="post" style="background-color:rgba(0, 0, 0, 0.87);">

        <!--<style>
            body  {
                      background-color: #000000;
                    }
        </style>-->

        <fieldset class="register-group">

          <label>
            Name
            <input type="text" name="name" placeholder="Full name" required>
          </label>

          <label>
            Email
            <input type="email" name="email" placeholder="Email address" required>
          </label>

          <label>
            Contact Number
            <input type="tel" name="phone-number" placeholder="Mobile Number" required>
          </label>

          <label>
            Number of Persons
            <select name="quantity_1" class="des" required>
              <option value="1" selected>1</option>
              <option value="2">2</option>
              <option value="3">3</option>
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
            </select>
          </label>

          <label>
            Destination
            <select name="text" class="des-1" required>
                <option value="Rome" selected>Rome</option>
                <option value="London">London</option>
                <option value="Paris">Paris</option>
                <option value="Venice">Venice</option>
            </select>
          </label>

          <label>
            Duration Of Trip (Days)
            <select name="quantity_2" class="des" required>
              <option value="3" selected>3</option>        
              <option value="4">4</option>
              <option value="5">5</option>
              <option value="6">6</option>
              <option value="7">7</option>
              <option value="8">8</option>
              <option value="9">9</option>
              <option value="10">10</option>
            </select>

          </label>

          <label>
            Date
            <input type="date" name="travel-date" placeholder="Date of travel" required>
          </label>

          <label>
            Comments
            <textarea name="comments"></textarea>
          </label>

        </fieldset>

        <input class="btn btn-default" type="submit" name="submit" onclick="SubForm()" value="Send">
  
      </form>

    </section>

    </div>
</section>

And the Javascript

<script>
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous">

<script>
function SubForm (){
    $.ajax({
        url:'https://api.apispreadsheets.com/data/14777/',
        type:'post',
        data:$("#myForm").serializeArray(),
        success: function(){
          alert("Form Data Submitted. We will get back to u shortly! :)")
        },
        error: function(){
          alert("There was an error :(")
        }
    });
}
</script>

Yes I think if I will have to try it and see how it works out. But maybe I should first learn a bit more about JavaScript but thanks. — newbie-Web-Developer, Jul 02 '21 at 16:52

score 0 · Answer 1 · answered Jul 02 '21 at 18:24

0

you can try this:-

<button onclick="myFunction()">Submit</button>

<script>
function myFunction() {
  location.replace("https://www.amazon.in")
}
</script>

answered Jul 02 '21 at 18:24

Harshal

199
3
8

Actually if I use this I won't be able to collect the form data. Since, ' 'url:'https://api.apispreadsheets.com/data/14777/', type:'post' ' is sending the data to a Google sheet – newbie-Web-Developer Jul 03 '21 at 05:03

How to display a HTML page after the form data has been submitted?

1 Answers1