jQuery AJAX posting form to multiple other forms

Question

I've multiple forms like these:

<form class="form_game">
<select name="game" class="gm">
<option value="Badminton">Badminton</option>
<option value="Basketball">Basketball</option>
<option value="Football">Football</option>
</select>
</form>

<form class="form_branch">
<input name="action" type="hidden" value="the_ajax_hook_2" />
<select name="branch" id="branch" onchange="display_table();" >
<option value="CSE">CSE</option>
<option value="CE">CE</option>
<option value="ECE">ECE</option>
<option value="EE">EE</option>
<option value="IT">IT</option>
<option value="ME">ME</option>
<option value="PE">PE</option>
<option value="PG">PG</option>
</select>
</form>
<form class="form_year">
<input name="action" type="hidden" value="the_ajax_hook_3" />
<select name="year" id="year" onchange="display_table_1();" >
<option value="D1">D1</option>
<option value="D2">D2</option>
<option value="D3">D3</option>
<option value="D4">D4</option>
</select>
</form>

My jQuery AJAX functions are:

function display_table(){

jQuery.post(the_ajax_script.ajaxurl, jQuery(".form_branch").serialize(),function(response_from_display_data_table){
            jQuery(".table_disp").html(response_from_display_data_table);
        });
}

And

function display_table_1(){

jQuery.post(the_ajax_script.ajaxurl, jQuery(".form_year").serialize(),function(response_from_display_data_table_1){
            jQuery(".table_disp").html(response_from_display_data_table_1);
        });
}

So as you can see that my display_table() takes value from 'form_branch' and display_table_1() from 'form_year'. And they corresponds to their respective other functions defined in jQueries.

How can I make the value from 1st form, i.e 'form_game' to pass along to both of the other forms so that other forms when submitted will post the value from 'form_game' along with their respective values to their targeted functions? What must be done to achieve this?

Answer 1

You can use beforeSend ajax event

It could be something like this (code not tested)

jQuery.post(the_ajax_script.ajaxurl,   jQuery(".form_branch").serialize(),function(response_from_display_data_table){
        jQuery(".table_disp").html(response_from_display_data_table);
    }).beforeSend(display_table_1());

or, the other way around:

jQuery.post(the_ajax_script.ajaxurl, jQuery(".form_year").serialize(),function(response_from_display_data_table_1){
        jQuery(".table_disp").html(response_from_display_data_table_1);
    }).beforeSend(display_table());