Untitled

 avatar
unknown
plain_text
a year ago
8.1 kB
10
Indexable
<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"

      integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="

      crossorigin="anonymous" referrerpolicy="no-referrer">
  </head>
  <body class="has-background-light">
    <section class=" section column is-half is-offset-one-quarter has-background-white	">
      <!--?!= include("image.html")?-->
      <section class="section">
        <section class="hero is-primary is-bold">
          <div class="hero-body">
            <div class="container has-text-centered">
              <h1 class="title is-size-5">Inserisci i documenti per completare
                l'iscrizione</h1>
            </div>
          </div>
        </section>
        <div class="container mt-4 ml-4">
          <h1>Gentile
            <!--?= cognome ?-->
            <!--?= nome ?-->, carica i file richiesti: </h1>
        </div>
        <form id="mainForm" class="container m-4" onsubmit="send(this)">
          <div class="field is-hidden">
            <div class="pt-3"> <label class="label">Cognome</label>
              <div class="control"> <input class="input" name="cognome" readonly="readonly"

                  value="&lt;?=cognome" ?="" type="text">&gt; </div>
            </div>
          </div>
          <div class="field is-hidden">
            <div class="pt-3"> <label class="label">Nome</label>
              <div class="control"> <input class="input" name="nome" readonly="readonly"

                  value="&lt;?=nome" ?="" type="text">&gt; </div>
            </div>
          </div>
          <div class="field is-hidden">
            <div class="pt-3"><label class="label">CF</label>
              <div class="control"> <input class="input" name="codFis" readonly="readonly"

                  value="&lt;?=" codfis="" ?="" type="text">&gt; </div>
            </div>
          </div>
          <div class="field is-hidden">
            <div class="pt-3"><label class="label">Email</label>
              <div class="control"> <input class="input" name="email" readonly="readonly"

                  value="&lt;?=" email="" ?="" type="text"> &gt; </div>
            </div>
          </div>
          <div class="field is-hidden">
            <div class="pt-3"><label class="label">Sessione Esame</label>
              <div class="control"> <input class="input" name="sessioneEsame" readonly="readonly"

                  value="&lt;?=" sessioneesame="" ?="" type="text"> &gt; </div>
            </div>
          </div>
          <!--         <div class="columns">
          <div class="column is-full has-text-white has-background-primary has-text-weight-bold" >Allega i documenti</div>        </div> -->
          <div class="field">
            <div class=" pt-3">
              <div class="mb-3">
                <p class="is-size-5 has-text-weight-bold ">Documento-1 *</p>
                <p class="is-size-6 has-text-weight-light mb-2">Allegare
                  Documento di Identità (Fronte-Retro / Fronte)</p>
                <div id="upFile1" class="file has-name is-primary"> <label class="file-label">
                    <input class="file-input" name="upFile1" required="" type="file">
                    <span class="file-cta"> <span class="file-icon"> <i class="fas fa-upload"></i>
                      </span> <span class="file-label"> Scegli un file… </span>
                    </span> <span class="file-name" width="300px"> Nessun file
                      selezionato </span> </label> </div>
              </div>
            </div>
          </div>
          <div class="field mt-5">
            <div class="mb-3">
              <p class="is-size-5 has-text-weight-bold ">Documento-2</p>
              <p class="is-size-6 has-text-weight-light mb-2">Allegare Documento
                di Identità (Fronte-Retro / Fronte)</p>
              <div id="upFile2" class="file has-name is-primary"> <label class="file-label">
                  <input class="file-input" name="upFile2" type="file"> <span class="file-cta">
                    <span class="file-icon"> <i class="fas fa-upload"></i> </span>
                    <span class="file-label"> Scegli un file… </span> </span>
                  <span class="file-name" width="300px"> Nessun file selezionato
                  </span> </label> </div>
            </div>
          </div>
          <div class="field mt-5">
            <p class="is-size-5 has-text-weight-bold ">Pagamento-1 *</p>
            <p class="is-size-6 has-text-weight-light mb-2">Allegare Ricevuta di
              Pagamento (Fronte-Retro / Fronte)</p>
            <div id="upFile3" class="file has-name is-primary"> <label class="file-label">
                <input class="file-input" name="upFile3" required="" type="file">
                <span class="file-cta"> <span class="file-icon"> <i class="fas fa-upload"></i>
                  </span> <span class="file-label"> Scegli un file… </span> </span>
                <span class="file-name" width="300px"> Nessun file selezionato </span>
              </label> </div>
          </div>
          <br>
          <div class="control"> <button type="submit" id="submitBTN" class="button is-primary">Invia</button>
          </div>
        </form>
      </section>
      <div id="modal" class="modal">
        <div id="modalBg" class="modal-background"></div>
        <div class="modal-content">
          <div class="box">
            <p>Invio file ok</p>
          </div>
        </div>
        <button class="modal-close is-large" aria-label="close"></button> </div>
      <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);

        const upFile1 = document.querySelector('#upFile1 input[type=file]');
        upFile1.onchange = () => {
          if (upFile1.files.length > 0) {
            const fileName = document.querySelector('#upFile1 .file-name');
            fileName.textContent = upFile1.files[0].name;
          }
        }

        const upFile2 = document.querySelector('#upFile2 input[type=file]');
        upFile2.onchange = () => {
          if (upFile2.files.length > 0) {
            const fileName = document.querySelector('#upFile2 .file-name');
            fileName.textContent = upFile2.files[0].name;
          }
        }  

        const upFile3 = document.querySelector('#upFile3 input[type=file]');
        upFile3.onchange = () => {
          if (upFile3.files.length > 0) {
            const fileName = document.querySelector('#upFile3 .file-name');
            fileName.textContent = upFile3.files[0].name;
          }
        }

        let modal = document.getElementById('modal')
        let modalBg = document.getElementById('modalBg')

        modalBg.addEventListener('click', () => {
          modal.classList.remove('is-active')
        })

        let submitBTN = document.getElementById('submitBTN')
        let mainForm = document.getElementById("mainForm")

        function send(formObject){
          submitBTN.classList.add('is-loading')
          google.script.run.withSuccessHandler(() => {
            submitBTN.classList.remove('is-loading')
            mainForm.reset()
            modal.classList.add('is-active')

          }).processForm(formObject)
        }
    </script> </section>
  </body>
</html>
Editor is loading...
Leave a Comment