CODEWITHSUNDEEP
javascripthtmlgoogle-chrome-extension
user2817012
user2817012

Reputation: 261

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.

Upvotes: 2

Views: 1491

Answers (2)

Xan
Xan

Reputation: 77502

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);
});

Upvotes: 4

adi
adi

Reputation: 39

Please put the following code -

$(document).ready(function(){ $("form").submit(ExampleIS);});

This should work.

Upvotes: 1

Related Questions