Question

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

我需要弄清楚如何从具有表单输入动态值的表单中动态设置下面此代码中的键：值对。如果我手动添加key：value对，代码就可以工作，但是我并不总是知道用户创建的表单名称是什么。

请参阅下面代码中间部分的注释。我试图使用.serialize（）中的值作为$ _POST值传递。

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

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

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

$user_id = $_POST['ID'];

$ user_id中未设置ID为“10”，表示我用于传递序列化结果的语法或方法在下面不正确。

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;

    });

});

谢谢！

Answer 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可以正常工作。

希望这会有所帮助。

Answer 2

您想要的是动态地向javascript对象添加属性。如何做到这一点在网上，但也在这里展示：

Is it possible to add dynamically named properties to JavaScript object?

因此，在您的情况下，您需要先调整对象，然后再调用.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（保持简单，愚蠢）。

Answer 3

这是我能够根据@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）

感谢大家的投入！

Jquery - 从动态表单提交创建键值对

3 个答案: