CODEWITHSUNDEEP
javascriptjquerygoogle-apps-scriptgoogle-sheets
crossbeats
crossbeats

Reputation: 65

Changing Submit Button from "button" to "submit" Broke My Google Apps Script

I used this to build a form in Google Apps that allows employees to fill out a form and attach a document that all feeds into a spreadsheet.

My issue now is I need to make certain fields required. I did so by adding the "required" attribute to those fields. That didn't work, so I realized I need to change my submit button from type="button" to type="submit," however, upon doing THAT...my form now doesn't work.

I can't find anything in any of the code that points to only type="button" working to submit the form. I've included my code below, as well as a link to my sheet/script if anyone wants to poke around in there!

Code.gs

var submissionSSKey = '1zzRQwgXb0EN-gkCtpMHvMTGyhqrx1idXFXmvhj4MLsk';
var folderId = "0B2bXWWj3Z_tzTnNOSFRuVFk2bnc";

function doGet(e) {
  var template = HtmlService.createTemplateFromFile('Form.html');
  template.action = ScriptApp.getService().getUrl();
  return template.evaluate();
}


function processForm(theForm) {
  var fileBlob = theForm.myFile;
  var folder = DriveApp.getFolderById(folderId);
  var doc = folder.createFile(fileBlob);

  // Fill in response template
  var template = HtmlService.createTemplateFromFile('Thanks.html');
  var name = template.name = theForm.name;
  var email = template.email = theForm.email;
  var brand = template.brand = theForm.brand;
  var date = template.date = theForm.date;
  var amount = template.amount = theForm.amount;
  var split = template.split = theForm.split;
  var manufacturer = template.manufacturer = theForm.manufacturer;
  var pace = template.pace = theForm.pace;
  var reason = template.reason = theForm.reason;  
  var category = template.category = theForm.category;
  var subcategory = template.subcategory = theForm.subcategory;
  var message = template.message = theForm.message;   
  var fileUrl = template.fileUrl = doc.getUrl();

  // Record submission in spreadsheet
  var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
  var lastRow = sheet.getLastRow();
  var targetRange = sheet.getRange(lastRow+1, 1, 1, 13).setValues([[name, email,brand,date,amount,split,manufacturer,pace,reason,category,subcategory,message,fileUrl]]);

  // Return HTML text for display in page.
  return template.evaluate().getContent();
}

Form.html

<body>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
  </script>
  <script>
    // Javascript function called by "submit" button handler,
    // to show results.
    function updateOutput(resultHtml) {
      toggle_visibility('inProgress');
      var outputDiv = document.getElementById('output');
      outputDiv.innerHTML = resultHtml;
    }


    // From blog.movalog.com/a/javascript-toggle-visibility/
    function toggle_visibility(id) {
      var e = document.getElementById(id);
      if (e.style.display == 'block')
        e.style.display = 'none';
      else
        e.style.display = 'block';
    }

    //Toggle Secondary Categories
    $(function() {
      $('input[type="radio"]').click(function() {
        if ($(this).attr("id") == "dealer") {
          $(".box").not(".dealer").hide();
          $(".dealer").show();
        }
        if ($(this).attr("id") == "online") {
          $(".box").not(".online").hide();
          $(".online").show();
        }
        if ($(this).attr("id") == "advertising") {
          $(".box").not(".advertising").hide();
          $(".advertising").show();
        }
        if ($(this).attr("id") == "pricing") {
          $(".box").not(".pricing").hide();
          $(".pricing").show();
        }
        if ($(this).attr("id") == "correspondence") {
          $(".box").not(".correspondence").hide();
          $(".correspondence").show();
        }
        if ($(this).attr("id") == "meetings") {
          $(".box").not(".meetings").hide();
          $(".meetings").show();
        }
        if ($(this).attr("id") == "other") {
          $(".box").not(".other").hide();
          $(".other").show();
        }
      });
    });

    //Calculate Split
    function check(split)
    {
    var split=document.forms[0].split.value
    var amount=document.forms[0].amount.value
    var tip = (amount*split) 
    document.forms[0].manufacturer.value=tip 
    var tip2 = (amount-tip)
    document.forms[0].pace.value=tip2
    }
  </script>

  <div id="formDiv" class="form">
    <!-- Form div will be hidden after form submission -->
    <form id="myForm">

