getting variable size form to javascript and PHP (AJAX)

Question

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.

Are you using jQuery ? do you need to convert your form to an array ? is that what you need ? — Mehdi Karamosly
– Mehdi Karamosly, Commented Dec 12, 2012 at 18:03
if you are using javascript (not jQuery) you can iterate through the form using a loop: for(i = 0; i<document.forms.tabs1.elements.length ; i++){ document.forms.tabs1.elements[i].name = newNames[i] ; // tabs1 is the name of your form // document.forms.tabs1.elements[i].property // property can be name, value , id ... } — Mehdi Karamosly
– Mehdi Karamosly, Commented Dec 12, 2012 at 18:22
not using jQuery on this page but it is not beyond the scope. I'm new to AJAX, jQuery, JSON, etc and am trying not to take off a too big a bite into new things. Would it be easy using jQuery and if so what would it look like? — Jason Templeman
– Jason Templeman, Commented Dec 12, 2012 at 18:26
$.each($('#yourform').serializeArray(), function() { console.log(" <" +this.name+ '>' + this.value + "</" + this.name + "> " ); }); — Mehdi Karamosly
– Mehdi Karamosly, Commented Dec 12, 2012 at 20:08
@Mehdi - Looks good and I can see the values in my js. <btn[]>button01</btn[]> <itm[]>iitem1</itm[]> <prc[]>price</prc[]> <btn[]>button02</btn[]> <itm[]>item2</itm[]> — Jason Templeman
– Jason Templeman, Commented Dec 13, 2012 at 15:05

ParadoxWs · Accepted Answer · 2012-12-31 16:25:26Z

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

Collectives™ on Stack Overflow

getting variable size form to javascript and PHP (AJAX)

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related