我尝试着提高这个答案上传文件/谷歌驱动器才能使用它。 我已经成功或多或少地改变设计。 现在我试图让所需要的值和形式,不能提交,直到所有的值有效/本
我使用的是谷歌的脚本编辑器来发布形式:我有3个文件:Code.gs; Form.html和Thnaks.html
我已经成功地做到以下(Daemedeor的指教)
<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'; } </script> <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript"> /** * Basic jQuery Validation Form Demo Code * Copyright Sam Deering 2012 * Licence: http://www.jquery4u.com/license/ */ (function($,W,D) { var JQUERY4U = {}; JQUERY4U.UTIL = { setupFormValidation: function() { //form validation rules $("#register-form").validate({ rules: { name: "required", department: "required", email: { required: true, email: true }, }, messages: { name: "Please enter your name", department: "Please choose your department", }, email: "Please enter a valid email address", }, submitHandler: function(form) { form.submit(); } }); } } //when the dom has loaded setup form validation rules $(D).ready(function($) { JQUERY4U.UTIL.setupFormValidation(); }); })(jQuery, window, document); </script>
<link href='http://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'> <style type="text/css"> img { display: block; margin-left: auto; margin-right: auto; width:500px; height:170px; ; } form { width:450px; padding:30px; margin: auto; background: #FFF; border-radius: 10px; -webkit-border-radius:10px; -moz-border-radius: 10px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13); -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13); -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.13); } h1 { background: #2A88AD; padding: 20px 30px 15px 30px; margin: -30px -30px 30px -30px; border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; -moz-border-radius: 10px 10px 0 0; color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12); font: normal 30px 'Bitter', serif; -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17); -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17); box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17); border: 1px solid #257C9E; } h1 > span { display: block; margin-top: 2px; font: 13px Arial, Helvetica, sans-serif; } label { display: block; font: 13px Arial, Helvetica, sans-serif; color: #888; margin-bottom: 15px; } input[type="text"], input[type="email"], input[type="file"], textarea, select { display: block; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; width: 100%; padding: 8px; outline: none; border: 1px solid #B0CFE0; -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out; } section{ font: normal 20px 'Bitter', serif; color: #2A88AD; margin-bottom: 5px; } section span { background: #2A88AD; padding: 5px 10px 5px 10px; position: absolute; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; border: 4px solid #fff; font-size: 14px; margin-left: -45px; color: #fff; margin-top: -3px; } input[type="button"], input[type="submit"]{ background: #2A88AD; padding: 8px 20px 8px 20px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; color: #fff; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.12); font: normal 30px 'Bitter', serif; -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17); -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17); box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.17); border: 1px solid #257C9E; font-size: 15px; } input[type="button"]:hover, input[type="submit"]:hover{ background: #2A6881; -moz-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28); -webkit-box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28); box-shadow: inset 0px 2px 2px 0px rgba(255, 255, 255, 0.28); } </style>
<div id="formDiv"> <!-- Form div will be hidden after form submission --> <form id="myForm" runat="server"> <h1>Job Application<span>Apply now and get the opportunity to join us!</span></h1> <section> <span>1</span>Personal details</section> Name: <input type="text" name="name"/><br/> <section> <span>2</span>Your experience</section> Department: <select name="department"> <option>Math</option> <option>English</option> <option>French</option> <option>Science Control</option> <option>Art</option> </select><br/> <section> <span>3</span>Contact</section> Email: <input type="email" name="email" placeholder="example@domain.com"/><br/> Message: <textarea name="message"></textarea><br/> <section> <span>4</span>Attachment</section> CV: <input type="file" name="myFile"/><br/> Qualification: <input type="file" name="myFile2"/><br/> <input type="submit" value="Apply" onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress'); google.script.run .withSuccessHandler(updateOutput) .processForm(this.parentNode)" /><br/> </form> </div> <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>
这里是Code.gs
var submissionSSKey = '1Ed05-havA-Lw-BpYWhYf8Ib7u77oevW3mFZ8m1vQ8HU'; var folderId = "0B2MoK-dDGTVDfkpXNnZvVUhBWlhLZGIxN2Qzcm40WGhJVC0xUzNSbTRiUW04SkdQTG9ncEU"; 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 fileBlob2 = theForm.myFile2; var folder = DriveApp.getFolderById(folderId); var doc = folder.createFile(fileBlob); var doc2 = folder.createFile(fileBlob2); // Fill in response template var template = HtmlService.createTemplateFromFile('Thanks.html'); var name = template.name = theForm.name; var department = template.department = theForm.department; var message = template.message = theForm.message; var email = template.email = theForm.email; var fileUrl = template.fileUrl = doc.getUrl(); var fileUrl2 = template.fileUrl = doc2.getUrl(); // Record submission in spreadsheet var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0]; var lastRow = sheet.getLastRow(); var targetRange = sheet.getRange(lastRow+1, 1, 1, 6).setValues([[name,department,message,email,fileUrl,fileUrl2]]); // Return HTML text for display in page. return template.evaluate().getContent(); }
添加的jQuery的脚本时,(我不知道如果代码是正确的格式第一,我已经做了我最好的)形式提交,虽然某些值无效
感谢您的任何建议或帮助