Question

我试着编写一个小的js脚本，让用户输入一个文本字符串然后将它包装在一些html包含到页面中。

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

我正在玩document.myform.submit();，但我不确定如何将表单值提交给变量，然后使用document.write();

将该var输出到屏幕

我有什么想法会这样做？

我在这里创建了一个问题的方法 - 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代码，则不会转义HTML代码）。然后我检查我们的 a 元素是否已经包含一些文本 - 如果是，则必须将其删除。最后，我将text元素作为新子项附加到 a 元素中。

如果要在节点中添加更多HTML节点，可以使用 document.createElement（'element name'）轻松创建它们，并将它们附加到链路。我还要提到jQuery使得使用DOM变得更容易。

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

1 个答案: