javascript - 使用 javascript 提交表单并将结果返回到同一页面

Question

我正在尝试编写一个小的 js 脚本，该脚本将让用户输入一串文本，然后将其包装在一些 html 中输出到页面。

我知道如何使用 php 来做到这一点，但对于这样一个简单的操作来说似乎有点过分了，而且我总是热衷于学习新的东西。

我正在使用 document.myform.submit(); 但我不确定如何将表单值提交给变量，然后使用 document 将该变量输出到屏幕。写();

有什么想法我会如何做到这一点？

我在这里创建了一个问题的jsfiddle - http://jsfiddle.net/pudle/axcLz/

Answer 1

有很多方法可以做到这一点。下面是显示其中之一的代码:

document.getElementById("myform").onsubmit = function (event) {
    var link = document.getElementById("mylink");
    var textField = document.getElementById("text");
    link.href = textField.value;
    textNode = document.createTextNode(textField.value);
    if (link.hasChildNodes()) {
        link.removeChild(link.lastChild);
    }
    link.appendChild(textNode);
    event.preventDefault();
};

jsfiddle:http://jsfiddle.net/TMJGH/5/

我向 a 元素添加了一个 id 属性，以使事情变得更容易。

第一行表示我们要更改表单中处理“onsubmit”事件的函数，然后定义该函数。 “event”参数仅用于在最后一行调用.preventDefault()，这基本上意味着我们不希望实际提交表单。

我们需要访问 javascript 代码中的 DOM 元素，因此我使用了 document.getElementById。然后我将 href 属性设置为 textField 的值。为了更改实际的链接文本，我创建了一个具有 textField 值的新文本节点(可以使用 textNode.innerHTML，但如果有人将其插入文本字段，则不会转义 HTML 代码) )。然后我检查我们的 a 元素中是否已经有一些文本 - 如果是，则必须将其删除。最后，我将文本元素作为新子元素附加到我们的 a 元素中。

如果您想在 a 节点内附加更多 HTML 节点，您可以使用 document.createElement('element name') 轻松创建它们，并将它们附加到 链接。我还必须提到 jQuery 使 DOM 的使用变得更加容易。