ajax and multiple forms not submitting

Question

trying to submit multiple forms with ajax/php, and i want to change the success output depending on which form, and also the echo from the php processing page should be different based on which form. i have not succeeded.

my html:

<form method="post" class = "teacher_account_form" id="pay_form" name="pay_form">                
    <input type="text" id="hourly_pay">
    <button type="submit" id="work_submit" name="work_submit"></button>
</form>
<div id = "pay_output"></div>
<form method="post" class = "teacher_account_form" id="edu_form" name="edu_form">                
    <input type="text" id="edu_level">
    <button type="submit" id="edu_submit" name="edu_submit"></button>
</form>
<div id = "edu_output"></div>

my js: (does not send the right output to the right div)

$( document ).ready(function() {

var button_clicked;
var output_div;
$('.account_submit').click(function() {
    button_clicked = $(this).attr('id');
    switch (button_clicked)
    {
        case "work_submit":
            output_div = "pay_output";
            break;            
        case "edu_submit":
            output_div = "edu_output";
            break;            
    }
});

var options = {
type: 'post',
url: "/users/p_teacher_account_work", 
success: function(response) {
    $('#' + output_div).html(response);
}
};

$('form').ajaxForm(options);

});

my php: (does not send back echo message)

public function p_teacher_account_work() {

    // set up view
    $this->template->content = View::instance('v_users_teacher_p_account_work');

    if (isset($_POST['work_submit']))
    {
        echo "Your work details were added";
    }

    }
    else if (isset($_POST['edu_submit']))
    {
        echo "education details updated";
    }
}

Answer 1

Firstly for $('.account_submit').click you do not have a account_submit class.

Secondly, the submit button will bypass your jquery. Try changing to normal buttons or catch the onSubmit event.

Thirdly, I would personally go along the router of

    $("#pay_form").submit();

and

    $("#edu_form").submit();

Answer 2

You have to reinitialize your form options after clicking on button , so can do it without changing the divs like,

var options = {
  type: 'post',
  url: "/users/p_teacher_account_work", 
  success: function(response,statusText, xhr,jqForm) {
      $(jqForm[0]).next('div').html(response);
  }
};

$('form').ajaxForm(options);

Read docs