如何将文本区域转换为表单？答案

【问题标题】：How can i convert a textarea into a form?如何将文本区域转换为表单？
【发布时间】：2017-03-01 21:20:58
【问题描述】：

您好，我需要帮助将文本区域转换为具有三个输入的基本表单，例如...用户可以在表单中输入他们的名字、姓氏和电子邮件。目前我的代码有一个文本区域，它被存储到 chrome 存储中。请帮我将其转换为一种形式，并且仍然在 chrome 存储中存储和检索它。非常感谢。

html:

    <meta charset="UTF-8">
    <title>Document</title>
    <script src="script.js"></script>
</head>
<body>
    <textarea id="saveLine"></textarea>
    <input type="button" id="save" value="Save Line">

    <input type="button" id="get" value="Get Saved Line">

JS 文件：

window.onload = function() {
    document.getElementById('save').onclick = function() {
    var value = document.getElementById('saveLine').value;

    chrome.storage.sync.set({'myLine': value}, function() {
        alert('success');
    });
};

document.getElementById('get').onclick = function() {
    chrome.storage.sync.get('myLine', function(data) {
        alert(data.myLine);
    });
}
}

【问题讨论】：

为什么使用 textarea 元素而不是单独的名字、姓氏和电子邮件输入元素？
您的实际问题是什么？你已经陈述了你的“需要”，但实际上并没有提出问题，也没有解释你的具体问题在哪里。您可能想阅读Why is "Can someone help me?" not an actual question?
@Traktor53 这原本是我修改的草稿代码，但我正在努力将其修改为表单。
您可能没有听说过the X-Y problem，但这个问题读起来很像。例如，一个表单用于向服务器提交数据，而您并没有表明这是您想要做的......
@Traktor53 许多人向我道歉，我仍然试图弄清楚这件事，因为我对此很陌生。

标签： javascript html google-chrome-extension textarea google-chrome-storage

【解决方案1】：

只需将 HTML 输入/按钮/等包装在带有 action 属性的 form 元素中（尽管这是可选的）。在这种情况下，您还需要将至少一个按钮更改为 type="submit"。

<form id="some_form" action="/some/endpoint">
  <textarea id="saveLine"></textarea>
  <input type="submit" id="save" value="Save Line">
  <input type="button" id="get" value="Get Saved Line">
</form>

您可能还希望通过您的 JS 处理表单提交，因为如果您希望它也提交到 Chrome 存储，那么您需要劫持表单 submit 处理程序。

var form = document.getElementById('some_form')
form.addEventListener('submit', function (event) {
  console.log('Form elements', form.elements)
  event.preventDefault()
  // Do your Chrome Storage stuff here with form elements
})

【讨论】：