Preventing an onSubmit event from reloading the page

The default action for a submit button on a web page that contains an HTML form is to post all the form data to the server on which the application runs. What if we don't want this to happen?

How to do it...

Experiment with the submit application by performing the following steps:

1. Our web page submit.html contains the following code:

   <form id="form1" action="http://www.dartlang.org" method="POST">
     <label>Job:<input type="text" name="Job" size="75"></input>
      </label>
      <input type="submit" value="Job Search">
      </form>

   Comment out all the code in submit.dart. Run the app, enter a job name, and click on the Job Search submit button; the Dart site appears.

2. When the following code is added to submit.dart, clicking on the no button for a longer duration makes the Dart site appear:

   import 'dart:html';
   
   void main() {
     querySelector('#form1').onSubmit.listen(submit);
   }
   
   submit(Event e) {
        e.preventDefault...