CODEWITHSUNDEEP
javascriptphpmysql
AlguienEnEsteMundo
AlguienEnEsteMundo

Reputation: 123

Pass variables from javascript to php file to store them in mysql db after

Im trying to add a new functionality to my web application. I want the user to be able to select the dates and time they can actually work. For that I create a calendar where I can select the days and times they are available. In the calendar they can select different hours intervals. Until here everything is good. Now I need to add that information in the database. For that I understand that I have to pass the values to a .php file so I can save them in the database. The problem is how can I pass that values to the php file. After that how to add them in the database I guess its not going to be a problem. But how can I send that selected values to the php file so I can save that information?

Any help will be very appreciated. Thanks.

JS 

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;
  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');
  }
});
};

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<style>
body { font-family:'roboto'; background-color:#ECF0F1; }
</style>
</head>
<body>
<h1 style="margin:150px auto 30px auto;"></h1>
<div id="day-schedule"></div>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="../src/index.js"></script>
<script>
(function ($) {
  $("#day-schedule").dayScheduleSelector({
  });
  $("#day-schedule").on('selected.artsy.dayScheduleSelector', function (e, selected) {
    console.log(selected);
  })
})($);
</script>
</body>
</html>

changes made

As suggestion Im trying to use an Ajax function, and Im telling which parameters do I want to pass, and the file that is going to receive them. But nothing happenss...

Here are the changes. Thanks!

    this.$el.on('mouseover', '.time-slot', function () {
    var $slots, day, start, end, temp;
    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');
    }
    console.log(day);
    $.ajax({
     url:   "/Member/test.php",
     dataType:"json",
     type:  "POST",
    data:  {
     weekDay: 'day',
     start: 'start',
     end:   'end'
  }
})
});

Upvotes: 0

Views: 313

Answers (2)

Craig
Craig

Reputation: 444

Post to your php script using an AJAX call and then, in your php script, access the parameters via the $_POST array, ie:

Code to post to your php script (insert the code in your JS file):

$.ajax({
  url:   "/subdirectory/model.php",
  type:  "POST",
  data:  {
    day: "friday",
    start: "07:00:00",
    end:   "16:00:00"
  }
})
.done function(data)({
  console.log(data)
})
.fail function()({
  console.log("Parameters failed to be sent to php!")
})

Code to access the parameters passed from JS in /htdoc/subdirectory/model.php:

<?php
  var_dump($_POST);
?>

Executing your JS should result in the three sample parameters being displayed in your browser's log. For you db, instead of vardumping $_POST, you'll add code to the php script that writes the variables to your db.

Upvotes: 1

iliaz
iliaz

Reputation: 395

Either with Ajax or you can wrap your inputs with a <form action=your_php_file.php> and post/get them to the php script

Upvotes: 1

Related Questions