Question

我正在制作镀铬扩展程序，到目前为止，我只是在测试一些东西。扩展程序的HTML是：

<!doctype html>
<html>
  <head>
    <title>Title</title>
    <script src="processform.js"></script>
  </head>
  <body>
    <form name="myform" onSubmit="ExampleJS()">
         First name: <input type="text" id="fname" name="firstname" /><br />
         Last name:  <input type="text" id="lname" name="lastname" /><br />
        <input name="Submit"  type="submit" value="Update" />
    </form>
  </body>
</html>

processform.js文件是这样的：

function ExampleJS(){
    var jFirst = document.getElementById("fname").value;
    var jLast = document.getElementById("lname").value;
    alert("Your name is: " + jFirst + " " + jLast);
}

当我按下提交按钮时，警报不会出现。

Answer 1

由于其内容安全政策，您在Chrome扩展程序中cannot use inline code，并且元素中的onsubmit设置为内联。

基于jQuery的解决方案（您需要将jQuery包含在扩展中并将其添加到页面中，但这并没有什么害处）：

// processform.js
$(document).ready(function(){
  // Bind from JS, not inline
  $("form").submit(ExampleJS);
});

纯JavaScript解决方案将是：

// processform.js
document.addEventListener('DOMContentLoaded', function(){
  // Bind from JS, not inline
  document.forms["myform"].addEventListener('submit', ExampleJS);
});

Answer 2

请输入以下代码 -

（文档）$。就绪（函数（）{ $（＆＃34;形式＆＃34）。提交（ExampleIS）;}）;

这应该有用。

HTML表单提交按钮未运行与之关联的OnSubmit脚本

2 个答案: