How do I show success message after submit and route to a url

The script below is from bootstrap, every time I click submit it routes to the url but if input is missing it will still redirect it does not stop and let the user correct the input. How can I correct this?

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
          alert("failed");
        } 
     form.classList.add('was-validated');
        alert("sucess");
           location.replace("https://www.google.com/");
          


        
      }, false);
    }); 
  }, false);
  



})();


</script>
<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <?!= include('JavaScript'); ?>
    </head>
    <body>

   <div class="container">
      
                   

<form class="needs-validation" novalidate>

  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
       <input type="text" class="form-control"  id="first_name" name="first_name" placeholder="First Name"  required>
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
      This is required!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="last_name" name="first_name" placeholder="First Name"  required>
      <div class="valid-feedback">
                            Looks good!
                            </div>
                            <div class="invalid-feedback">
                            This is required!
                            </div>
                        
    </div>
  </div>

<div class="form-row">
                            <div class="col-md-6 mb-3">
                                <p>Gender</p>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="gender" id="male" value="male"  required>
                                    <label class="form-check-label" for="male">Male</label>

                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="gender" id="female" value="female"  required>
                                    <label class="form-check-label" for="female">Female</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="gender" id="lgbtq" value="female"  required>
                                    <label class="form-check-label" for="female">LGBTQ+</label>
                                </div>


                            </div>
                            <div class="form-row">
                            <div class="col-md-6 mb-3">
                                <label for="dateOfBirth">Date of Birth</label>
                                <input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth" required >
                                <div class="valid-feedback">
                                Looks good!
                                </div>
                                <div class="invalid-feedback">
                                This is required!
                                </div>
                                </div>
                                  <div class="col-md-3 mb-3">
      <label for="validationCustom03">Age</label>
      <input type="text" class="form-control" id="age" name="age" placeholder="Age"required>
  </div>
      </div>                           
     
      </div>    

<div class="form-group">
   <div class="col-md-6 mb-3">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="Email" required >
                            <div class="valid-feedback">
                            Looks good!
                            </div>
                            <div class="invalid-feedback">
                            This is required!
                            </div>
                        </div>

                        <div class="form-group">
 <div class="col-md-6 mb-3">
                            <label for="phone">Phone Number</label>
                            <input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number" required >
                            <div class="valid-feedback">
                            Looks good!
                            </div>
                            <div class="invalid-feedback">
                            This is required!
                            </div>
                        </div>
                        <div class="form-group">
 <div class="col-md-6 mb-3">
                            <label for="sphone">Seconday Phone Number</label>
                            <input type="stel" class="form-control" id="sphone" name="sphone" placeholder="Seconday Phone Number"  required>
                            <div class="valid-feedback">
                            Looks good!
                            </div>
                            <div class="invalid-feedback">
                            This is required!
                            </div>
                        </div>
</div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">Address</label>
      <input type="text" class="form-control" id="address" name="Address" placeholder="Address"required>
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        This is required!
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="city" name="City" placeholder="City"required>
  
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        This is required!
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Barangay</label>
      <input type="text" class="form-control" id="barangay" name="Barangay" placeholder="Barangay"required>
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        This is required!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">Last School Attended </label>
      <input type="text" class="form-control" id="last_school_attended" name="Last School Attended" placeholder="Last School Attended"required>
   
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        This is required!
      </div>
    </div>
</div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary btn-block">Submit</button>
                
                    <div id="output"></div>
</form>

Off Topic

Welcome to the forums, @kellyshemd. smile

When you post code on the forums, you need to format it so it will display correctly. (I’ve edited it for you this time.)

