javascript表单动作changesrc方法发布文本输入onsubmit

Question

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

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

我的主要iframe

<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时执行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/