0

我创建了一些 javascript 代码，将表单提交到标签之外。这是代码：

<script type="text/javascript">
var myForm = document.forms['myForm'];

var formSubmit = document.getElementById('formSubmit');


formSubmit.onclick = function(){
myForm.submit();
}
</script>

<form name="myForm" action="http://msn.com" method="post"> 
</form>
<div id="formSubmit"><button>Click me</button></div>

当我在http://jsfiddle.net/HrCxz/上尝试此代码时，它工作正常。但是当我在 HTML 文件中添加此代码并运行该页面时，它不起作用。代码有什么问题？请解决此问题，并在此先感谢您。

4

4 回答 4

3

在小提琴中，您的代码在onload处理程序中运行。这是默认选项，但左侧​​面板允许您更改它。如果您将其更改为在其中运行，<head>则小提琴也不起作用：http: //jsfiddle.net/HrCxz/1/

您需要添加onload自己的处理程序，或者将脚本块移动到它尝试操作的元素之后。当浏览器从上到下解析页面时，脚本块按照它们被发现的顺序执行。任何给定脚本块中的 JS 只能操作已解析的元素，即出现在源代码开头的元素，除非您将代码放在从事件调用的事件处理程序onload中（或从为浏览器准备好的文档中）支持它，或者如果您使用提供它的库或自己编写代码）。

于 2012-12-04T11:45:00.863 回答
0

JSFiddle 正在使用onload事件。

第1步：

<form>通过将您的 JS 移动到标签下方来尝试此操作，

<form name="myForm" action="http://msn.com" method="post"> 
</form>
<div id="formSubmit"><button>Click me</button></div>

<script type="text/javascript">
   var myForm = document.forms['myForm'];

   var formSubmit = document.getElementById('formSubmit');


   formSubmit.onclick = function(){
      myForm.submit();
   }
</script>

第2步：

或者你可以像这样附加onload事件，

<script type='text/javascript'>//<![CDATA[ 
  window.addEvent('load', function() {
     var myForm = document.forms['myForm'];

     var formSubmit = document.getElementById('formSubmit');

     formSubmit.onclick = function(){
         myForm.submit();
     }
  });//]]>  

</script>

<form name="myForm" action="http://msn.com" method="post">
</form>

<div id="formSubmit"><button>Click me</button></div>
于 2012-12-04T11:45:29.357 回答
0

您在 div 元素上调用 click 函数，是否需要在按钮上执行此操作？var formSubmit = document.getElementById('BUTTONIDHERE');

于 2012-12-04T11:46:54.083 回答
0

您的代码示例不起作用，因为在浏览器有机会加载 DOM 元素之前正在处理 JavaScript。有必要将您的 JavaScipt 片段放在结束 body 标记之前（因此在加载 DOM 元素后对其进行处理），或者使用“加载时”或“准备就绪”事件处理程序来检测 DOM 何时加载然后触发你的Javascript。

下面是三个在 DOM 元素加载后如何触发 JavaScript 的示例：

1）如果您使用的是 jQuery，请将您的 Javascript 传递到 $(document).ready() 事件处理程序中：

$(document).ready(function() {
  // Handler for .ready() called.
  var myForm = document.forms['myForm'];
  var formSubmit = document.getElementById('formSubmit');

  formSubmit.onclick = function(){
    myForm.submit();
  }
});

2) 您可以使用 jQuery 的备用语法来处理文档“就绪”：

$(function() {
  // Handler for .ready() called.
  var myForm = document.forms['myForm'];
  var formSubmit = document.getElementById('formSubmit');

  formSubmit.onclick = function(){
    myForm.submit();
  }
});

2) 将您的 JavaScript 添加到绑定到窗口“加载”事件的回调函数中 - 这也是一个事件处理程序：

window.addEvent('load', function() {
  var myForm = document.forms['myForm'];
   var formSubmit = document.getElementById('formSubmit');

   formSubmit.onclick = function(){
     myForm.submit();
   }
})

干杯!

于 2012-12-04T12:04:36.177 回答