Bootstrap Уведомление по почте в форме скрипта приложений на основе отправленного поля - PullRequest
Новая
       10

Bootstrap Уведомление по почте в форме скрипта приложений на основе отправленного поля

0 голосов
/ 14 июля 2020

Я создал форму Bootstrap в скрипте приложений, которая отправляет ответы в электронную таблицу Google.
Теперь я бы хотел, чтобы, когда в раскрывающемся списке пользователь выбирает конкретную опцию c, форма отправляет уведомление указать c почтовый адрес. В конкретном случае c - раскрывающийся список с «id = area».

Code.gs 

function doGet(request) {
  return HtmlService.createTemplateFromFile('Index')
      .evaluate();
    }
    
    /* @Include JavaScript and CSS Files */
    function include(filename) {
      return HtmlService.createHtmlOutputFromFile(filename)
          .getContent();
    }
    
    /* @Process Form */
    function processForm(formObject) {
      var url = "https://docs.google.com/spreadsheets/d/xxxxx/edit#gid=0";
      var ss = SpreadsheetApp.openByUrl(url);
      var ws = ss.getSheetByName("Data");
      
      ws.appendRow([formObject.nome_cognome,
                    formObject.mail,
                    formObject.telefono,
                    formObject.sede,
                    formObject.area,
                    formObject.tipo,
                    formObject.durata]);
    }

Index. html

<!DOCTYPE html>
<html>
    <head>
        <base target="_top">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
        <?!= include('JavaScript'); ?>
<script>
$(function() {
  $('input[name="durata"]').daterangepicker({
    timePicker: true,
    minDate: moment().add(3, 'day'),
    startDate: moment(),
    endDate: moment().add(5, 'day'),
    fromLabel: ('From'),
    timePicker24Hour: (true),
    locale: {
      format: 'DD/MM/YYYY HH:mm'
    }
  });
});

</script>
    </head>
    <body>
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-8">
                    <form id="myForm" onsubmit="handleFormSubmit(this)">
                    
                        <div class="form-row">
                            <div class="form-group col">
                                <label for="nome_cognome">Nome e Cognome<em class="required">*</em></label>
                                <input type="text" class="form-control" id="nome_cognome" name="nome_cognome" required="">
                            </div>
                            <div class="form-group col">
                                <label for="mail">Indirizzo E-Mail<em class="required">*</em></label>
                                <input type="email" class="form-control" id="mail" name="mail" required="">
                            </div>
                            <div class="form-group col">
                                <label for="telefono">Telefono<em class="required">*</em></label>
                                <input type="text" class="form-control" id="telefono" name="telefono" required="">
                            </div>
                        </div>
                        
                        <div class="form-row">
                            <div class="form-group col">
                                <div class="form-group">
                                <label for="sede">In servizio presso (indicare sede)<em class="required">*</em></label>
                                <select class="form-control" id="sede" name="sede" required="">
                                <option>--Seleziona--</option>
                                <option>Rome</option>
                                <option>Napoli</option>
                                </select>
                                </div>
                            </div>
                            <div class="form-group col">
                                <div class="form-group">
                                <label for="area">Area<em class="required">*</em></label>
                                <select class="form-control" id="area" name="area" required="">
                                <option>--Seleziona--</option>
                                <option>Marketing</option>
                                <option>Amministrazione</option>
                                <option>Direzione</option>
                                </select>
                                </div>
                            </div>
                        </div>

                        <div class="form-row">
                            <div class="form-group col">
                                <div class="form-group">
                                <label for="tipo">Tipo di permesso<em class="required">*</em></label>
                                <select class="form-control" id="tipo" name="tipo" required="">
                                <option>--Seleziona--</option>
                                <option>Ferie</option>

                                </select>
                                </div>
                            </div>
                            <div class="form-group col">
                                <label for="durata">Durata<em class="required">*</em></label>
                                <input type="text" class="form-control" name="durata" id="durata" required="" />
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary btn-block">Invia richiesta</button>
                    </form>
                    <div id="output"></div>
                </div>
            </div>      
        </div>
    </body>
</html>

JavaScript. html

<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
      event.preventDefault();
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);    
      
      
  function handleFormSubmit(formObject) {
    google.script.run.processForm(formObject);
    document.getElementById("myForm").reset();
  }
  
</script>

1 Ответ

1 голос
/ 14 июля 2020

Я считаю, что ваша цель следующая.

  • Вы хотите отправить электронное письмо, если formObject.area - это параметр c.

В этом случае, как насчет изменения функции processForm?

Измененный скрипт:

От: 
ws.appendRow([formObject.nome_cognome,
              formObject.mail,
              formObject.telefono,
              formObject.sede,
              formObject.area,
              formObject.tipo,
              formObject.durata]);
Кому: 
ws.appendRow([formObject.nome_cognome,
              formObject.mail,
              formObject.telefono,
              formObject.sede,
              formObject.area,
              formObject.tipo,
              formObject.durata]);

// I added below script.
var specificOption = "Marketing";  // Please set the specific option you want to use.
if (formObject.area == specificOption) {
  var specificEmailAddress = "###";  // Please set the specific email address you want to use.
  var subject = "###";  // Please set the subject of email.
  var body = "###";  // Please set the subject of body.
  GmailApp.sendEmail(specificEmailAddress, subject, body);
  // You can also use this. MailApp.sendEmail(specificEmailAddress, subject, body);
}

Примечание:

  • Когда вы изменили скрипт веб-приложений, повторно разверните веб-приложения как новую версию. Таким образом, последний сценарий отражается в веб-приложениях. Будьте осторожны.

Ссылки:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...