ajax clean up if possible on submit

Question

i have this piece of code that finally works for me

  $(function(){
      $('.submit1').click(function(){
          $.ajax({
              type: "POST",
              url: "delanno.php",
              data: $("#myform1").serialize(),
              beforeSend: function(){
                  $('#result').html('<img src="images/loading.gif" />');
              },
              success: function(data){
                  $('#result').html(data);
              }
          });
      });
      $('.deleter').on('click', function(){
          $(this).closest('.announce-box').remove();
      }) 
  }); 

    $(function(){
      $('.submit2').click(function(){
          $.ajax({
              type: "POST",
              url: "delanno.php",
              data: $("#myform2").serialize(),
              beforeSend: function(){
                  $('#result').html('<img src="images/loading.gif" />');
              },
              success: function(data){
                  $('#result').html(data);
              }
          });
      });
      $('.deleter').on('click', function(){
          $(this).closest('.announce-box').remove();
      }) 
  }); 
      $(function(){
      $('.submit3').click(function(){
          $.ajax({
              type: "POST",
              url: "delanno.php",
              data: $("#myform3").serialize(),
              beforeSend: function(){
                  $('#result').html('<img src="images/loading.gif" />');
              },
              success: function(data){
                  $('#result').html(data);
              }
          });
      });
      $('.deleter').on('click', function(){
          $(this).closest('.announce-box').remove();
      }) 
  }); 

is it possible to combine all 3 sets into 1 piece of code?

Answer 1

I'm assuming the buttons don't have any other classes, and if so you can get the last digit with this.className.slice(-1) and target all buttons with one event handler and use the last digit to get the right form :

$(function(){
    $('[class^="submit"]').on('click', function() {
        var n = this.className.slice(-1);
        $.ajax({
            type : 'POST',
            url  : 'delanno.php',
            data : $('#myform' + n).serialize(),
            beforeSend: function(){
                $('#result').html('<img src="images/loading.gif" />');
            }
        }).done(function(data) {
            $('#result').html(data);
        });

        $('.deleter').on('click', function(){
            $(this).closest('.announce-box').remove();
        }); 
    });
});

as suggested in the comments, if the submit buttons are inside the relevant forms, you should use an actual submit button and catch the submit event, not the click event on the button :

$(function(){
    $('[id^="myform"]').on('submit', function(e) {
        e.preventDefault();
        $.ajax({
            type : 'POST',
            url  : 'delanno.php',
            data : $(this).serialize(),
            beforeSend: function(){
                $('#result').html('<img src="images/loading.gif" />');
            }
        }).done(function(data) {
            $('#result').html(data);
        });

        $('.deleter').on('click', function(){
            $(this).closest('.announce-box').remove();
        }); 
    });
});

Answer 2

Yes, it should be...

post = function (ele) {
     $.ajax({
         type: "POST",
         url: "delanno.php",
         data: $(ele).serialize(),
         beforeSend: function () {
             $('#result').html('<img src="images/loading.gif" />');
         },
         success: function (data) {
             $('#result').html(data);
         }
     });
 };

 $(function () {
     $('.submit1').on('click', post($('#submit1')));
     $('.submit2').on('click', post($('#submit2')));
     $('.submit3').on('click', post($('#submit3')));
     $('.deleter').on('click', function () {
         $(this).closest('.announce-box').remove();
     });
 });