Jquery - Create key value pairs from dynamic form submission

Question

I am pretty new to jquery and can't seem to figure this issue out.

I need to figure out how to dynamically set the key:value pairs in this code below from a form that has dynamic values for form inputs. The code works if I add the key:value pairs manually, but I don't always know what the form names are going to be as they are created by the user.

Please see the notes in the middle section of code below. I am trying to use the values from .serialize() to pass as the $_POST value.

Here is the value I currently get from the var formValues:

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

However when I try to pull the values in my function using:

$user_id = $_POST['ID'];

The ID of '10' is not being set in $user_id, indicating that the syntax or method I am using to pass the serialized results is not correct below.

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;

    });

}); 

Thanks!

Answer 1

If you want to post data as json, you can use a variation of $.fn.serialize(), Add the jquery extension,

$.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;
};

and use it as,

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();
});

If posting json is not your requirement $.fn.serializeArray can work.

hope this helps.

Answer 2

What you want is to dynamically add properties to a javascript object. How this can be done is all over the web, but also demonstrated here:

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

so in your case, you would set your object up first before calling .post:

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

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

One way you might accomplish the iteration above is to just collect values from all inputs between your <form> tags:

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

There are lots of ways to skin this cat. Also, jQuery has lots of plugins that might be of help here, although usually YAGNI (You Aren't Going To Need It), so just KISS (Keep It Simple, Stupid).

Answer 3

Here is the solution I was able to get working based on the code provided by @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;

});

}); 

This is actually a very simple implementation if you understand Jquery/Javascript! ;o)

Thank you to everyone for your input!