表格"required"表单输入字段中的属性不会导致任何事情发生 [英] Form "required" attribute in form input field not causing anything to happen

查看:126
本文介绍了表格"required"表单输入字段中的属性不会导致任何事情发生的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是来自意大利的安德鲁, 我正在尝试改编我在网上找到的脚本.这是一个脚本,可创建HTML表单并在电子表格中上传答案.

I'm Andrew from Italy, I'm trying to adapt a script I've found on line. It's a script that creates an HTML form and uploads answers in a spreadsheet.

这是我已经开始的教程:

This is the tutorial from wich I've started:

GS代码:

var dropBoxId = "XXXXXXXXXXXXXXXX"; // Drive ID of 'dropbox' folder
var logSheetId = "XXXXXXXXXXXXXXXXX"; // Drive ID of log spreadsheet

function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}

function uploadFiles(formObject) {
try {
// Create a file in Drive from the one provided in the form
var folder = DriveApp.getFolderById(dropBoxId);
var blob = formObject.myFile;    
var file = folder.createFile(blob);    
file.setDescription("Uploaded by " + formObject.myName);

// Open the log and record the new file name, URL and name from form
var ss = SpreadsheetApp.openById(logSheetId);
var sheet = ss.getSheets()[0];
sheet.appendRow([file.getName(), file.getUrl(), formObject.myName, formObject.email]);

// Return the new file Drive URL so it can be put in the web app output
return file.getUrl();
} catch (error) {
return error.toString();
}
}

HTML代码:

<form id="myForm">
  <input type="text" name="myName" placeholder="insert your name"/>
  <input type="email" name="email" autocomplete="on" placeholder="mail ">
  <input name="myFile" type="file" />
  <input type="button" value="send"
      onclick="google.script.run
          .withSuccessHandler(updateUrl)
          .withFailureHandler(onFailure)
          .uploadFiles(this.parentNode)" />
</form>

<div id="output"></div>

<script>
    function updateUrl(url) {
        var div = document.getElementById('output');
        div.innerHTML = '<a href="' + url + '">All done</a>';
    }
    function onFailure(error) {
        alert(error.message);
    }
</script>

<style>
  input { display:block; margin: 20px; }
</style>

我想填写一些必填字段.

I want to make some field required.

我尝试过

<input type="text" name="myName" required>

但什么也没发生.

我该怎么办?有一个简单的解决方案吗?

What can I do? Is there an easy solution?

谢谢! 安德里亚

编辑 在提出一些建议之后,我已经更新了HTML代码:

EDIT After some suggestions I've updated the HTML code:

新的HTML代码:

<form id="myForm" onsubmit="google.script.run
          .withSuccessHandler(updateUrl)
          .withFailureHandler(onFailure)
          .uploadFiles(this)">

  <input type="text" name="myName" placeholder="insert your name" required />
  <input type="email" name="email" autocomplete="on" placeholder="mail ">
  <input name="myFile" type="file" />
  <input type="submit" value="send"/>

</form>

<div id="output"></div>

<script>
    function updateUrl(url) {
        var div = document.getElementById('output');
        div.innerHTML = '<a href="' + url + '">All done</a>';
    }
    function onFailure(error) {
        alert(error.message);
    }
</script>

<style>
  input { display:block; margin: 20px; }
</style>

现在,如果我不上传任何文件,则所需功能可以正常运行,并且电子表格已更新.如果单击按钮后附加文件,页面刷新和脚本链接将以这种方式更改:

Now if I don't upload any files the required function works correctly and the spreadsheet is updated. If I attach a file when I click the button the page refresh and the link of the script change in this way:

https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXXXXXX/dev?myName=FirstName&email=mymail%40mail.com&myFile=File1.txt

我以这种方式在GS代码中添加了一些Logger.log:

I've added some Logger.log in the GS code in this way:

var dropBoxId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"; // Drive ID of 'dropbox' folder
var logSheetId = "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX"; // Drive ID of log spreadsheet
function doGet(e) {
return HtmlService.createHtmlOutputFromFile('form.html');
}
function uploadFiles(formObject) {
try {
// Create a file in Drive from the one provided in the form
var folder = DriveApp.getFolderById(dropBoxId);
var blob = formObject.myFile;    
var file = folder.createFile(blob);    
file.setDescription("Uploaded by " + formObject.myName);
  Logger.log('blob : ' + blob)
  Logger.log('myName : ' + formObject.myName)

// Open the log and record the new file name, URL and name from form
var ss = SpreadsheetApp.openById(logSheetId);
var sheet = ss.getSheets()[0];
sheet.appendRow([file.getName(), file.getUrl(), formObject.myName, formObject.email]);

// Return the new file Drive URL so it can be put in the web app output
return file.getUrl();
} catch (error) {
return error.toString();
}
}

如果我没有上传任何文件,这是输出:

This is the output if I don't upload any files:

[15-05-26 09:33:47:789 CEST] blob : FileUpload
[15-05-26 09:33:47:789 CEST] myName : myFirstName

如果我附加文件,则日志完全空白.

If I attach a file the log is totally blank.

我不明白问题出在哪里.

I can't understand where the problem is.

推荐答案

您使用的代码没有提交"类型的输入(输入标记显示为提交"按钮).您使用的表单中的按钮是类型为按钮"的输入标签.

The code you are using does not have a "submit" type input (input tag displayed as a submit button). The button in the form you are using is an input tag of the type "button".

<input type="button">

required属性将 用于输入类型为按钮"的按钮. 与类型为提交"的输入标签一起使用.

The required attribute will not work with an input type of "button". It will work with an input tag of type "submit".

<input type="submit">

StackOverflow-按钮与提交之间的差异

但是提交"到底是做什么的?类型为"submit"的输入标签将导致执行在表单标签中指定的任何操作,或者使onsubmit触发:

But what exactly does "submit" do? An input tag of the type "submit" causes whatever action is specified in the form tag to be executed or alternatively, causes the onsubmit to trigger:

<form action="urlToInvoke">

提交:

<form onsubmit="myFunction()">

您的输入表单没有actiononsubmit属性:

Your input form has no action or onsubmit attribute:

<form id="myForm">

在您的表单中,google.script.run函数从类型为按钮"的输入标签中调用.

In your form, the google.script.run function is called from input tag of the type "button".

当前设置:

  <input type="button" value="send"
  onclick="google.script.run
      .withSuccessHandler(updateUrl)
      .withFailureHandler(onFailure)
      .uploadFiles(this.parentNode)" />

如果您想尝试使required功能正常工作,可以尝试以下操作:

If you want to try to get the required functionality to work, here's what you can try:

将输入类型更改为提交":

Change the input type to "submit":

<input type="submit">

google.script.run代码放入以下形式的onsubmit属性中:

Put the google.script.run code into an onsubmit attribute of the form:

<form id="myForm" onsubmit="google.script.run
      .withSuccessHandler(updateUrl)
      .withFailureHandler(onFailure)
      .uploadFiles(this)">

确保将this.parentNode更改为this.仅使用this关键字就可以引用正在使用的任何元素.通过按钮执行onsubmit时,该按钮是该窗体的子级.在这种情况下,有必要获取父级(即形式)传递给函数,即this.parentNode.

Make sure that you change this.parentNode to this. Using just the this keyword alone refers to whatever element it's being used in. When the onsubmit was being executed from the button, the button is a child of the form. In that case, it was necessary to get the parent, which is the form, to pass to the function, thus this.parentNode.

这篇关于表格"required"表单输入字段中的属性不会导致任何事情发生的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