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

Jquery - Create key value pairs from dynamic form submission

本文关键字：创建 键值对 表单提交 动态 Jquery-      更新时间：2023-09-26

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

我需要弄清楚如何在下面的代码中从一个为表单输入提供动态值的表单中动态设置键：值对。如果我手动添加键：值对，代码就会工作，但我并不总是知道表单名称是什么，因为它们是由用户创建的。

请参阅下面代码中间部分的注释。我正在尝试使用.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;
    });
});

谢谢！

如果您想将数据发布为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可以工作。

希望这能有所帮助。

您想要的是向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（保持简单，愚蠢）。

以下是我根据@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）

感谢大家的投入！

相关文章：