I'm facing an issue where I am trying to utilize ajax to call a servlet upon form submission. However, the ajax call is not being triggered and the page ends up reloading. To solve this problem, I have set up a manual trigger for the form submission, followed by calling the ajax method within the submit function.
$("#image1").on('change', function(event) {
$('#myform').trigger('submit');
alert("button clicked"); // this is submitted
$("#myform").submit(function(e) { // this is not happening
event.preventDefault();
alert('form clicked');
//var formId=("#myform").submit();
$.ajax({
type: 'GET',
url: "/bin/mr/controller?q=iechange",
data: $("#myform").serialize(),
dataType: 'json',
processdata: true,
success: function(data) {
alert('call success');
console.log(data);
},
error: function(msg) {
alert('call fail');
}
});
});
});<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>