Question

我创建了一些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文件中添加此代码并运行页面时，它不起作用。代码有什么问题？请解决这个问题，并提前多多感谢。

Answer 1

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

您需要添加自己的onload处理程序，或者将脚本块移动到它尝试操作的元素之后。当浏览器从上到下解析页面时，脚本块按它们找到的顺序执行。任何给定脚本块中的JS只能操作已经解析过的元素，即看起来更接近源头的元素，除非您将代码放在从onload事件调用的事件处理程序中（或从文档已准备好支持它的浏览器，或者您使用提供它的库或以其他方式自己编写代码。

Answer 2

JSFiddle正在使用onload事件。

第1步：

通过将JS移至<form>标记

下方来尝试此操作

<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>

Answer 3

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

Answer 4

您的代码示例不起作用，因为在浏览器有机会加载DOM元素之前正在处理JavaScript。有必要将JavaScipt片段放在结束体标记之前（因此在加载DOM元素之后对其进行处理），或者使用“on load”或“on ready”事件处理程序来检测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添加到绑定到窗口'load'事件的回调函数中 - 这也是一个事件处理程序：

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

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

干杯！

我的JavaScript代码在本地不起作用，但在jsfiddle上运行正常，为什么？

4 个答案: