Указание HTML / Javascript форм в Google App Script - PullRequest
Новая
       0

Указание HTML / Javascript форм в Google App Script

0 голосов
/ 20 апреля 2020

У меня есть две HTML формы. Оба выполняют схожие задачи, вы их заполняете, и они отправляют электронные письма.

После нажатия кнопки «Отправить» после заполнения формы я вызываю скрипт приложения Google для создания письма и его отправки. Моя проблема заключается в том, что обе кнопки отправки теперь отправляют одно и то же сообщение электронной почты, несмотря на то, что мои настройки изолированы друг от друга.

Полагаю, проблема в том, как указать GAS, какую форму указывать? Я впервые делаю что-то из этого, и сейчас я в замешательстве.

Вот конец формы A html: 

<input class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding" type="button" value="Submit project request" onclick="google.script.run.sendEmail(this.parentNode)" />

И мой скрипт приложения формы A: 

// listen for an object sent from the HTML form
function projectRequest(formObj) {

Имя формы A в html: 

<form name="projectrequest" action="/action_page.php" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin">

Поэтому я думаю, что моя проблема в том, что форма B похожа, и я вызываю formObj ? Форма B была моим оригинальным инструментом, и он прекрасно работает при заполнении, но нажатие на ту же кнопку отправки в форме A пытается запустить код электронной почты сценария приложения формы B.

Конец формы B html : 

<input class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding" type="button" value="Send Email" onclick="google.script.run.sendEmail(this.parentNode)" />

Сценарий приложения формы B: 

function sendEmail(formObj) {

Имя формы B в html: 

<form name="furtherhelp" action="/action_page.php" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin">

Может кто-нибудь дать совет Я действительно застрял и надеюсь, что это что-то незначительное.

Спасибо.

РЕДАКТИРОВАТЬ: Форма A HTML

<!DOCTYPE html>
<html>

<!-- Title and information -->
<h3 class=mainText>title stuff</h3>
<p class=fontStyle>Fill in this form and press 'Submit' to etc etc</p>
<!-- --------------------- -->

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<form name="projectrequest" action="/action_page.php" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin">


<div class="w3-row w3-section">
  <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-pencil"></i></div>
    <div class="w3-rest">
      <textarea rows="4" cols="4" class="w3-input w3-border" name="message" type="text" placeholder="Additional notes if any." id="userMessage"></textarea>
    </div>
</div>


<input class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding" type="button" value="Submit project request" onclick="google.script.run.sendEmail(this.parentNode)" />

</form>
</body>

</html>

и сценарий приложения формы A: 

// listen for an object sent from the HTML form
function projectRequest(formObj) {

  // Extract the user name submitted etc
  //  The 'name' *parameter* from the HTML is the object we want to grab and insert here
  //
  var to = "EXAMPLE@EMAIL.com";
  var subject = "Project setup - ";
  var body = formObj.message; //main html body message

  // This style will preserve the line breaks from the users message in the tool 'textarea' and pass them to the sent email.
  var bodyformatParagraphPreserve = '<p style = "white-space: pre-wrap;"> ';
  //
  // ------------------------------ ORIGINAL SEND EMAIL CODE ----------------------------
  // Send the email
  MailApp.sendEmail({
    to: to,
    subject: subject,
    htmlBody: body,
  })
  var output = HtmlService.createHtmlOutput('<script>google.script.host.close();</script>');
  SpreadsheetApp.getUi().showModalDialog(output, 'Closing request tool...');
}

Форма B HTML: 

<!DOCTYPE html>
<html>

<h3 class=mainText>Help Tool</h3>

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<form name="furtherhelp" action="/action_page.php" class="w3-container w3-card-4 w3-light-grey w3-text-blue w3-margin">
<h2 class="w3-center">Contact the Render Support team</h2>

<div class="w3-row w3-section">
  <div class="w3-col" style="width:50px"><i class="w3-xxlarge fa fa-pencil"></i></div>
    <div class="w3-rest">
      <textarea rows="10" cols="4" class="w3-input w3-border" name="message" type="text" placeholder="Type your message here!" id="userMessage"></textarea>
    </div>
</div>


<input class="w3-button w3-block w3-section w3-blue w3-ripple w3-padding" type="button" value="Send Email" onclick="google.script.run.sendEmail(this.parentNode)" />

</form>
</body>

</html>

Сценарий приложения формы B 

function HomePageFurtherHelp(){ 
  var ui = SpreadsheetApp.getUi();
  //
  //Call the HTML file and set the width and height
  var html = HtmlService.createHtmlOutputFromFile("Home Page - Further Help")
    .setWidth(1200)
    .setHeight(1400);
  //Display the dialog
  var dialog = ui.showModalDialog(html, " ");
} 

// listen for an object sent from the HTML form
function sendEmail(formObj) {

  // Extract the user name submitted etc
  //  The 'name' *parameter* from the HTML is the object we want to grab and insert here
  //
  var to = "EXAMPLE@EMAIL.com";
  var subject = "banana";
  var body = formObj.message; //main html body message

  // This style will preserve the line breaks from the users message in the tool 'textarea' and pass them to the sent email.
  var bodyformatParagraphPreserve = '<p style = "white-space: pre-wrap;"> ';
  //
  // ------------------------------ ORIGINAL SEND EMAIL CODE ----------------------------
  // Send the email
  MailApp.sendEmail({
    to: to,
    subject: subject,
    htmlBody: body + "</p>",
  })
  var output = HtmlService.createHtmlOutput('<script>google.script.host.close();</script>');
  SpreadsheetApp.getUi().showModalDialog(output, 'Closing help tool...');
}

1 Ответ

2 голосов
/ 20 апреля 2020

Я использовал скрытый элемент, чтобы различать их.

ах1. html: 

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  <script>
    function processForm(form) {
      console.log(form);
      google.script.run
      .withSuccessHandler(function(obj){
        console.log(obj);
        document.getElementById("eml" + obj.number).value="";
        document.getElementById("sub" + obj.number).value="";
        document.getElementById("msg" + obj.number).value="";
        //document.getElementById("ret" + obj.number).innerHTML=obj.msg;
      })
      .processForm(form);
    }
    console.log('My Code');
  </script>
  </head>
  <body>
   <form name="form1">
     <input type="text" name="email" id="eml1" placeholder="Enter Email" />
     <input type="text" name='subject' id="sub1" placeholder="Enter Subject" />
     <textarea rows="4" name="message" cols="30" id="msg1" placeholder="Enter Message"></textarea>
     <input type="hidden" name="number" value="1" />
     <input type="button" value="Submit" onClick="processForm(this.parentNode);" />
   </form>
   <div id="ret1"></div>
   <form name="form2">
     <input type="text" name="email" id="eml2" placeholder="Enter Email" />
     <input type="text" name="subject" id="sub2" placeholder="Enter Subject"/>
     <textarea rows="4" name="message" cols="30" id="msg2" placeholder="Enter Message"></textarea>
     <input type="hidden" name="number" value="2" />
     <input type="button" value="Submit" onClick="processForm(this.parentNode);" />
   </form>
    <div id="ret2"></div>
  </body>
  <input type="button" value="close" onClick="google.script.host.close();" />
</html>

code.gs: 

function launchSideBar() {
  SpreadsheetApp.getUi().showSidebar(HtmlService.createHtmlOutputFromFile("ah1"));
}

function processForm(obj) {
  console.log(obj);
  const ss=SpreadsheetApp.getActive();
  const sh=ss.getSheetByName('email');
  sh.appendRow([obj.email,obj.subject,obj.message]);
  return {number:obj.number,msg:"Email Sent"}
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...