0

Olá,

Eu encontrei um problema. Estou fazendo uma integração de um formulário HTML com o Google Sheets. A questão é que possuo dois formulários, não sou excelente no Javascript mas parece que a função "var fields" funciona apenas com o id do HTML. Logo, o problema é que um formulário funciona como deveria (realiza uma função .php de envio de emails + envia a informação pro google sheets), enquanto o outro não funciona como deveria, ou seja, só envia os emails. Cheguei a conclusão de o problema ser a tag id="" por que já estou sem opções. Vou colocar abaixo uma parte do código para que vocês entendam.

A questão é que essas 3 informações estão dispostas assim por um motivo (nome, email e telefone). Tive que ir no Google Developers e criar uma API, depois uma planilha no sheets com 3 colunas: nome,email e telefone. Por isso, entendo que os dois formulários precisam ter essa mesma comunicação, para a informação funcionar como deveria.

Atualização: No StackOverflow Inglês, eu pedi ajuda e me disseram que as variáveis .val e .css pegam somente o primeiro elemento, então a questão seria dar uma forma de puxar pela classe, name ou algo em comum nos dois formulários. Contudo, não tenho este conhecimento de Javascript/Jquery. Olhando o código javascript vocês podem perceber que o que importa mesmo é o resultado final:

var complete=true & row += '"'+value+'",';

Porém, value é definido com um .val: var value = $('#'+field).val();

e a valor de field é esse:

var fields = ['nome','email','telefone'];

Teria que ter alguma forma de conseguir o value através de algo em comum nos dois formulários. O que vocês me dizem?

function submit_form() {    
    // Check Fields
    var complete = true;
    var error_color = '#FFD9D9';
    var fields = ['nome','email','telefone'];
    var row = '';
    var i;
    for(i=0; i < fields.length; ++i) {
        var field = fields[i];
        $('#'+field).css('backgroundColor', 'inherit');
        var value = $('#'+field).val();       
        // Validate Field
        if(!value) {
            if(field != 'message') {
                $('#'+field).css('backgroundColor', error_color);
                var complete = false;
            }
            } else {            
            // Sheet Data
            row += '"'+value+'",';
        }
    }

    // Submission
    if(complete) {      
        // Clean Row
        row = row.slice(0, -1);     
        // Config
        var gs_sid = ''; // Enter your Google Sheet ID here
        var gs_clid = ''; // Enter your API Client ID here
        var gs_clis = ''; // Enter your API Client Secret here
        var gs_rtok = ''; // Enter your OAuth Refresh Token here
        var gs_atok = false;
        var gs_url = '';
        var gs_body = '';        
         // HTTP Request Token Refresh
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://www.googleapis.com/oauth2/v4/token?client_id='+gs_clid+'&client_secret='+gs_clis+'&refresh_token='+gs_rtok+'&grant_type=refresh_token');
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {            
            var response = JSON.parse(xhr.responseText);
            var gs_atok = response.access_token;            
            // HTTP Request Append Data
            if(gs_atok) {
                var xxhr = new XMLHttpRequest();
                xxhr.open('POST', gs_url);
                xxhr.setRequestHeader('Content-length', gs_body.length);
                xxhr.setRequestHeader('Content-type', 'application/json');
                xxhr.setRequestHeader('Authorization', 'OAuth ' + gs_atok );
                xxhr.onload = function() {
                    if(xxhr.status == 200) {
                        // Success
                        $('#message').html('<p>Row Added to Sheet | <a href="http://snydergroupinc.com/tutorials/tutorial-google-sheets-api.php">Add Another &raquo;</a></p><p>Response:<br/>'+xxhr.responseText+'</p>');
                        } else {
                        // Fail
                        $('#message').html('<p>Row Not Added</p><p>Response:<br/>'+xxhr.responseText+'</p>');
                    }
                };
                xxhr.send(gs_body);
            }            
        };
        xhr.send();
    }
}
<!--MODAL FINAL - FORMULÁRIO CLIQUE OK (MODAL) - ESTE QUE NÃO FUNCIONA POR CONTA DA ID REPETIDA-->
<div  style="color:#000;" id="myModalok" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 style="color:#000;" id="myModalLabel">Preencha o formulário para informações completas do empreendimento Uptown 161</h3>
      </div>
      <div class="modal-body">
        <form id="sheets" name="sheets" class="form-horizontal col-sm-12" method="post" action="c_form/envia.php">
          <div class="form-group"><label>Nome</label><input name="nome" id="nome" value=""class="form-control required" placeholder="Insira seu nome" data-placement="top" data-trigger="manual" data-content="Must be at least 3 characters long, and must only contain letters." type="text"></div>
          <div class="form-group"><label>Mensagem</label><textarea name="mensagem" value="" class="form-control" placeholder="Digite sua mensagem" data-placement="top" data-trigger="manual"></textarea></div>
          <div class="form-group"><label>E-mail</label><input name="email" id="email" class="form-control email" placeholder="Insira seu e-mail" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address ([email protected])" type="text"></div>
          <div class="form-group"><label>Telefone</label><input name="telefone" id ="telefone" value="" class="form-control phone" placeholder="Insira seu telefone" data-placement="top" data-trigger="manual" data-content="Must be a valid phone number (999-999-9999)" type="text"></div>
        <input type="hidden" class="form-control" placeholder="Origem" name="Origem" value="<?php echo $_GET["origem"]; ?>">

          <div class="form-group">

          <button type="submit" id="submit" value="Submit" name="submit" class="btn btn-success pull-right" onClick="submit_form()">Enviar</button> <p class="help-block pull-left text-danger hide" id="form-error">&nbsp; Favor corrigir seus dados. </p></div>
        </form>
                            <div id="message" style="display:none;" ></div>
