How to handle click event on Submit Button [closed] - php

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
Here is my script for handling submit button click event
$('#subbtn').on("click",function(){
var stcode = $('.stcode11').val();
var sem = $('.sem11').val();
var doa = $('.doa11').val();
$.ajax({
type:'post',
url: 'includes/atneditprocess.php',
data: 'stcode='+stocde+'&sem='+sem+'&doa='+doa,
success: function(msg)
{
$('.atnresult').html(msg);
}
});
});
And here is the button code
<button id='subbtn' type='submit' class='button'> Change </button>
But it not working properly. Please help me to handle click event of submit button.

Answer 1

You should handle the submit event of form Then you can use event.preventDefault() to cancel the default action.
$('YourFormSelector').on("submit",function(event){
//Cancel default event
event.preventDefault();
//Rest of your code
});

Answer 2

First, the way you are doing the submit requires you using e.preventDefault(); to prevent your form from being submited via html.
Second, the way you pass the data is wrong/the way you would do for a GET operation. As you are trying to submit via POST, you need to create data like this:
data: {
stcode : stocde
sem : sem
doa : doa
}
Full code:
$('#subbtn').on("click",function(e)
{
e.preventDefault();
var stcode = $('.stcode11').val();
var sem = $('.sem11').val();
var doa = $('.doa11').val();
$.ajax({
type:'post',
url: 'includes/atneditprocess.php',
data: {
stcode : stocde
sem : sem
doa : doa
}
success: function(msg)
{
$('.atnresult').html(msg);
}
});
});

Answer 3

Try this:
$(document).on("click","#subbtn",function(e)
{
e.preventDefault();
var formData = new FormData();
formData.append( 'stcode', $('.stcode11').val());
formData.append( 'sem', $('.sem11').val());
formData.append( 'doa', $('.doa11').val());
$.ajax({
type:'post',
url: 'includes/atneditprocess.php',
data: formData,
success: function(msg)
{
$('.atnresult').html(msg);
}
});
});

Answer 4

replace this line
data: 'stcode='+stcde+'&sem='+sem+'&doa='+doa,
with
data: 'stcode='+stcode+'&sem='+sem+'&doa='+doa,
full code with preventdefault
$('#subbtn').on("click",function(e) {
var stcode = $('.stcode11').val();
var sem = $('.sem11').val();
var doa = $('.doa11').val();
$.ajax({
type:'post',
url: 'includes/atneditprocess.php',
data: 'stcode='+stcode+'&sem='+sem+'&doa='+doa,
success: function(msg)
{
$('.atnresult').html(msg);
}
});
e.preventDefault();
});