How to handle click event on Submit Button

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.

possible duplicate of [how do stop events bubbling in Jquery?](http://stackoverflow.com/questions/4522257/how-do-stop-events-bubbling-in-jquery) — mate64, Apr 18 '15 at 00:16
http://stackoverflow.com/questions/4522257/how-do-stop-events-bubbling-in-jquery — mate64, Apr 18 '15 at 00:16

score 3 · Answer 1 · answered Apr 17 '15 at 17:19

3

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 
});

answered Apr 17 '15 at 17:19

Satpal

132,252
13
159
168

here is my form code
– Prasanth Apr 17 '15 at 17:21
Not working. It is not transferring to ----- url: 'includes/atneditprocess.php', And on submission the address bar shows : http://localhost/studentAttendanceEdit.php?atn=P&stcode11=1501001&doa11=2015-04-14&sem11=1 – Prasanth Apr 17 '15 at 17:27
@Prasanth, You are using `$.ajax()` to submit data, What exactly you want? I think you don't need event handler at all. Create form corrretly then you won't need anything. – Satpal Apr 17 '15 at 17:30
My processing code the for the form is "includes/atneditprocess.php". So I use this script to handle the event without refreshing the page. – Prasanth Apr 17 '15 at 17:33

score 1 · Answer 2 · answered Apr 17 '15 at 17:44

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);
                         }
                     });
                 });

score 0 · Accepted Answer · 2015-04-17T17:52:09.613

0

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);
           }
         });
   });

edited Apr 17 '15 at 17:52

answered Apr 17 '15 at 17:37

1

This will refresh the page as you don't prevent the default event from triggering – DarkBee Apr 17 '15 at 17:46
@DarkBee I forgot it. And it was added. – Apr 17 '15 at 17:48
1

it's still wrong, you also forgot `function(e)` – baao Apr 17 '15 at 17:51

Chris Mackie · Answer 4 · 2015-04-17T17:57:25.570

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();
});

How to handle click event on Submit Button

4 Answers4