<div class="row">

<h1>Co-op Submission Form</h1>
<h2>Please fill out the form completely, including uploading any documentation associated with your co-op claim.</h2>
</div>
<h3>Your Information</h3>
      <h4>Name:</h4> <input name="name" type="text" class="form-control" required/><br/>
      <h4>Email:</h4> <input name="email" type="text" class="form-control"required/><br/>
<h3>Co-Op Information</h3>
       <h4>Brand:</h4>
      <select name="brand" class="form-control" required>
        <option>Select Option</option>
        <option>Bluebird</option>
        <option>Brown</option>
        <option>Ferris</option>
        <option>Giant Vac</option>
        <option>Honda</option>
        <option>Hurricane</option>
        <option>Jonsered</option>
        <option>Little Wonder</option>
        <option>RedMax</option>
        <option>SCAG</option>
        <option>Snapper Pro</option>
        <option>Sno-Way</option>
        <option>SnowEx</option>
        <option>Wright</option>
        <option>Ybravo</option>
      </select><br/>
      <h4>Invoice Date:</h4> <input name="date" type="text" class="form-control"/><br/>
     <h4> Total Co-Op Amount</h4> <input type="text" name="amount" class="form-control"/><br />
      <h4>Co-Op Split:</h4>
      <input type="radio" name="split" onclick="check(this.value)" value="1">100%<br> 
      <input type="radio" name="split" onclick="check(this.value)" value=".5">50/50<br> 
      <input type="radio" name="split" onclick="check(this.value)" value=".75">75/25<br />
      <input type="radio" name="split" onclick="check(this.value)" value=".25">25/75 (Dealer Pays 50%)<br />

<h4>Manufacturer Amount:</h4> <input type="text" name="manufacturer" style="border:none;font-weight:bold;"><br />
<h4>Pace Amount:</h4> <input type="text" name="pace" style="border:none;font-weight:bold;" >

      <h4>Description:</h4> <input name="reason" type="text" cols="20" rows="5" class="form-control" required/><br />

      <h4>Co-Op Category:</h4>
      <input type="radio" name="category" id="dealer" value="Dealer Advertising">Dealer Advertising<br />
      <input type="radio" name="category" id="online" value="Digital/Online Marketing">Digital/Online Advertising<br />
      <input type="radio" name="category" id="meetings" value="Meetings and Schools">Meetings and Schools<br />
      <input type="radio" name="category" id="advertising" value="PACE Advertising">PACE Advertising<br />
      <input type="radio" name="category" id="pricing" value="Program Pricing Promotions">Program Pricing Promotions<br />
      <input type="radio" name="category" id="correspondence" value="PACE-to-Dealer Correspondence">PACE-to-Dealer Correspondence<br />
      Other: <input type="text" id="other" name="category" class="form-control"/><br />
<!--Dealer Advertising-->
      <div class="dealer box" style="display:none;">
      <h4>Dealer Advertising:</h4>
 <input type="radio" name="subcategory" value="Billboards">Billboards<br />
 <input type="radio" name="subcategory" value="Logo Merch">Logo Merch (hats, shirts, pens, etc.)<br />
 <input type="radio" name="subcategory" value="Magazine/Newspaper">Magazine/Newspaper<br />
 <input type="radio" name="subcategory" value="Open House/Trade Show">Open House & Dealer Trade Show<br />
 <input type="radio" name="subcategory" value="POP">POP (lit, posters,displays, etc)<br />
 <input type="radio" name="subcategory" value="Radio">Radio<br />
 <input type="radio" name="subcategory" value="PACE Trade Show">PACE Trade Show<br />
 <input type="radio" name="subcategory" value="TV">TV<br />
 <input type="radio" name="subcategory" value="Direct Mail">Direct Mail (post cards, flyers)<br />
 <input type="radio" name="subcategory" value="Sponsorships">Sponsorships<br />
      </div>

