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

[James_Hibbard]

@kellyshemd

here is the code that saves the data to google sheets

Where? Unless I’m missing something, that is just the form that you have posted already.

[kellyshemd]

by the way I wanna than you for replying my messages I really appreciate your efforts.

[kellyshemd]

here

@kellyshemd

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]);
}

[James_Hibbard]

But where in the code from post#20 is that code called?

Is that what is being pulled in by:

<?!= include('JavaScript'); ?>

?

[kellyshemd]

here: this is the code that pulls from the form

@kellyshemd

> /* @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]);
}
> ```

[James_Hibbard]

Sorry, we’re getting our wires crossed.

It is still not clear to me how the code you just posted is getting called.

Normally, you would submit the form to a script running on a server (indicated by the value in the form’s action attribute) where the code you have just posted is running. This code would be responsible for processing the data, inserting it into a database (or Google sheets) and then redirecting the user to a new page.

From the code you have posted, I cannot see where that is happening.

[kellyshemd]

I run the script that you suggested but its not working in google app script but it is working in .html in my computer

[James_Hibbard]

Sorry, we’re back to:

How to create a Minimal, Reproducible Example - Help Center

If you can make a minimal, runnable demo of your problem, I’ll see what I can do to help.

Otherwise, we’ll just keep going round in circles.

[kellyshemd]

here it is:

<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);    
      
      
  function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
    document.getElementById("myForm").reset();
  }
</script>

I couldn’t understand till I realize thanks a lot for informing me

[James_Hibbard]

That is nothing I can run on my PC to recreate your problem

[kellyshemd]

how can I combine your script

this script

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

and the scripts that call the user entry

@kellyshemd

<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);    
      
      
  function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
    document.getElementById("myForm").reset();
  }
</script>