聚合物元素表单未提交所有字段
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了聚合物元素表单未提交所有字段相关的知识,希望对你有一定的参考价值。
我的代码如下。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="/favicon.ico" type="image/png" />
<title>configurator- Log in</title>
<link rel="stylesheet" type="text/css" href="/public/stylesheets/style.css">
<script nonce='d8c9ef6060da432f9a21d440196fa3e17adb185464944bb93fdd1809e02fa1' type="module">
import('@polymer/iron-form/iron-form.js');
import('@polymer/paper-input/paper-input.js');
import('@polymer/paper-button/paper-button.js');
</script>
<meta charset="UTF-8">
</head>
<body>
<header>
<a href="/" class="logo"><img src="/images/logo.gif" alt="Logo"></a>
<div>
<h1>Router</h1>
<h2>Log in</h2>
</div>
</header>
<menu>
<p><a href="/">Home</a></p>
<p>Log in</p>
</menu>
<section id="_content">
<div id="_flashes" class="flashes">
</div>
<form is="iron-form" allow-redirect method="post" id="_form" action="/login">
<input type="hidden" name="_csrf" value="iNg6gJDo-k61QJuGnqA8DjEKttgFS6qyUGgo">
<paper-input type="password" name="password" label="Password"></paper-input>
<paper-button raised onclick="submitForm()">Log In</paper-button>
</form>
<script>
function submitForm(e)
document.getElementById("_form").submit();
</script>
</section>
<footer>
Configurator version . ©2018
</footer>
</body>
</html>
当我单击提交按钮时,仅发送名为_csrf的字段。 paper-input
字段未发送。我究竟做错了什么?我尝试过各种处理Polymer的网站提出的许多不同建议,但似乎都不合适。从浏览库中,我注意到有一个Submit函数,该函数从Shadow DOM中将在其中找到的那些元素收集值,并在提交表单之前将其编组到动态创建的隐藏输入字段中。就我而言,似乎未调用此函数,我也不知道为什么。
答案
[您使用的是本机表单,它将拾取本机元素并将其发送,而您仅有的“纯”输入是_csrf。
我不认为搜索会向下“进入” shadowDom
来查看在纸张输入定义内是否有输入。
因此,您可以使用所有本机输入(这会破坏使用Web组件的目的),也可以使用另一个“知道”如何处理此Web组件,例如将<form>
包装到<iron-form>
中并提交那一个。
以上是关于聚合物元素表单未提交所有字段的主要内容,如果未能解决你的问题,请参考以下文章