0

我对 jquery 很陌生，似乎无法解决这个问题。

我需要弄清楚如何从具有表单输入动态值的表单中动态设置下面这段代码中的键：值对。如果我手动添加键：值对，则代码有效，但我并不总是知道用户创建的表单名称将是什么。

请参阅下面代码中间部分的注释。我正在尝试使用 .serialize() 中的值作为 $_POST 值传递。

这是我目前从 var formValues 获得的值：

ID=10&user_login=test9&wplp_referrer_id=&&block_unblock=u

但是，当我尝试使用以下方法提取函数中的值时：

$user_id = $_POST['ID'];

$user_id中没有设置'10'的ID，说明下面我用来传递序列化结果的语法或方法不正确。

jQuery(document).ready( function($) {

        $("#wplp_edit_member").submit( function() {

            var formValues = $("#wplp_edit_member").serialize(); //Get all the form input values    

            alert(formValues); //Check form values retrieved for testing only

            var numbers = /^[0-9]+$/;

            // Validate fields START
            var wplp_referrer_id = $("#wplp_referrer_id").val();

            if( !wplp_referrer_id.match(numbers) ) {

                alert("Please enter a numeric value");
                return false;

            }

            // Validate fields END

            $("#ajax-loading-edit-member").css("visibility", "visible");

            // Post data to ajaxurl
            $.post(ajaxurl, {

                action: "wplp_edit_member", //Call the PHP function to update/save form values

                data: formValues, //Use data to pass form field values as $_POST values to the function above

                // No More manual inputs of form fields to be passed
                //ID:$("#ID").val(),

                //user_login:$("#user_login").val(),

                //wplp_referrer_id:$("#wplp_referrer_id").val(),

                //block_unblock:$("#block_unblock").val(),

            }, 

            // Success
            function(data) {

                $("#ajax-loading-edit-member").css("visibility", "hidden");
                //alert("Member Updated");
                //document.location.reload();

            }

        );

        return false;

    });

});

谢谢！

4

3 回答 3

1

如果要将数据作为 json 发布，可以使用 $.fn.serialize() 的变体，添加 jquery 扩展，

$.fn.serializeObject = function()
{
   var o = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (o[this.name]) {
           if (!o[this.name].push) {
               o[this.name] = [o[this.name]];
           }
           o[this.name].push(this.value || '');
       } else {
           o[this.name] = this.value || '';
       }
   });
   return o;
};

并将其用作，

var data = $('#some-form').serializeObject(); //the dynamic form elements.
data.action = "wplp_edit_member";

$.post(ajaxurl, data, function(data) {
    $("#ajax-loading-edit-member").css("visibility", "hidden");
    //alert("Member Updated");
    //document.location.reload();
});

如果发布 json 不是您的要求 $.fn.serializeArray 可以工作。

希望这可以帮助。

于 2013-07-25T04:56:02.477 回答
0

您想要的是将属性动态添加到 javascript 对象。如何做到这一点遍布网络，但也在这里演示：

是否可以将动态命名的属性添加到 JavaScript 对象？

所以在你的情况下，你会在调用之前先设置你的对象.post：

var formData = {};
for (...) {
  formData[...] = ...;
}

$.post(ajaxurl, formData, function (data) {
  ...
});

完成上述迭代的一种方法是从<form>标签之间的所有输入中收集值：

$('form input').each(function ($input) {
    formData[$input.attr('name')] = $input.val();
});

有很多方法可以给这只猫剥皮。此外，jQuery 有很多插件可能在这里有所帮助，虽然通常是 YAGNI（你不需要它），所以只是 KISS（保持简单，愚蠢）。

于 2013-07-25T04:30:04.777 回答
0

这是我能够根据@shakib 提供的代码获得的解决方案

jQuery(document).ready( function($) {

    $("#wplp_edit_member").submit( function() {

        var numbers = /^[0-9]+$/;
        var wplp_referrer_id = $("#wplp_referrer_id").val();

        // Validate fields START
        if( !wplp_referrer_id.match(numbers) ) {

            alert("Please enter a numeric value");
            return false;

        }
        // Validate fields END

        $("#ajax-loading-edit-member").css("visibility", "visible");

        // Convert to name value pairs
        $.fn.serializeObject = function(){
               var o = {};
               var a = this.serializeArray();
               $.each(a, function() {
                   if (o[this.name]) {
                       if (!o[this.name].push) {
                           o[this.name] = [o[this.name]];
                       }
                       o[this.name].push(this.value || '');
                   } else {
                       o[this.name] = this.value || '';
                   }
               });
               return o;
        };

        var data = $('#wplp_edit_member').serializeObject(); //the dynamic form elements.

        data.action = "wplp_edit_member";

        $.post(ajaxurl, data, function(data) {
            $("#ajax-loading-edit-member").css("visibility", "hidden");
            //alert("Member Updated");
            //document.location.reload();
        });     

    return false;

});

});

如果您了解 Jquery/Javascript，这实际上是一个非常简单的实现！;o)

感谢大家的意见！

于 2013-07-26T01:39:00.393 回答