CODEWITHSUNDEEP
phpjqueryarrays
Aamer
Aamer

Reputation: 29

Posting a dynamic jquery array using hidden input element to a php script

I have a list box where users can Add, Delete and Update and Save the list. Once clicked on the Save button I am doing a call to the jquery to build the array of elements in the list box and then doing a POST using a hidden INPUT elememt. But I am getting an empty array the PHP POST. Here is the jquery

$("#saveCategory").click (function() {
    var items = $("#jqxlistbox").jqxListBox('getItems');
    var length = items.length; 
    var mylist = new Array();
    for (var i = 0; i < length; i++) {
        var row = {};
        row["cname"] = items[i].value;
        row["cvalue"] = items[i].label;
        mylist[i] = row;
    }
    $("#myCatgories").value(mylist);  
});

here is my html form

<form id="addcategory" method="post" action="index.php">
<div style="float: left">
    <input type="button" value="Add" id="addCategory" style="margin-left: 3px" />
        <input type="button" value="Update" id="updateCategory" style="margin-left: 3px" />
        <input type="button" value="Delete" id="deleteCategory" style="margin-left: 3px" />
        <br />                                            
        <input type="submit" value="Save" id="saveCategory" style="margin-left: 3px" />
    </div>
    <div>
    <input type="hidden" name="myCatgories[]" id="myCatgories" value="">
</div>

Can someone please tell me what I am doing wrong here and put in the right the direction.

Thanks

Upvotes: 0

Views: 9090

Answers (2)

bipen
bipen

Reputation: 36531

change your input type from submit to button and on its click event ... sumit the form by using submit()

try this

HTML

<input type="button" value="Save" id="saveCategory" style="margin-left: 3px" />

Jquery

$("#saveCategory").click (function() {
  var items = $("#jqxlistbox").jqxListBox('getItems');
  var length = items.length; 
  var mylist = new Array();
  for (var i = 0; i < length; i++) {
    var row = {};
    row["cname"] = items[i].value;
    row["cvalue"] = items[i].label;
    mylist[i] = row;
  }
  $("#myCatgories").val(mylist);
  $('#addcategory').submit(); //<-- submit you form here
});

Upvotes: 0

Moses
Moses

Reputation: 9173

Try the code below (there was an issue with your array initialization), and .value() is not a proper jQ method, it should be .val()

$("#saveCategory").click (function() {
    var items = $("#jqxlistbox").jqxListBox('getItems');
    var length = items.length; 
    var mylist = [];
    for (var i = 0; i < length; i++) {
        var row = [];
        row["cname"] = items[i].value;
        row["cvalue"] = items[i].label;
        mylist[i] = row;
    }
    $("#myCatgories").val(mylist);  
});

If this doesn't work, I suggest using console.log(mylist) and console.log(items) to make sure you are grabbing data and not empty fields.

Upvotes: 2

Related Questions