current community

your communities

more stack exchange communities

Stack Exchange
tour help
careers 2.0
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 4 down vote favorite

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.

share|improve this question
    
Are you using jQuery ? do you need to convert your form to an array ? is that what you need ? –  Mehdi Karamosly Dec 12 '12 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 Dec 12 '12 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 Dec 12 '12 at 18:26
1  
$.each($('#yourform').serializeArray(), function() { console.log(" <" +this.name+ '>' + this.value + "</" + this.name + "> " ); }); –  Mehdi Karamosly Dec 12 '12 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 Dec 13 '12 at 15:05
show 2 more comments

1 Answer

up vote 1 down vote accepted

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.