Specifying HTML/Javascript forms in Google App Script

Question

I have two HTML forms. Both perform similar tasks, you fill them in and they send emails.

Upon clicking the submit button after filling in the form, I call a Google App Script to build the email and send it. My issue is that both submit buttons are now sending the same email, despite my setups being isolated from each other.

I guess the issue is how do I tell G.A.S which form to specify? It's my first time doing any of this, and I'm stumped now.

Here is the end of Form 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)" />

And my Form A app script is:

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

The name of Form A in its html is:

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

So I think my issue is because Form B is similar and I'm calling formObj? Form B was my original tool and it works fine when filled in, but pressing the same submit button on Form A tries to run Form B's app script email code.

End of Form 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)" />

The Form B app script is:

function sendEmail(formObj) {

The name of Form B in html is:

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

Can someone offer advice, I'm truly stuck and hoping it's something minor.

Thank you.

EDIT: Form 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>

and Form A app script:

// 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 = "[email protected]";
  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...');
}

Form 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>

Form B app script

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 = "[email protected]";
  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...');
}

Please share more of your html. If there are two separate form tags then there should be no problem. Your example should provide us with enough code to reproduce the problem. Minimal code is okay but it also has to be complete enough to be reproducible. — Cooper
– Cooper, Commented Apr 20, 2020 at 17:20
Welcome to StackOverFlow please take this opportunity to take the tour and learn how to How to Ask, format code, minimal reproducible example and Tag Info — Cooper
– Cooper, Commented Apr 20, 2020 at 17:22
Thanks Cooper, I'll make a copy of my HTML and shrink it down as much as possible and Edit it into the original post asap. — AndrewC
– AndrewC, Commented Apr 20, 2020 at 17:33
You're calling sendEmail() in both forms. Call another function in form A or B — TheMaster
– TheMaster, Commented Apr 21, 2020 at 9:26

Cooper · Accepted Answer · 2020-04-20 19:32:16Z

I used a hidden element to tell them apart.

ah1.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"}
}

Thanks Cooper, I'll take some time to study this, it's going over my head for now. My actual scripts are much larger so will need to see how to fit it in.

Collectives™ on Stack Overflow

Specifying HTML/Javascript forms in Google App Script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related