Insert data from Javascript to MySQL using PHP

Question

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.

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 $slot.is('[data-selected]'); }
 function isSlotSelecting($slot) { return $slot.is('[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') ||
       ($a.data('day') != $b.data('day'))) { return []; }
   $slots = plugin.$el.find('.time-slot[data-day="' + $a.data('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.$selectingStart.data('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.find('.time-slot').removeAttr('data-disabled');
      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.$selectingStart.data('day');
    $slots = plugin.$el.find('.time-slot[data-day="' + day + '"]');
    $slots.filter('[data-selecting]').removeAttr('data-selecting');
    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');
  }

$.ajax({
  url:   "/Member/test.php",
  dataType:"json",
  type:  "POST",
  data:  {
    day,
    start,
    end
    } 

}).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:

<?php
include 'connection.php';
session_start();
$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 1

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:

mouseover:
    lastSlot = element hovered over

mouseup:
    send request to server with lastSlot

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

selected.artsy.dayScheduleSelector

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.