Chrome packaged app, how to submit form

Question

I'm new in Chrome packaged apps and have two questions (that actually solves one problem).

I'm trying to do a simple form to send some data to a remote server, using Ajax and POST. As I understand, I can't use inline javascript ( tags) and also, I can't use events on the HTML button element. So, I've no idea where to put my javascript and what to execute when the button is clicked. My forms is as simple as this:

<!DOCTYPE html>
<html>
  <head>
    <script> 
      function send(){
        //do some ajax
      }
    </script>
  </head>
  <body>
    <img id="headerImage" name="headerImage" src="logo_main.gif"/>
    <div>
      <form>
        <table>
          <tr>
            <td>Send:</td>
            <td><input type="text" size="32" id="send" name="send"/>
          </tr>
          <tr>
            <td colspan="2"><button id="send">Send</button>
          </tr>
        </table>
      </form>
    </div>
  </body>
</html>

So my two questions are: where do I put my javascript? and how do I execute a javascript function from my HTML button element?

Thanks a lot!

PD I've searched for complete documentation about this, but can't find it. I'll very thankfull if some one posts a link with the complete documentation.

Answer 1

Your question's title does not really correspond to your question (edit it, maybe?). Answering your questions as quoted:

So my two questions are: where do I put my javascript? and how do I execute a javascript function from my HTML button element?

Both of those questions are answered in documentation on Content Security Policy , with an example. Your JavaScript code should go in a separate file that you include with a <script> tag, and you need to bind event listeners from within that code.

To make this a proper answer, here's how to do it in your case, with jQuery (for non-jQuery solution see docs mentioned). To use, add jQuery as "jquery.js" in your app's files.

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery.js"></script>  
    <script src="form.js"></script>      
  </head>
  <body>
    <!-- ... -->
    <button id="send">Send</button>
    <!-- ... -->
  </body>
</html>

form.js:

function send(){
  //do some ajax
}

// Use document ready to wait for DOM to be created
$(document).ready(function(){
  $('#send').click(send); // Binds a listener for onclick event
});

Chrome packaged app, how to submit form

Question

1 answers

solution1
2 ACCPTED 2014-05-20 09:05:04

Chrome packaged app, how to submit form

Question

1 answers

solution1 2 ACCPTED 2014-05-20 09:05:04

solution1
2 ACCPTED 2014-05-20 09:05:04