Jquery - 從動態表單提交中創建關鍵值對

Question

我對jquery很新，似乎無法解決這個問題。

我需要弄清楚如何在下面的代碼中從具有表單輸入動態值的表單中動態設置鍵值對。如果我手動添加鍵值對，代碼將起作用，但我並不總是知道表單名稱是由用戶創建的。

請參閱下面代碼中間部分的註釋。我試圖使用.serialize（）的值作爲$ _POST值傳遞。

這是我目前從VAR formValues獲得的價值：

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

然而，當我試圖拉我的函數值使用：

$user_id = $_POST['ID']; 

「10」的ID是沒有在$ user_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; 

    }); 

}); 

謝謝！

Answer 1

你想要的是動態地添加一個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（Keep It Simple，Stupid）。

Answer 2

如果你想要發佈的數據爲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 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）

謝謝大家的意見！