You can highlight your code, then use the </> button in the editor window, or you can place three backticks ``` (top left key on US/UK keyboards) on a line above your code, and three on a line below your code. I find this approach easier, but unfortunately some European and other keyboards don’t have that character.

I change the format, I posted the html code for it but its not showing what it should be.

You edited the post and deleted the HTML code after I’d formatted it. Do you want me to restore the original version?

Ok it will be very helpful. thanks

That’s it restored now.

thanks alot!!! do you have any idea who can assist me with this??

I’m sure somebody will be along to assist you, but you’ll need to be patient. Everyone here is a volunteer, giving up their free time to help.

Hi,

Change:

form.addEventListener('submit', function(event) {
  if (form.checkValidity() === false) {
    event.preventDefault();
    event.stopPropagation();
    alert("failed");
  } 
  form.classList.add('was-validated');
  alert("sucess");
  location.replace("https://www.google.com/");
}, false);

into:

form.addEventListener('submit', function(event) {
  if (form.checkValidity() === false) {
    event.preventDefault();
    event.stopPropagation();
    alert("failed");
    form.classList.add('was-validated');
  } else {
    alert("sucess");
    location.replace("https://www.google.com/");
  }
}, false);

and things will work as expected.

thanks alot its working but it does not go to the url.

I test this out to google app script so that I can integrate it to google sheet but the redirection is not working and it not saving the details. is there a way for this?

You’ll have to provide more details. “It is not working” doesn’t give us much to go on.

The best thing is to make a minimal reproducible example, as is described here:

Thanks for the suggestion,

I run this code that you suggested, the alerts is working but it will not redirect to the url. "location.replace("https://www.google.com/"); is not redirecting.

the forms data after submit should go to google sheet but its not working with this new code that you suggested, I attached the sheet and the form below.

Google sheet (data base): https://docs.google.com/spreadsheets/d/1Nf4blEkltGQFsMGP3XyNRjc8TlyoSbh0D0ENYI4eARQ/edit?usp=sharing

Form(Web entry): https://script.google.com/macros/s/AKfycbxsjNE0qslTEXb771qxbrkN_WP4zexNVnODIBMQdrqwS1A0jxs/exec

Oh yeah, sorry, it seems the form’s default submission action is still being called, so we’ll need to prevent that.

Here is a boiled down example that shows things working as expected.

<!DOCTYPE html>
<html>
<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
  <title>Demo</title>
</head>
<body>
  <div class="container">
    <form class="needs-validation" novalidate="">
      <div class="form-row">
        <div class="col-md-6 mb-3">
          <label for="validationCustom01">First name</label>
          <input class="form-control" id="first_name" name="first_name" placeholder="First Name" required="" type="text">
          <div class="valid-feedback">
            Looks good!
          </div>
          <div class="invalid-feedback">
            This is required!
          </div>
        </div>
      </div>

      <button class="btn btn-primary btn-block" type="submit">Submit</button>
    </form>
  </div>
  
  <script>
    const form = document.querySelector('form');

    form.addEventListener('submit', function(event) {
     event.preventDefault();

     if (form.checkValidity() === false) {
       alert("failed");
       form.classList.add('was-validated');
     } else {
       alert("sucess");
       location.replace("https://www.google.com/");
     }
    }, false);
  </script>
</body>
</html>

There is nothing in the code you originally posted that would enter the form’s data into a Google sheet.

Do you have other code that takes care of this?

here is the code

function doGet(request) {
  return HtmlService.createTemplateFromFile('Index')
      .evaluate();
}

/* @Include JavaScript and CSS Files */
function include(filename) {
  return HtmlService.createHtmlOutputFromFile(filename)
      .getContent();
}

/* @Process Form */
function processForm(formObject) {
  var url = "https://docs.google.com/spreadsheets/d/1Nf4blEkltGQFsMGP3XyNRjc8TlyoSbh0D0ENYI4eARQ/edit?usp=sharing";
  var ss = SpreadsheetApp.openByUrl(url);
  var ws = ss.getSheetByName("Data");
  
  ws.appendRow([formObject.first_name,
                formObject.last_name,
                formObject.email,
                formObject.phone,
                formObject.sphone,
                formObject.dateOfBirth,
                formObject.age,
                formObject.gender,
                formObject.address,
                formObject.city,
                formObject.barangay,
                formObject.last_school_attended]);
}

Yeeeah, but on a successful submission you’re redirecting to google.com. How do you expect that code (that you’ve just posted) to run?

It sounds to me like you should handle an incorrect submission as we have seen here, but when the user fills out everything correctly, you should let the form submission take place, insert the data into Google sheets, then implement the redirect on the server.

@kellyshemd it has been explained to you how to format your code. I have done it again for you. Please remember to do this yourself in future.

1 Like

google.com is just a sample to redirect, after the user submit it should redirect to the websites landing page

Do that on the server then, after the data has been inserted correctly :slight_smile:

I am running this code to google app script

here is the code that saves the data to google sheets but it does not have alerts and a redirect.

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <?!= include('JavaScript'); ?>
    </head>
    <body>

   <div class="container">
      
                   

<form class="needs-validation" novalidate>

  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom01">First name</label>
       <input type="text" class="form-control"  id="first_name" name="first_name" placeholder="First Name"  required>
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
      This is required!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom02">Last name</label>
      <input type="text" class="form-control" id="last_name" name="first_name" placeholder="First Name"  required>
      <div class="valid-feedback">
                            Looks good!
                            </div>
                            <div class="invalid-feedback">
                            This is required!
                            </div>
                        
    </div>
  </div>

<div class="form-row">
                            <div class="col-md-6 mb-3">
                                <p>Gender</p>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="gender" id="male" value="male"  required>
                                    <label class="form-check-label" for="male">Male</label>

                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="gender" id="female" value="female"  required>
                                    <label class="form-check-label" for="female">Female</label>
                                </div>
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="gender" id="lgbtq" value="female"  required>
                                    <label class="form-check-label" for="female">LGBTQ+</label>
                                </div>


                            </div>
                            <div class="form-row">
                            <div class="col-md-6 mb-3">
                                <label for="dateOfBirth">Date of Birth</label>
                                <input type="date" class="form-control" id="dateOfBirth" name="dateOfBirth" required >
                                <div class="valid-feedback">
                                Looks good!
                                </div>
                                <div class="invalid-feedback">
                                This is required!
                                </div>
                                </div>
                                  <div class="col-md-3 mb-3">
      <label for="validationCustom03">Age</label>
      <input type="text" class="form-control" id="age" name="age" placeholder="Age"required>
  </div>
      </div>                           
     
      </div>    

<div class="form-group">
   <div class="col-md-6 mb-3">
                            <label for="email">Email</label>
                            <input type="email" class="form-control" id="email" name="email" placeholder="Email" required >
                            <div class="valid-feedback">
                            Looks good!
                            </div>
                            <div class="invalid-feedback">
                            This is required!
                            </div>
                        </div>

                        <div class="form-group">
 <div class="col-md-6 mb-3">
                            <label for="phone">Phone Number</label>
                            <input type="tel" class="form-control" id="phone" name="phone" placeholder="Phone Number" required >
                            <div class="valid-feedback">
                            Looks good!
                            </div>
                            <div class="invalid-feedback">
                            This is required!
                            </div>
                        </div>
                        <div class="form-group">
 <div class="col-md-6 mb-3">
                            <label for="sphone">Seconday Phone Number</label>
                            <input type="stel" class="form-control" id="sphone" name="sphone" placeholder="Seconday Phone Number"  required>
                            <div class="valid-feedback">
                            Looks good!
                            </div>
                            <div class="invalid-feedback">
                            This is required!
                            </div>
                        </div>
</div>
  <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">Address</label>
      <input type="text" class="form-control" id="address" name="Address" placeholder="Address"required>
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        This is required!
      </div>
    </div>
    <div class="col-md-3 mb-3">
      <label for="validationCustom03">City</label>
      <input type="text" class="form-control" id="city" name="City" placeholder="City"required>
  
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        This is required!
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <label for="validationCustom05">Barangay</label>
      <input type="text" class="form-control" id="barangay" name="Barangay" placeholder="Barangay"required>
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        This is required!
      </div>
    </div>
    <div class="col-md-6 mb-3">
      <label for="validationCustom03">Last School Attended </label>
      <input type="text" class="form-control" id="last_school_attended" name="Last School Attended" placeholder="Last School Attended"required>
   
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        This is required!
      </div>
    </div>
</div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
      <label class="form-check-label" for="invalidCheck">
        Agree to terms and conditions
      </label>
      <div class="valid-feedback">
        Looks good!
      </div>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary btn-block">Submit</button>
                
                    <div id="output"></div>
</form>

    </body>
</html>

<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation');
    // Loop over them and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        
        }
        form.classList.add('was-validated');


      }, false);
    });
  }, false);
  

})();


</script>