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.
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.