Problem in web app

Marcelo Daniel Fernández

unread,

Dec 29, 2021, 11:40:32 AM12/29/21

to Google Apps Script Community

Hello to the entire community and thank you for your help.
I have the following problem:
I have created a script in a Sheet that checks the existence of a data in a column. This script is part of the Sheet menu, it has its js code and its html part. It works like this: it looks in the sheet if there is a DNI number, if it is, it returns an alert indicating that it is already entered, otherwise it loads the data in the Sheet.
Inside the Google Sheets menu it works perfectly, but if I implement it as a web app it doesn't work. What's more, if I implement the functions separately (search / load) they work perfectly, but when combining them they don't. The form is displayed on the page but when I click the button the page goes blank. I suspect there is something I am missing from the "google.script.run" but I can't figure out what it is.
I leave the code so that you can help me. I appreciate your help in advance!

-------------------------------------------------------------------------------------------------------------------------

// GS-----------------------------------------------

function grabar(dni,ape,nom,fechaN,mail){
var dataPer = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("DatosPersonales");
dataPer.appendRow([dni,ape,nom,fechaN,mail]);
}

function validadorMatricula(dni){
var datosPer = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("DatosPersonales");
var dnilocal = datosPer.getRange("A1:A").getValues();
var contador = -1;
var extension = datosPer.getLastRow()

while (contador<= extension+1){
contador++
if(dnilocal[contador][0]!== dni && contador<= extension) contador++;
if (dnilocal[contador][0]!== dni && contador== extension+ 1) return true;
if (dnilocal[contador][0] == dni) throw ("error");
}

//Html----------------------------------------------------
<!DOCTYPE html>
<html>

<head>
<base target="_top">
</head>
<body>
<form name="formu" id="formu"method="post">
<label>Apellido: <input type="text" name="ape" id="ape" autocapitalize="words" class="validate" required="true"></label><br><br>
<label>Nombres: <input type="text" size="40"name="nom" id="nom"autocapitalize="words" required="true"></label><br><br>
<label>N° de documento: <input type="number"name="dni" id="dni" min= "1000000" max="99999999"required="true"></label><br><br>
<label>Fecha de nacimiento: <input type="date"name="fechaN" id="fechaN"></label><br><br>
<labe>Correo electrónico: <input type="email"size="40"name="mail" id="mail"required="true"></label><br><br><br><br>
<input type="submit" name="Cargar" id="Cargar"value= "Cargar">
</form>

<script>
document.getElementById("Cargar").addEventListener("click", enviarDNI);

function enviarValores(){
var ape = document.getElementById("ape").value;
var nom = document.getElementById("nom").value;
var dni = document.getElementById("dni").value;
var fechaN = document.getElementById("fechaN").value;
var mail = document.getElementById("mail").value;
var apeValido = document.getElementById("ape").checkValidity();
var nomValido = document.getElementById("nom").checkValidity();
var dniValido = document.getElementById("dni").checkValidity();
var mailValido = document.getElementById("mail").checkValidity();
if ((apeValido) && (nomValido)&&(dniValido)&&(mailValido)){
google.script.run
.withSuccessHandler(cargaExitosa)
.withFailureHandler(noCargo)
.grabar(dni,ape,nom,fechaN,mail);
}
}

function alertaNoexiste(){
alert("El estudiante ya está ingresado.");
formu.reset()
}
function cargaExitosa(){
alert ("La carga se ha realizado con éxito")
formu.reset();
}

function enviarDNI(){
var dni = document.getElementById("dni").value;
google.script.run
.withSuccessHandler(enviarValores)
.withFailureHandler(alertaNoexiste)
.validadorMatricula(dni);
}
function noCargo(){
alert("No se pudo cargar el alumno");
}

</script>

</body>
</html>

Alan Wells

unread,

Dec 29, 2021, 11:53:57 AM12/29/21

to Google Apps Script Community

The reason your page goes blank is because of the "method" attribute in the form tag.

What happens is that a POST request is made inside of the browser address bar which refreshes the page, causing the page to go blank.

If you want to use the FORM tag, then you should remove the "method" attribute since you aren't using it.

There are multiple techniques for dealing with this problem.

You can remove the FORM tag, and just use INPUT tags inside of a DIV tag.

You can prevent the default action of performing a POST request.

You can move your submit button outside of the FORM tag.

You can change your submit button to a BUTTON type of input tag and place it outside of the FORM tag.

Since you are getting INPUT tag values individually, then you really don't need a FORM tag. The FORM tag is used to make those POST requests and get all the INPUT values inside an object without the need for writing code to check each input element individually. It's also used for validation, but you are also using your own validation, so the FORM tag is basically useless to you.

Marcelo Daniel Fernández

unread,

Dec 30, 2021, 4:56:13 AM12/30/21

to Google Apps Script Community

Thank you very much for your answer A. J.!

I have followed your suggestions and it worked perfectly. The reason I used the form tag is because I wanted to clean up the inputs after they are loaded onto the sheet by "resetting" the form. As I am quite a newbie I did not know about these behaviors of the Form.
Thanks a lot!!

Reply all

Reply to author

Forward