2017-09-22 3 views
0

Je suis relativement nouveau à Google Scripts et jQuery. Disons que je le sais probablement juste assez pour me mettre dans le pétrin! J'essaie de créer une barre latérale d'interface utilisateur personnalisée pour entrer des données dans une feuille Google. J'ai utilisé le code de ce post comme point de départ (Merci à Cooper pour le partage !!): Cooper's CodeGoogle Sheets formulaire de rechargement de la barre latérale personnalisée sur soumettre

Tout fonctionne à merveille, mais j'ai besoin de réinitialiser automatiquement le formulaire après chaque soumission afin qu'il soit prêt à accepter l'entrée suivante . Idéalement, je voudrais une boîte de dialogue de confirmation avec un bouton pour faire une nouvelle entrée. J'ai modifié le code comme suit, mais mon bouton « Nouvelle entrée » ne fait rien:

<!DOCTYPE html> 
     <html> 
      <head> 
      <base target="_top"> 
      </head> 
      <body> 
      <div id="data"> 
      <br />Text 1<input type="text" size="15" id="txt1" /> 
    <br />Text 2<input type="text" size="15" id="txt2" /> 
    <br />Text 3<input type="text" size="15" id="txt3" /> 
    <br />Text 4<input type="text" size="15" id="txt4" /> 
    <br /><input type="button" value="Log Entry" id="btn1" /> 
    </div> 
    <div id="resp" style="display:none;"> 
    <h1>Your data has been received.</h1> 
    <input type="button" value="New Entry" id="btn2" /> 
    </div> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script> 
     $(function() { 
     $('#btn1').click(validate); 
     $('#btn2').click(openDialog); 
     $('#txt4').val(''); 
     $('#txt3').val(''); 
     $('#txt2').val(''); 
     $('#txt1').val('') 
     }); 

     function setResponse(a) 
     { 
     if(a) 
     { 
      $('#data').css('display','none'); 
      $('#resp').css('display','block'); 
     } 
     } 

     function validate() 
     { 
     var txt1 = document.getElementById('txt1').value || ' '; 
     var txt2 = document.getElementById('txt2').value || ' '; 
     var txt3 = document.getElementById('txt3').value || ' '; 
     var txt4 = document.getElementById('txt4').value || ' '; 
     var a = [txt1,txt2,txt3,txt4]; 
     if(txt1 && txt2 && txt3 && txt4) 
     { 
      google.script.run 
      .withSuccessHandler(setResponse) 
      .getData(a); 
      return true; 
     } 
     else 
     { 
      alert('All fields must be completed.'); 
     } 
     } 

     function loadTxt(from,to) 
     { 
      document.getElementById(to).value = document.getElementById(from).value; 
     } 

    console.log('My Code'); 

    function openDialog() { 
    var html = HtmlService.createHtmlOutputFromFile("index"); 
    html.setTitle('Gmf Sent Msg Form'); 
    SpreadsheetApp.getUi().showSidebar(html); 
    } 
    </script> 
    </body> 
</html> 

Je suis sûr que ce soit quelque chose de simple que mon cerveau débutant est tout simplement pas Attraper, mais toute aide est appréciée!

+0

HtmlService et SpreadsheetApp sont côté serveur pas côté client. Vous voudrez peut-être lire [this] (https://developers.google.com/apps-script/guides/html/communication). – Cooper

Répondre

0

Si vous voulez que votre dialogue fonctionne, vous devez faire quelque chose comme ceci:

code.gs

function openMyDialog() 
{ 
var html = HtmlService.createHtmlOutputFromFile("index"); 
html.setTitle('Gmf Sent Msg Form'); 
SpreadsheetApp.getUi().showSidebar(html); 
} 

Et dans votre javascript quelque chose comme ceci:

function openDialog() 
{ 
    google.script.run.openMyDialog(); 

} 
+0

Cela fonctionne à merveille! Je suis nouveau, donc je ne peux pas voter, mais je le ferais si je le pouvais. –

+0

Vous pouvez cocher la réponse si. – Cooper