javascript - Submitting the form manually using Ajax -

i trying call servlet on form submit using ajax. it's not hitting ajax , page reloads. triggering form submit manually , after on submit function calling ajax method.

$("#image1").on('change', function(event) {    $('#myform').trigger('submit');    alert("button clicked"); // submitted      $("#myform").submit(function(e) { // not happening      event.preventdefault();        alert('form clicked');      //var formid=("#myform").submit();      $.ajax({        type: 'get', // or post or put or delete        // verb        url: "/bin/mr/controller?q=iechange",        data: $("#myform").serialize(),        // type        // sent        //        // server        datatype: 'json', // expected data format        // server        processdata: true, // true or false        success: function(data) { // on successfull            alert('call success');          console.log(data);              },        error: function(msg) { // when service call          alert('call fail'); // fails          }      });          });      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <form id="myform" >  <input name="img" id="image1" type="file" accept="image/*">  </form>

you need bind submit event handler when page loads.

currently trying bind after have manually triggered submission… late because event have been , gone then.

move code binds submit event outside event handler change event.