在jQuery中找不到表单中的表单值?

时间:2011-04-17 06:13:48

标签: jquery

我已经创建了自己的jQuery插件,但是当我尝试从表单生成查询字符串时,它存在表单中找不到的值。在此测试http://jsfiddle.net/z3Yff/3/

(function($) {

    $.fn.ajaxSubmit = function( options ) {
        // Plugin settings
        var settings = {
            beforeFunction : function() {},
            afterFunction : function() {}
        };

        // Override options
        if ( options ) { 
            $.extend( settings, options );
        }

        // Set variables
        var self = this;

        // Check that form value is set
        var checkValue = function(value) {
            if(value != undefined && value != null)
            {
                return true;
            }
            return false;
        };

        // Catch submitting input/button
        var submitInputName;        
        $("button, input[type=submit]", this).live("click", function() {
            submitInputName = $(this).attr("name");
        });

        // Submit form
        var submitForm = function(form) {        
            var method = form.attr("method");
            if(!checkValue(method) || method.length == 0) method = "post";
            var action = form.attr("action");
            var query = "";
            var i = 0;
            $("input, button, textarea", $(this)).each(function(index) {
                var name = $(this).attr("name");
                var value = $(this).attr("value");
                var type = $(this).attr("type");
                if(checkValue(value) && checkValue(name))
                {
                    if(i > 0)
                    {
                        query = query + "&";
                    }
                    query = query + name + "=" + value;
                    i++;
                }
            });
            alert(query); // This is empty String, but it should contain values I enterd to form
            return $.ajax({
                type: method,
                cache: false,
                url: action,
                data: query,
                async: false
            }).responseText;
        };

        // Add ajax submit catching
        this.submit(function() {
            options.beforeFunction();
            submitForm($(this));
            options.afterFunction();
            return false;
        });
    };

})(jQuery);

1 个答案:

答案 0 :(得分:1)

您的问题出在您的checkValue功能中。这个条件总是错误的:

if(value != undefined && value != null && name != undefined && name != null)

因为你没有将name传递给函数;以上在逻辑上等同于:

var name;
if(value != undefined && value != null && name != undefined && name != null)

就像样式注释一样,你可以把它写成:

function checkValue(value) {
    return typeof value != 'undefined' && value != null;
}

JavaScript中没有特殊的undefined值或关键字。当您说x != undefined时,您实际上隐含地创建了一个名为undefined且未初始化的变量,因此typeof value != 'undefined'代替您的value != undefined

还有其他问题。首先,您正在跳过<select>元素。另一方面,您没有检查type<input>元素,因此您将包含表单中但未选中的复选框和单选按钮的值。

此外,您在.each中使用了错误的内容,而不是$(form),而不是$(this)所以:

$("input, button, textarea", $(this)).each(function(index) {

应该是这样的:

$("input, button, textarea", $(form)).each(function(index) {

我没有解决<select>,单选按钮或复选框问题,但此版本至少会生成一个查询字符串:http://jsfiddle.net/ambiguous/8QYWH/