Ajax和多种表单未提交

Question

尝试使用ajax / php提交多个表单，并且我想根据哪种表单更改成功输出，并且基于该表单，php处理页面的回显也应有所不同。 我没有成功。

我的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>

我的js ：（不会将正确的输出发送到正确的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);

});

我的php ：（不发送回显信息）

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

首先，对于$('.account_submit').click您没有account_submit类。

其次，“提交”按钮将绕过您的jquery。 尝试更改为普通按钮或捕获onSubmit事件。

第三，我个人将沿着

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

和

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

Answer 2

您必须在clicking button后reinitialize form options ，因此无需changing divs例如

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);

阅读文件