表单输入无法在div中提交 | 表单输入无法在div中提交

本文介绍了表单输入无法在div中提交的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我成功复制了开发者的。当我插入一个div到窗体失败。我怎样才能提交'表单div输入'到服务器端函数？

*我相信divs和跨度是允许在。
*取消div的注释会导致div'输出'不能更新。

html：

 < form id =myForm> 
<！ - >< div>  - > 
< input name =myEmailtype =text/> 
< input type =submitvalue =Submit
 onclick =google.script.run.withSuccessHandler（updateEmail）
 .processForm（this.parentNode）/> 
<！ - >< / div>  - > 
< / form> 
< div id =output> 
< / div> 
 
< script> 
 function updateEmail（response）{
 var div = document.getElementById（output）; 
 div.innerHTML =< p> + response +< / p>; 
} 
< / script>

code.gs

 函数doGet（）{
 var html = HtmlService.createTemplateFromFile（'index'）。evaluate（）
 .setTitle（'Web App'）。setSandboxMode（HtmlService 
 .SandboxMode.NATIVE）; 
返回html; 
} 
 
函数processForm（formObject）{
 var response =; 
 response = formObject.myEmail; 
返回响应; 
};

编辑：
已更改：

 < input type =buttonvalue =Submit

to：

 < input type =submitvalue =Submit
  $ b 
解决方案
我将HTML文件更改为：
 < form id =myForm> 
< div> 
< input name =myEmailtype =text/> 
< input type =buttonvalue =Submit
 onclick =processFormJs（this.parentNode）/> 
< / div> 
< / form> 
 
< div id =output>< / div> 
 
< script> 
 window.processFormJs = function（argDivParent）{
 console.log（'argDivParent：'+ argDivParent）; 
 
 google.script.run.withSuccessHandler（updateEmail）
 .processForm（argDivParent）
}; 
 
 function updateEmail（response）{
 var div = document.getElementById（output）; 
 div.innerHTML =< p> + response +< / p>; 
} 
< / script> 
  
并添加了一个 console.log（'argDivParent：'+ argDivParent）; 语句。然后在开发人员工具中，显示控制台。我得到这个错误：
 
 
  argDivParent：[domado对象HTMLDivElement DIV] 
由于属性中的非法值失败：0 
    this.ParentNode 指的是DIV而不是表格。如果我取出DIV，则返回的对象是：
 
 $ $ p $ $ $ $ $ argDivParent：[domado object HTMLFormElement FORM] 
  
 
 
 
 不是： ：[domado object HTMLDivElement DIV]

DIV可能不会自动将INPUT值放入其父对象。

这段代码可以用于DIV：

 < form id =myFormonsubmit =processFormJs（this）> 
 
< div> 
< input name =myEmailtype =text/> 
< input type =buttonvalue =Submit/> 
< / div> 
 
< / form> 
 
< div id =output>< / div> 
 
< script> 
 window.processFormJs = function（argDivParent）{
 console.log（'argDivParent：'+ argDivParent）; 
 
 google.script.run.withSuccessHandler（updateEmail）
 .processForm（argDivParent）
}; 
 
 function updateEmail（response）{
 var div = document.getElementById（output）; 
 div.innerHTML =< p> + response +< / p>; 
} 
< / script>

对于调试，您可以使用 Logger.log（您的文本在这里）; 然后查看日志。

  function processForm（formObject）{
 Logger。 log（'processForm run：'+ formObject）; 
 var response =; 
 response = formObject.myEmail; 
 Logger.log（'response：'+ response）; 
返回响应; 
};

I replicated the Developer's example code with success. When i insert a div into the form it fails. How can i submit 'form div input' to a server side function?
* i believe divs and spans are allowed inside forms from here.
* uncommenting the divs causes the div 'output' not to update.

html:

  <form id="myForm">
    <!--><div>-->
        <input name="myEmail" type="text" />
        <input type="submit" value="Submit"
          onclick="google.script.run.withSuccessHandler(updateEmail)
                    .processForm(this.parentNode)" />
     <!--></div>-->
  </form>
<div id="output">
</div>

<script>
  function updateEmail(response) {
    var div = document.getElementById("output");
    div.innerHTML = "<p>" + response + "</p>";
  }
</script>

code.gs

 function doGet() {
var html = HtmlService.createTemplateFromFile('index').evaluate()
.setTitle('Web App').setSandboxMode(HtmlService
.SandboxMode.NATIVE);
return html;
}

function processForm(formObject) {
  var response = "";
  response = formObject.myEmail;
  return response;
};

Edit:changed:

<input type="button" value="Submit"

to:

<input type="submit" value="Submit"

解决方案

I changed the HTML file to this:

<form id="myForm">
  <div>
    <input name="myEmail" type="text" />
    <input type="button" value="Submit"
          onclick="processFormJs(this.parentNode)" />
  </div>
</form>

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

<script>
window.processFormJs = function(argDivParent) {
  console.log('argDivParent: ' + argDivParent);

  google.script.run.withSuccessHandler(updateEmail)
    .processForm(argDivParent)
};

  function updateEmail(response) {
    var div = document.getElementById("output");
    div.innerHTML = "<p>" + response + "</p>";
  }
</script>

And added a console.log('argDivParent: ' + argDivParent); statement. Then in developer tools, show the console. I get this error:

argDivParent: [domado object HTMLDivElement DIV]
Failed due to illegal value in property: 0

this.ParentNode is referring to the DIV and not the FORM. If I take out the DIV, the object returned is:

argDivParent: [domado object HTMLFormElement FORM]

Not:

argDivParent: [domado object HTMLDivElement DIV]

A DIV probably doesn't automatically put INPUT values into it's parent object.

This code does work with a DIV:

<form id="myForm" onsubmit="processFormJs(this)">

  <div>
    <input name="myEmail" type="text" />
    <input type="button" value="Submit"/>
  </div>

</form>

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

<script>
window.processFormJs = function(argDivParent) {
  console.log('argDivParent: ' + argDivParent);

  google.script.run.withSuccessHandler(updateEmail)
    .processForm(argDivParent)
};

  function updateEmail(response) {
    var div = document.getElementById("output");
    div.innerHTML = "<p>" + response + "</p>";
  }
</script>

For debugging, you can use Logger.log("your text here"); then view the Logs.

function processForm(formObject) {
  Logger.log('processForm ran: ' + formObject);
  var response = "";
  response = formObject.myEmail;
  Logger.log('response: ' + response);
  return response;
};

这篇关于表单输入无法在div中提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！