CODEWITHSUNDEEP
jqueryajaxwordpressforms
FRQ6692
FRQ6692

Reputation: 348

How Merge two Ajax form

I have two Ajax form to filter posts on same page in my wordpress website. These two are filtering post separately well way.

Here is the link Test Server

Now i m trying to merge these two into one. After that its show result as a One form.

How merge 2 Ajax form into 1??

Script form:1

jQuery(document).ready(function($){
 $('#test .br').click(function(){

// declaring an array
var choices = {};

$('.contents').remove();
$('.filter-output').empty()

console.log(choices);
$.ajax({
    url: ajaxobject.ajaxurl,
    type :'POST',
    data : {
        'action' : 'call_post',
        'choices' : choices,
    },

    success: function (result) {
        $('.filter-output').append(result);

    }     
  });
  })
 });

Script Form:2

jQuery(function($){
$('#filter').submit(function(){
    var filter = $(this);
    $.ajax({
        url:filter.attr('action'),
        data:filter.serialize(), // form data
        type:filter.attr('method'), // POST
        beforeSend:function(xhr){
            filter.find('button').text('Processing...'); // changing the button label
        },
        success:function(data){
            filter.find('button').text('Apply filter'); // changing the button label back
            $('#response').html(data); // insert data
        }
    });
    return false;
});
});

Upvotes: 0

Views: 278

Answers (1)

Vel
Vel

Reputation: 9331

Do you want like this?

            jQuery(document).ready(function($){
                 $('#test .br,#filter').click(function(){
                var ChkClick  = $(this).attr("id");

                if(ChkClick=='filter'){
                        $('#filter').submit(function(){
                        var filter = $(this);
                        $.ajax({
                            url:filter.attr('action'),
                            data:filter.serialize(), // form data
                            type:filter.attr('method'), // POST
                            beforeSend:function(xhr){
                                filter.find('button').text('Processing...'); // changing the button label
                            },
                            success:function(data){
                                filter.find('button').text('Apply filter'); // changing the button label back
                                $('#response').html(data); // insert data
                            }
                        });
                        return false;


                }else{
                // declaring an array
                    var choices = {};
                    $('.contents').remove();
                    $('.filter-output').empty()

                    $.ajax({
                        url: ajaxobject.ajaxurl,
                        type :'POST',
                        data : {
                            'action' : 'call_post',
                            'choices' : choices,
                        },
                        success: function (result) {
                            $('.filter-output').append(result);

                        }     
                      });
                  }  
                })
             });

Upvotes: 1

Related Questions