Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
679 views
in Technique[技术] by (71.8m points)

javascript - HTML-form submit button not running the OnSubmit script associated with it

I'm making a chrome extension, and so far I'm just testing some things. The HTML for the extension is this:

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

The processform.js file is this:

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

When I press the submit button the alert doesn't appear.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You cannot use inline code in a Chrome extension due to its Content Security Policy, and setting onsubmit in the element counts as inline.

A jQuery-based solution (you will need to include jQuery with the extension and add it to the page, but there's no harm in that):

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

A pure JavaScript solution would be:

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...