jQuery.serialize什么都不返回(输入元素DO有一个名字......)

时间:2016-09-05 16:22:49

标签: javascript jquery html forms

出于某种原因,我无法获得jQuery来序列化我的表单。进行谷歌搜索只是向我指出了一堆类似的问题,其中O.P。忘记给输入一个"名称"。但这不是我的问题,因为我的输入有一个名字......

$('#time_clock_form').serialize(); 

在此表单上不返回任何内容

<form id="time_clock_form" method="POST">           
    <label for="id">Enter last four ligits of SSN</label>
    <input type="text" id="ssn" name="ssn" maxlength="4">
    <input name="submit" value="Punch Timeclock" type="submit">
</form>

我整个早上都把头发撕掉了。我甚至提出了输入结束标记。 (显然,这没有用)

这是我序列化数据的地方

    // When the user types in their ssn, punch the timeclock
    $('#ssn').on('input', function(){

        // When the user has input all 4 digits...
        if($(this).val().length === 4){
            // Disable the input (only until the AJAX request completes...)
            $(this).prop('disabled', true);

        console.log($('#time_clock_form').serialize());

            // Send the AJAX request to punch the time clock
            $.ajax({
                url     : 'AJAX_punchTimeClock.php',
                data    : $('#time_clock_form').serialize(),
                success : function(Result){

                    // We can't use $(this) here because it would refer to the AJAX request, and not the input. Don't you just LOVE context errors?
                    $('#ssn').prop('disabled', false);

                    console.log(Result);
                },
                error   : function(XHR, textError, error){

                }

            });
        }
    })

1 个答案:

答案 0 :(得分:1)

问题是因为您在序列化之前禁用了inputserialize()无法处理已停用的表单元素。更改这些陈述的顺序:

$('#ssn').on('input', function() {
    if ($(this).val().length === 4) {
        // serialize the form and store the output here
        console.log($('#time_clock_form').serialize());

        // then disable the form...
        $(this).prop('disabled', true);

        // ajax...
    }
});

Updated fiddle