2016-03-20 9 views
2

Ziemlich neu zu HTML-Dienst in Apps-Skript, haben eine sehr grundlegende Benutzeroberfläche geschrieben.google apps script HTMLService-Schaltfläche Klick öffnet neue leere Registerkarte

Das Problem ist, dass wenn die Schaltfläche geklickt wird (kein onclick Handler gesetzt), öffnet es eine neue leere Registerkarte (ich verwende Chrome).

Code unten reproduziert das Verhalten, ich habe jquery/jquery UI Referenzen, die im größeren Projekt verwendet werden, so dass sie hier bleiben.

Wie kann ich diese leere Registerkarte beim Klicken auf die Schaltfläche stoppen? Wird hier nicht angezeigt, aber es passiert auch, wenn ein Treffer in ein Textfeld eingegeben wird.

code.js:

function NewProposal() { 
    var html = HtmlService.createTemplateFromFile('Index'); 

    var ss = SpreadsheetApp.getActiveSpreadsheet(); 
    ss.show(html.evaluate().setHeight(530).setWidth(1100).setSandboxMode(HtmlService.SandboxMode.IFRAME)); 
} 

Index.HTML:

<!DOCTYPE html> 

<base target="_top"> 

    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jsgrid/1.4.1/jsgrid.min.js"></script> 


<form> 
     <table> 
      <tr> 
       <td> 
        <button id="Create">Create</button> 
       </td>     
      </tr> 
     </table> 
</form> 

Antwort

3

Sie werden müssen entweder die Taste los, und etwas anderes verwenden, oder der Form-Tags loszuwerden und verwende div-Tags. Wenn Sie die Formular-Tags loswerden, ist es schwieriger, Daten von beliebigen Eingabe-Tags im Formular zu sammeln. Aber ich sehe keine Eingabe-Tags in Ihrem Formular. Wenn Sie in Ihrem Formular keine Eingabe-Tags haben, ist die Verwendung von Formular-Tags sinnlos. Vielleicht haben Sie sie einfach weggelassen, um den Fehler in so wenig Code wie möglich zu reproduzieren.

Wenn auf eine Schaltfläche innerhalb eines Formular-Tags geklickt wird, wird standardmäßig im aktuellen Fenster eine POST-Anfrage ausgegeben. Dadurch wird der Inhalt im Browser aktualisiert. Wenn jedoch kein Rückruf angezeigt wird, um andere Inhalte anzuzeigen, wird die Seite leer.

Die einzige Möglichkeit, diese integrierte Funktion eines Formulars mit einer Schaltfläche zu vermeiden, besteht darin, keine Schaltfläche zu verwenden oder die Formular-Tags nicht zu verwenden.

Ein Klickereignis kann zu verschiedenen Arten von HTML-Elementen hinzugefügt werden. Wie ein Link <a> Tags. Oder ein <div>. Sie können also auch etwas anderes als eine Schaltfläche verwenden, sie so gestalten, dass sie wie eine Schaltfläche aussieht, und ein Klickereignis zu dem hinzufügen, für das Sie sich entscheiden.

Wenn Sie viele verschiedene Arten von Eingabe-Tags haben, ist es möglicherweise besser, das Formular weiter zu verwenden. Aber wenn Sie alle Daten leicht aus der Tabelle herausholen können, brauchen Sie das Formular nicht wirklich. Das Formular fügt der Gestaltungsfähigkeit oder dem Layout nichts hinzu. Wenn also der Nutzen der Verwendung des Formulars nicht zu Ihren Umständen passt, können Sie sich weitere Optionen ansehen.

Wenn Sie dem Benutzer Feedback geben möchten, welche Eingaben erforderlich sind, ist dies ein anderes Problem. Die Formulartags, das erforderliche Attribut und die Schaltflächenübergabe sind Teil eines Systems, mit dem versucht wird, die Formularübertragung zu automatisieren und die Datenvalidierung und Datenerfassung zu vereinfachen. Aber um diese "eingebaute" Funktionalität zu nutzen, muss alles auf eine bestimmte Art zusammenarbeiten. Wie bei allem, was Menschen versuchen, generisch zu machen, ist es sehr schwierig, sie allen Umständen anzupassen. Wenn Sie nicht möchten, dass die Seite beim Klicken auf die Schaltfläche leer wird, kann das gesamte integrierte Verhalten mehr zum Schaden als eine Hilfe werden.

Wenn Apps Script das Formular erhält, wird der größte Teil des Inhalts aus dem Formularelement entfernt und ein Objekt mit den Namen der Eingaben und ihren Werten erstellt. Wenn also das "Formular" -Objekt (nicht mehr ein echtes Formularobjekt) zum Server gelangt, können Sie die Werte nur mithilfe der Namensattribute aus dem Objekt herausholen.

+1

es Ihnen danken! Ihre Antwort hat zu weiteren Grabungen geführt, und ich habe schließlich Informationen von Google zu diesem Thema gefunden ([link] (developers.google.com/apps-script/guides/html/communication#forms)), die verhindern, dass Formulare eingereicht werden ... bin mir nicht sicher ist eine gute Übung oder nicht, aber es hat das Problem gelöst. Vielen Dank noch einmal – Ash

0

hinzufügen onsubmit = "return (false)" in Ihrem Formular openning tag:

<form onsubmit="return(false)"> 
    ... 
</form> 
Verwandte Themen