<!--Digital/Online Advertising-->
      <div class="online box" style="display: none;">
       <h4>Digital/Online Marketing:</h4>
         <input type="radio" name="subcategory" value="CMS/Advertising">CMS/Dealer Website Advertising<br />
         <input type="radio" name="subcategory" value="TRM Digital Marketing">TRM Digital Marketing (google, facebook, retargeting, demo site, youtube)
      </div>

<!--Meetings and Schools-->
      <div class="meetings box" style="display: none;">
      </div>

<!--PACE Advertising-->
      <div class="advertising box" style="display: none;">
         <h4>PACE Advertising:</h4>
          <input type="radio" name="subcategory" value="Billboards">Billboards<br />
          <input type="radio" name="subcategory" value="Logo Merch">Logo Merch (hats, shirts, pens, etc.)<br />
          <input type="radio" name="subcategory" value="POP">POP (lit, posters,displays, etc)<br />
          <input type="radio" name="subcategory" value="PACE Trade Show">PACE Trade Show<br />
    </div>

<!--Program Pricing Promotions-->
      <div class="pricing box" style="display: none;">
        <h4>Program Pricing Promotions:</h4>
          <input type="radio" name="subcategory" value="Promo Prices, Discounts, Rebates - Unassigned">Promo Prices, Discounts, Rebates - Unassigned<br />   
          <input type="radio" name="subcategory" value="Promo Pricing">Promo Pricing<br />          
          <input type="radio" name="subcategory" value="Demo">Demo<br />  
          <input type="radio" name="subcategory" value="Fleet">Fleet<br />   
          <input type="radio" name="subcategory" value="Spiffs and Rebates">Spiffs and Rebates<br />  
      </div>

<!--PACE-to-Dealer Correspondence-->
      <div class="correspondence box" style="display: none;">
        <h4>PACE-to-Dealer Correspondence:</h4>
            <input type="radio" name="subcategory" value="Pacesetter Catalog">Pacesetter Catalog<br /> 
            <input type="radio" name="subcategory" value="Dealer Programs (updates, reprints)">Dealer Programs (updates, reprints)<br /> 
      </div>



      <h4>Message:</h4> <textarea name="message" class="form-control"></textarea><br/>
      <h4> Supporting Documentation:</h4><input name="myFile" type="file"/><br />
      <input type="submit" value="Submit" class="btn" onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
        google.script.run
          .withSuccessHandler(updateOutput)
          .processForm(this.parentNode)" />
    </form>

      <div id="inProgress" style="display: none;">
    <!-- Progress starts hidden, but will be shown after form submission. -->
    Uploading. Please wait...
  </div>

  <div id="output">
    <!-- Blank div will be filled with "Thanks.html" after form submission. -->
  </div>


  </div>
<!--Begin Footer-->
     <div class="footer">
        <div class="bottomStrip">
          <div class="col-lg-3 col-lg-push-1">&copy; <script type="text/javascript"> document.write(new Date().getFullYear());</script>, PACE, Inc. All rights Reserved.</div>
          <div class="col-lg-4 col-lg-push-5">PACE, Inc., 739 S. Mill St., Plymouth, MI 48170-1821</div>
        </div>
    </div>
<!--End Footer-->
</body>
</html>

The Sheet (I did remove everything from the 'Name' and 'Email' columns, as that contained several of my co-workers' full names and email addresses!)

Upvotes: 0

Views: 629

Answers (1)

Shilly
Shilly

Reputation: 8589

There's an onclick handler on the input 'submit' button: google.script.run.withSuccessHandler(updateOutput).processForm(this.parentNode)

Submitting the form will use this script, not the default input submit behaviour. So when you change the type from button to submit, you have to change the script to prevent the default submit behaviour from triggering.

Upvotes: 1

Related Questions