7

<!DOCTYPE html>
<!-- saved from url=(0065)http://quatresoft.com/tutoriales/formulario-con-html5-y-css3.html -->
<html lang="es" class="no-js"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">

    <title>PORTAL NOTAS</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
<style type="text/css">

body, h2, h4{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

body{
    font:13px/1.231 sans-serif;
    *font-size:small;
}
select, input, button{
    font:99% sans-serif;
}


h2{
    margin-bottom:15px;
    font-style:italic;
    font-weight:normal;
    font-size:32px;
}
h4{
    font-weight: bold;
}
#mainForm input,#mainForm select,#mainForm label{
    font-size:15px;
    margin-bottom:2px;
}

#mainForm {
    background-color:#e6eded;
    width:460px;
    padding:20px;
    margin: 50px auto;
    border: 6px solid #00B97F;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
    position:relative;
}


#mainForm input, #mainForm select{
    width:450px;
    border: 1px solid #00B97F;
    margin-bottom:20px;
    padding:4px;
}
#mainForm input:focus, #mainForm select:focus{
    border: 1px solid #2DAFC5;
    background-color: #CCE8DF;
}


#mainForm .required{
    font-weight:bold;
    color:#F00;

}


#mainForm #submit-button{
    width: 100px;
    padding: 10px;
    background-color:#333;
    color:#FFF;
    border:none;
    display:block;
    float:right;
    margin-bottom:0px;
    margin-right:6px;
    background-color:#00B97F;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
}
#mainForm #submit-button:hover{
    background-color: #2DAFC5;
}
#mainForm #submit-button:active{
    position:relative;
    top:1px;
}


#req-field-desc{
    font-style:italic;
}
</style>
</head>
<body>

<? var hojaCalculo = SpreadsheetApp.openById("1Yn-z7X-mb9TWaxjWWps79qb_v68h9KHFAWDMn7jLfU0");
   var hojaParametros = hojaCalculo.getSheetByName('alumn');

   var ultimaFila = hojaParametros.getLastRow();
?>
        <div id="mainForm">
            <h2>Ingreso Notas</h2>
               <div class="hidden error message">
                <div class="title">Error:</div>
                <div class="message"></div>
            </div>
            <div class="hidden success message">
                <div class="title">Message:</div>
                <div class="message">Sucessfully submitted</div>
            </div>
            <h4>Ingrese la ficha y nota del alumno</h4>
            <br>
            <form method="post" id="form1">
            Nombre Alumno:
<br>
<select id="name" name="name" required>

<? i= 2;
   while (i<=ultimaFila){
?>    <option value="<?=hojaParametros.getRange(i, 1).getValue()?>"><?=hojaParametros.getRange(i, 1).getValue()?></option>
<?
    i++;
   }
?>
</select>
            Numero Carnet:
<br>
<select id="id" name="id" required>
<? i= 2;
   while (i<=ultimaFila){
?>    <option value="<?=hojaParametros.getRange(i, 2).getValue()?>"><?=hojaParametros.getRange(i, 2).getValue()?></option>
<?
    i++;
   }
?>

</select>


            <label for="name">Nota1<span class="required">*</span></label>
                <input type="text" id="nota1" name="nota1" value="" placeholder="Nota" required="" autofocus="">
                <label for="name">Nota2<span class="required">*</span></label>
                <input type="text" id="nota2" name="nota2" value="" placeholder="Nota" required="" autofocus="">

                <label for="name">Nota3<span class="required">*</span></label>
                <input type="text" id="nota3" name="nota3" value="" placeholder="Nota" required="" autofocus="">


               <button class="action" id="submitButton" type="button">Enviar</button>
               <button class="clear" id="clearFormButton" type="button">Limpiar</button>
                <p id="req-field-desc"><span class="required">*</span> rellenar obligatoriamente</p>
            </form>
        </div>


    <script>

    document.getElementById("submitButton").addEventListener("click",doStuff);

    function doStuff()
    {
    var uid = document.getElementById("id").value;
    var uname = document.getElementById("name").value;
    var unota1= document.getElementById("nota1").value;
    var unota2 = document.getElementById("nota2").value;
    var unota3 = document.getElementById("nota3").value;
    google.script.run.addUser(uid,uname,unota1,unota2,unota3);

    }

 </script>

            <?!= HtmlService.createHtmlOutputFromFile('Stylesheet').getContent(); ?>
             <?!= HtmlService.createHtmlOutputFromFile('JavaScript').getContent(); ?>

    </body>

</html>