getting variable size form to javascript and PHP (AJAX)

Background - I have a webpage that contains a bunch of buttons (think POS system). I want the user to be able to edit the name of the button (used to put them in a particular order) and the text of the button which contains 2 parts which are the item and the cost. Presently I have it working by passing the data from a PHP page (where the edits are done) to another PHP page (where I write it back to the db) but I want to use more of a AJAX method and pass it to a js function to update a when the edit is saved. As the number of buttons can very I don't know the exact number of buttons to read into the script. Currently I have something like this...

echo "<td><input type='text' name='btn[]' size='5' value='" . $row['button'] . "'/></td>";
echo "<td><input type='text' name='itm[]' size='5' value='" . $row['item'] . "'/></td>";
echo "<td><input type='text' name='prc[]' size='5' value='" . $row['price'] . "'/></td>";

which is sent to a PHP page where I have...

$buttonArray = $_POST['btn'];
$itemArray = $_POST['itm'];
$priceArray = $_POST['prc'];

$numberofItems = count($itemArray);

for ($i=0; $i<$numberofItems; $i++)
{
$sql = "UPDATE concessions SET button = '".$buttonArray[$i]."', item = '".$itemArray[$i]."', price = '".$priceArray[$i]."'";
mysql_query($sql);
}

I want to do something similar in js looking at document.form.elements but can't figure out how to send as something (like and array) I can use a for loop to loop through. Any suggestion are welcome.

Answers:

Answer

There is a very easy way to do this: use this simple javascript function (make sure you have a recent jquery loaded)

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            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;
};

This function will serialize your form elements in the right order and will output a javascript object. You need to use it like this with ajax in order to parse your values:

var objects = $("#ID_OF_YOUR_FORM").serializeObject();

$.ajax({
   url: "your_ajax_file_location.php",
   type: "POST",
   data: ({
       objects:objects,
       otherdata:otherdata
     }),
   success: function(msg){
        /* do whatever here */
    }
 });

Ajax will do it's magic and transform that object in a php array automatically and post it to php... try this:

echo "<pre>".$_POST['objects']."</pre>";

The php array should look like:

{
    btn= array(
               "your btn1 info",
               "your btn2 info",
               "your btn3 info"
               );

    itm= array(
               "your itm1 info",
               "your itm2 info",
               "your itm3 info"
               );

    prc= array(
               "your prc1 info",
               "your prc2 info",
               "your prc3 info"
               );

}

From this type of array, it's pretty easy to manipulate in php in order to update your database

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.