在选择更改时提交Ajax表单

时间:2011-08-20 09:47:18

标签: jquery ajax forms select

我需要提交有关选择更改的表格。有我的形式。

<form id="form" name="form" method="post" action="modules/submit.php">
<select name='category' id='category' size='12' onChange='this.form.submit();'>
<option value='1'>One</option>
<option value='2'>Two</option>
<option value='3'>Three</option>
</select>
<select name='subcategory' id='subcategory' size='12'>
</select>
</form>

JS:

$(document).ready(function(){
    $('#form').submit(function() {
        select();
        e.preventDefault();
    });

});


function select()
{
    error(0);

    $.ajax({
        type: "POST",
        url: "modules/submit.php",
        data: $('#form').serialize(),
        dataType: "json",
        success: function(msg){
            if(parseInt(msg.status)==1)
            {
                window.location=msg.txt;
            }
            else if(parseInt(msg.status)==0)
            {
                result(1,msg.txt);
            }
        }
    });

}

function result(act,txt)
{
    if(txt) $('#subcategory').html(txt);
}

submit.php:

if(isset($_POST['category'])){
die(msg(0,"<option value='0'>Trololo</option>"));
}
function msg($status,$txt)
{
    return '{"status":'.$status.',"txt":"'.$txt.'"}';
}

当我更改选择表单时,正在提交并重定向到submit.php文件。 我需要获得子类别选择的结果。

2 个答案:

答案 0 :(得分:4)

试试这个:

$('#category').change(function() {

    $('#form').submit();

});

此外,您的代码将无法阻止表单提交的默认操作,因为您没有将event参数传递给函数。

$('#form').submit(function(e) { //Note the e!!
    e.preventDefault();
    select();
});

答案 1 :(得分:0)

您的表单将始终提交,因为您没有将e作为参数传递给提交处理程序:

$('#form').submit(function(e) {
    e.preventDefault();
    select();
});

另外,我会将msg函数更改为:

function msg($status,$txt)
{
    return array('status' => $status, 'text' => $text);
}

和电话:

if(isset($_POST['category'])){
    die(json_encode(msg(0,"<option value='0'>Trololo</option>")));
}