JavaScript 表单操作更改RC方法发布文本输入提交

Question

我只是想将表单的文本输入发布到带有返回符的 iframe 中，没有提交按钮。

function changesrc(main, url) {
document.getElementById('main').setAttribute('src', url);
}

我的主要内嵌框架

<div id="frame"><iframe id="main" name="main" type="text/html" src="" frameborder="0" allowtransparency="true"></iframe>

实际的文本输入父表单是让我失望的......

<form id="url" onSubmit='changesrc('main', target)' method="post"><div id=target><input type="text" name="target" id="target" size="65"></div></form>

请不要有任何影响或降级，我知道这段代码很糟糕......

谢谢

Answer 1

您发布的代码有几个明显的问题：

function changesrc(main, url) {
    document.getElementById('main').setAttribute('src', url);
}

此外，要访问 main 元素的src，只需使用点表示法，这将产生以下结果：

function changesrc(main, url) {
    document.getElementById(main).src = url;
}

在上面的函数中，您应该使用提供给函数的参数作为document.getElementById()中的字符串或字符串（就像您当前一样），但是如果您要传递参数，则可能应该使用它（否则没有意义）。

<form id="url" action='changesrc('main', target)' method="post">
    <div id=target>
        <input type="text" name="target" id="target" size="65"></div>
    </form>
</div>

在此示例中，您尝试使用相同的字符串分隔符引用字符串中的字符串。要解决此问题，您应该在双引号分隔的字符串中使用单引号：

<form id="url" action="changesrc('main', target)" method="post">

或者在单引号分隔的字符串中用双引号引起来：

<form id="url" action='changesrc("main", target)' method="post">

action 属性用于指定表单数据的提交位置，例如服务器端脚本;不用于客户端事件处理;如果必须使用内联事件处理，则应使用 onkeypress 事件处理程序：

<form id="url" onkeypress="changesrc('main', target)" method="post">

Answer 2

检查你的代码：

在

<form id="url" action='changesrc('main', target)' method="post"><div id=target><input type="text" name="target" id="target" size="65"></div></form>

你有action='changesrc('main', target)'.它应该是action="changesrc('main', target)"的，因为属性应该用双引号引起来，如果你希望它们用单引号引起来，你应该转义其他单引号。

但是target属性是要将表单发送到的文件。您希望在提交表单时执行changesrc，因此onsubmit="changesrc('main',target)" .

但是我们onsubmit="changesrc('main', target)".但是，您希望输入id="target"的值不是未定义的变量target 。然后，它onsubmit="changesrc('main', document.getElementById('target').value)".但是在调用该函数之后，我想您不想将表单发送到服务器，因此我们需要onsubmit="changesrc('main',document.getElementById('target').value);return false;"

但问题是你有两个元素与 id="target" .因此，请将其从<div>中删除。

然后，你有

function changesrc(main, url) {
    document.getElementById('main').setAttribute('src', url);
}

好吧，它可以工作，但是您没有使用参数 main .我猜你想要

function changesrc(main, url) {
    document.getElementById(main).setAttribute('src', url);
}

最终代码为：

.HTML：

<form id="url" onsubmit="changesrc('main',document.getElementById('target').value);return false;" method="post">
    <div>
        <input type="text" name="target" id="target" size="65">
    </div>
</form>
<div id="frame">
    <iframe id="main" name="main" type="text/html" src="" frameborder="0" allowtransparency="true"></iframe>
</div>

JavaScript：

function changesrc(main, url) {
    document.getElementById(main).setAttribute('src', url);
}

你可以在这里看到它：http://jsfiddle.net/UsGJb/