Question

这是我处理提交按钮点击事件的脚本

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

这是按钮代码

<button id='subbtn' type='submit' class='button'> Change </button>

但它不能正常工作。请帮我处理提交按钮的点击事件。

Answer 1

您应该处理submit form事件，然后您可以使用event.preventDefault()取消默认操作。

$('YourFormSelector').on("submit",function(event){
    //Cancel default event
    event.preventDefault();

    //Rest of your code 
});

Answer 2

首先，您执行提交的方式要求您使用e.preventDefault();来阻止您的表单通过html提交。

其次，传递data的方式是错误的/您对GET操作的方式。在您尝试通过POST提交时，您需要像这样创建data：

data: {
    stcode : stocde
    sem : sem
    doa : doa
      }

完整代码：

$('#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

试试这个：

    $(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

替换此行

data: 'stcode='+stcde+'&sem='+sem+'&doa='+doa,

与

data: 'stcode='+stcode+'&sem='+sem+'&doa='+doa,

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

如何处理提交按钮上的单击事件

4 个答案: