Curso de Google Formulários - #09 Formulário Interno (Cadastro e Máscaras)

Nesse tutorial vamos continuar o web template fazendo a inserção dos dados digitados no formulário na nossa planilha do Google.

Inserção de Dados com Web Template

javascript.html

No arquivo javascript vamos previnir o comportamento padrão do submit de atualizar a página e vamos trabalhar com o ajax:

<script>
    //Previnir a atualização da página pós submit
    function preventFormSubmit() {
        let forms = document.querySelectorAll('form');
        for (let i = 0; i < forms.length; i++) {
            forms[i].addEventListener('submit', function(event) {
                event.preventDefault();
            });
        }
    }
    window.addEventListener('load', preventFormSubmit);

    //Processamento no lado cliente
    function process(formObject) {
        google.script.run.withSuccessHandler(response).processForm(formObject);
    }

    //Resposta
    function response(data) {
        let div = document.getElementById('output');
        div.innerHTML = "<div class='alert alert-success'>Os dados foram inseridos com sucesso</div>";
    }
</script>

server.gs

O arquivo server.gs, que funciona como o backend, receberá a function processForm e fará a inserção dos dados na planilha.

//Recebe os dados do formulário no lado servidor
function processForm(formObject)
{
    let name=formObject.name;
    let cpf=formObject.cpf;
    let age=formObject.age;
    let lastRow=sheet.getLastRow();
    sheet.getRange(lastRow+1,1).setValue(name);
    sheet.getRange(lastRow+1,2).setValue(age);
    sheet.getRange(lastRow+1,3).setValue(cpf);
}

Máscaras no formulário do Google

Máscaras são códigos javascript que direcionam o usuário, enquanto ele digita, para um modelo de campo, tipo cpf (xxx.xxx.xxx-xx) ou cep (xx.xxx-xxx).

//Máscara de CPF
function fMasc(objeto,mascara) {
    obj=objeto
    masc=mascara
    setTimeout("fMascEx()",1)
}
function fMascEx() {
    obj.value=masc(obj.value)
}
function mCPF(cpf){
    cpf=cpf.replace(/\D/g,"")
    cpf=cpf.replace(/(\d{3})(\d)/,"$1.$2")
    cpf=cpf.replace(/(\d{3})(\d)/,"$1.$2")
    cpf=cpf.replace(/(\d{3})(\d{1,2})$/,"$1-$2")
    return cpf
}

No campo que vai receber a máscara chamamos o evento keydown:

<input type='text' id='cpf' name='cpf' placeholder='Cpf:' onkeydown="javascript: fMasc( this, mCPF );" maxlength="14">

Por hoje é só! Sucesso nos códigos e na vida!

Precisa de aulas particulares? webdesignemfoco@gmail.com