mrnavaone

7

May 22nd, 2020
79
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <!-- saved from url=(0065)http://quatresoft.com/tutoriales/formulario-con-html5-y-css3.html -->
  3. <html lang="es" class="no-js"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  4.    
  5.     <title>PORTAL NOTAS</title>
  6.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
  7. <style type="text/css">
  8.  
  9. body, h2, h4{
  10.     margin: 0;
  11.     padding: 0;
  12.     border: 0;
  13.     font-size: 100%;
  14.     font: inherit;
  15.     vertical-align: baseline;
  16. }
  17.  
  18. body{
  19.     font:13px/1.231 sans-serif;
  20.     *font-size:small;
  21. }
  22. select, input, button{
  23.     font:99% sans-serif;
  24. }
  25.  
  26.  
  27. h2{
  28.     margin-bottom:15px;
  29.     font-style:italic;
  30.     font-weight:normal;
  31.     font-size:32px;
  32. }
  33. h4{
  34.     font-weight: bold;
  35. }
  36. #mainForm input,#mainForm select,#mainForm label{
  37.     font-size:15px;
  38.     margin-bottom:2px;
  39. }
  40.  
  41. #mainForm {
  42.     background-color:#e6eded;
  43.     width:460px;
  44.     padding:20px;
  45.     margin: 50px auto;  
  46.     border: 6px solid #00B97F;
  47.     -moz-border-radius:15px;
  48.     -webkit-border-radius:15px;
  49.     border-radius:15px;
  50.     position:relative;
  51. }
  52.  
  53.  
  54.  
  55.  
  56. #mainForm input, #mainForm select{
  57.     width:450px;
  58.     border: 1px solid #00B97F;
  59.     margin-bottom:20px;
  60.     padding:4px;
  61. }
  62. #mainForm input:focus, #mainForm select:focus{
  63.     border: 1px solid #2DAFC5;
  64.     background-color: #CCE8DF;
  65. }
  66.  
  67.  
  68.  
  69. #mainForm .required{
  70.     font-weight:bold;
  71.     color:#F00;
  72.    
  73. }
  74.  
  75.  
  76. #mainForm #submit-button{
  77.     width: 100px;
  78.     padding: 10px;
  79.     background-color:#333;
  80.     color:#FFF;
  81.     border:none;
  82.     display:block;
  83.     float:right;
  84.     margin-bottom:0px;
  85.     margin-right:6px;
  86.     background-color:#00B97F;
  87.     -moz-border-radius:15px;
  88.     -webkit-border-radius:15px;
  89.     border-radius:15px;
  90. }
  91. #mainForm #submit-button:hover{
  92.     background-color: #2DAFC5;
  93. }
  94. #mainForm #submit-button:active{
  95.     position:relative;
  96.     top:1px;
  97. }
  98.  
  99.  
  100.  
  101. #req-field-desc{
  102.     font-style:italic;
  103. }
  104. </style>
  105. </head>
  106. <body>
  107.  
  108. <? var hojaCalculo = SpreadsheetApp.openById("1Yn-z7X-mb9TWaxjWWps79qb_v68h9KHFAWDMn7jLfU0");
  109.   var hojaParametros = hojaCalculo.getSheetByName('alumn');
  110.  
  111.   var ultimaFila = hojaParametros.getLastRow();
  112. ?>
  113.         <div id="mainForm">
  114.             <h2>Ingreso Notas</h2>
  115.                <div class="hidden error message">
  116.                 <div class="title">Error:</div>
  117.                 <div class="message"></div>
  118.             </div>
  119.             <div class="hidden success message">
  120.                 <div class="title">Message:</div>
  121.                 <div class="message">Sucessfully submitted</div>
  122.             </div>
  123.             <h4>Ingrese la ficha y nota del alumno</h4>
  124.             <br>
  125.             <form method="post" id="form1">
  126.             Nombre Alumno:
  127. <br>
  128. <select id="name" name="name" required>
  129.  
  130. <? i= 2;
  131.   while (i<=ultimaFila){
  132. ?>    <option value="<?=hojaParametros.getRange(i, 1).getValue()?>"><?=hojaParametros.getRange(i, 1).getValue()?></option>
  133. <?
  134.    i++;
  135.   }
  136. ?>
  137. </select>
  138.             Numero Carnet:
  139. <br>
  140. <select id="id" name="id" required>
  141. <? i= 2;
  142.   while (i<=ultimaFila){
  143. ?>    <option value="<?=hojaParametros.getRange(i, 2).getValue()?>"><?=hojaParametros.getRange(i, 2).getValue()?></option>
  144. <?
  145.    i++;
  146.   }
  147. ?>
  148.  
  149. </select>
  150.            
  151.                
  152.            
  153.        
  154.             <label for="name">Nota1<span class="required">*</span></label>
  155.                 <input type="text" id="nota1" name="nota1" value="" placeholder="Nota" required="" autofocus="">
  156.                 <label for="name">Nota2<span class="required">*</span></label>
  157.                 <input type="text" id="nota2" name="nota2" value="" placeholder="Nota" required="" autofocus="">
  158.                
  159.                 <label for="name">Nota3<span class="required">*</span></label>
  160.                 <input type="text" id="nota3" name="nota3" value="" placeholder="Nota" required="" autofocus="">
  161.                
  162.                
  163.                <button class="action" id="submitButton" type="button">Enviar</button>
  164.                <button class="clear" id="clearFormButton" type="button">Limpiar</button>
  165.                 <p id="req-field-desc"><span class="required">*</span> rellenar obligatoriamente</p>
  166.             </form>
  167.         </div>
  168.  
  169.  
  170.     <script>
  171.    
  172.     document.getElementById("submitButton").addEventListener("click",doStuff);
  173.    
  174.     function doStuff()
  175.     {
  176.     var uid = document.getElementById("id").value;
  177.     var uname = document.getElementById("name").value;
  178.     var unota1= document.getElementById("nota1").value;
  179.     var unota2 = document.getElementById("nota2").value;
  180.     var unota3 = document.getElementById("nota3").value;
  181.     google.script.run.addUser(uid,uname,unota1,unota2,unota3);
  182.  
  183.     }
  184.    
  185.  </script>
  186.                      
  187.             <?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
  188.              <?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>
  189.      
  190.     </body>
  191.  
  192. </html>
RAW Paste Data