AlguienEnEsteMundo AlguienEnEsteMundo - 1 year ago 239
Javascript Question

Insert data from Javascript to MySQL using PHP

I have a calendar with the days and times. And the user can select which days and times is he available. Im saving that information in the database. At the moment, if the user select for example Monday from 08:00 until 10:00 I save on the database one line per slot.


Information saved in the db

What I want to do, is to save only one line (the last line). Instead of all of them. So basically, I need to save the information from click to click. I don't really know how to achive that. This is the code so far:

function isSlotSelected($slot) { return $'[data-selected]'); }
function isSlotSelecting($slot) { return $'[data-selecting]'); }

* Get the selected time slots given a starting and a ending slot
* @private
* @returns {Array} An array of selected time slots
function getSelection(plugin, $a, $b) {
var $slots, small, large, temp;
if (!$a.hasClass('time-slot') || !$b.hasClass('time-slot') ||
($'day') != $'day'))) { return []; }
$slots = plugin.$el.find('.time-slot[data-day="' + $'day') + '"]');
small = $slots.index($a); large = $slots.index($b);
if (small > large) { temp = small; small = large; large = temp; }
return $slots.slice(small, large + 1);

DayScheduleSelector.prototype.attachEvents = function () {
var plugin = this
, options = this.options
, $slots;

this.$el.on('click', '.time-slot', function () {
var day = $(this).data('day');
if (!plugin.isSelecting()) { // if we are not in selecting mode
if (isSlotSelected($(this))) { plugin.deselect($(this)); }
else { // then start selecting
plugin.$selectingStart = $(this);
$(this).attr('data-selecting', 'selecting');
plugin.$el.find('.time-slot').attr('data-disabled', 'disabled');
plugin.$el.find('.time-slot[data-day="' + day + '"]').removeAttr('data-disabled');
} else { // if we are in selecting mode
if (day == plugin.$'day')) { // if clicking on the same day column
// then end of selection
plugin.$el.find('.time-slot[data-day="' + day + '"]').filter('[data-selecting]')
.attr('data-selected', 'selected').removeAttr('data-selecting');
plugin.$el.trigger('selected.artsy.dayScheduleSelector', [getSelection(plugin, plugin.$selectingStart, $(this))]);
plugin.$selectingStart = null;

this.$el.on('mouseover', '.time-slot', function () {
var $slots, day, start, end, temp, endAux;
if (plugin.isSelecting()) { // if we are in selecting mode
day = plugin.$'day');
$slots = plugin.$el.find('.time-slot[data-day="' + day + '"]');
start = $slots.index(plugin.$selectingStart);
end = $slots.index(this);
if (end < 0) return; // not hovering on the same column
if (start > end) { temp = start; start = end; end = temp; }
$slots.slice(start, end + 1).attr('data-selecting', 'selecting');

url: "/Member/test.php",
type: "POST",
data: {

}).success( function( weekDay, startTime, endTime) {
console.log( weekDay );
console.log( startTime );
console.log( endTime );
}).error( function( error ) {
console.log( "error:", error );

And this is the PHP where I save the information in the database:

include 'connection.php';
$raw_json = json_encode( $_POST );
if($raw_json != "[]"){
$sql = "INSERT INTO Users (day) VALUES ('$raw_json')";

if ($conn->query($sql) === TRUE) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;

Any help will be appreciated. Thanks.

Answer Source

You are making a request to your server on each mouseover of a .time-slot element (probably one of those rectangles in your calendar):

this.$el.on('mouseover', '.time-slot', function () {

So if you start at 0800 AM and drag to 10:00 AM the mouseover event is triggered each time the user hovers over a .time-slot element, resulting in multiple queries being executed. You probably want to use the mouseup event and check what the last .time-slot being hovered over is.

In psuedo-code that is something like this:

    lastSlot = element hovered over

    send request to server with lastSlot

Seeing as you are using DayScheduleSelector, the plugin fires an event after a selection is made:


Triggered when a selection is made. Passes the event and an array of selected time slots to the event handler.

$("#weekly-schedule").on('selected.artsy.dayScheduleSelector', function (e, selected) {
    /* selected is an array of time slots selected this time. */
    /* pop the last element of selected and execute your request */

If you only want the last selected entry, pop it off the selected array and send it a request. This isn't an exact implementation, but this should give you enough pointers to adapt it to your needs.

On a side note, your current query is susceptible for MySQL injection. Please read: How can I prevent SQL-injection in PHP?. Your code is also badly formatted and not clear, which doesn't really motivate people to help you in the first place; it takes more time to understand what your code does(n't), than to offer useful help.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download