</div>


      </div>
      <div class="modal-footer">
        <!--<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>-->
      </div>
    </div>
  </div>
</div>



<!-- FORMULÁRIO FINAL -->

    <section id="last" class="localiza">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 text-center">
                    <h2 class="margin-top-0 wow fadeIn">Receba mais informações</h2>
                    <hr class="primary">
                    <p>Temos um time de especialistas pronto para tirar suas dúvidas</p>
                </div>
                <div class="col-lg-10 col-lg-offset-1 text-center">
                    <form id="sheets" name="sheets" class="contact-form row" method="post" action="c_form/envia.php">


                        <div class="col-md-4">
                            <label></label>
                            <input id="nome" name="nome" value="" class="form-control" placeholder="Insira seu nome">
                        </div>
                        <div class="col-md-4">
                            <label></label>
                            <input id="email" name="email" 
2
  • Oi Leo, Eu postei no stackoverflow em inglês, consegui mais repostas. A questão é que no javascript que postei, eu tenho o método .css e .val, o que pega apenas a primeira informação. No caso se eu tenho id=nome, name=nome, ele pega só o que vem primeiro no código e se dá por satisfeito, o que eu não posso permitir que aconteça. A questão agora é que eu não sei como editar essa função para usar outro método que pegue pela classe, por exemplo. Commented 19/09/2017 às 17:52
  • Mudei o que foi solicitado, porém continuo enfrentando o problema. Commented 21/09/2017 às 17:57

1 Resposta 1

-1

Uma sugestão, modifique os seus ids para serem únicos.

Agora vamos para a solução de contorno... modifique o seguinte.:

Original:

<button type="submit" ... onclick="submit_form()" />

Proposto:

<button type="submit" ... onclick="submit_form(event)" />

Então na sua função, faça o seguinte.:

Original:

function submit_form() { 
  ...
}

Proposto:

function submit_form(evt) { 
  var scope = $(evt.currenttarget.parentElement);
  ...
}

Por fim, na hora de selecionar os campos, utilize o formulário atual como escopo.:

Original:

$('#'+field)

Proposto:

$('#'+field, scope)
3
  • Oi Tobias, tentei mas ainda não consegui. Pela ajuda que recebi no stack overflow em inglês, parece que as funções .val e .css pegam os primeiros valores e se dão por satisfeito, logo eu tenho dois formulários, ele pega só o que vem primeiro no código e para (já testei isso). Não sei se foi por isso, mas realizei o que me sugeriu mas ainda não funcionou. Commented 21/09/2017 às 14:35
  • pode me enviar o seu codigo atualizado com as alterações que eu sugeri? Commented 21/09/2017 às 15:10
  • Boa tarde, Pode conferir agora em: onecia.com.br/testeg. Também, segue link para download dos dois códigos (index.php e javascript): dropbox.com/sh/17w0rwv017ifwrd/AACVV4Fzw-mBmqTGBGAdUgsQa?dl=0 PS: Testei novamente, ainda não funciona. Commented 21/09/2017 às 17:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .