CODEWITHSUNDEEP
javascriptphp
EataSandwhich
EataSandwhich

Reputation: 17

Saving User Input to PHP to then Use in Javascript Function

Looking for a solution to an issue that I am having. My PHP file is able to store a date and time from a user's input. However, once the date is stored, it is no longer accessible to be used in my Javascript function.

I am just lost on how data is processed step by step. How would I extract stored data in my database to use in my Javascript function?

UPDATE: ADDED CODE

PHP: Simply stores input, and shows it was stored

    <?php
// ONLY Process Form if $_POST is NOT Empty
if ( ! empty( $_POST ) ) {

  // Connect to MySQL
  $mysqli = new mysqli( 'hn', 'un', 'pw', 'db' );

  // Check Our Connection
  if ( $mysqli->connect_error ) {
    die( 'Connect Error: ' . $mysqli->connect_errno . ': ' . $mysqli->connect_error );
  }

  // Insert Our Data
  $sql = "INSERT INTO table ( mydate ) VALUES ( '{$mysqli->real_escape_string($_POST['myDate'])}' )";
  $insert = $mysqli->query($sql);

  // Print Response from MySQL
  if ( $insert ) {
    echo "Success! Row ID: {$mysqli->insert_id}";
  } else {
    die("Error: {$mysqli->errno} : {$mysqli->error}");
  }

  // Close Connection
  $mysqli->close();
}
?>

HTML: Just a form

  <html>
  <head>
    <meta charset="utf-8">
    <title>User Form</title>
  </head>
  <script type="text/javascript" src="/displaytimer.js"></script>
  <body>
    <!-- HTML Form -->
    <form class="" action="/index.php" method="post">
      <input type="datetime-local" name="myDate" id="myDate"><br /><br />
      <button id="submit" onclick="clickButton()" value="submit">Submit</button><br /><br />
      <div id="showDate"></div>
    </form>
   </body>
  </html>

JAVASCRIPT: Generates a timer based on users inputed date. Also accessible on iPhone (found help here on SO for that). I am sure that there is a simpler way to do this, but I am mainly looking for how to still use the date inputed within var n.

// get the iso time string formatted for usage in an input['type="datetime-local"']
var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
var localISOTime = (new Date(Date.now() - tzoffset)).toISOString().slice(0,-1);
var localISOTimeWithoutSeconds = localISOTime.slice(0,16);

// select the "datetime-local" input to set the default value on
var dtlInput = document.querySelector('input[type="datetime-local"]');

// set it and forget it ;)
dtlInput.value = localISOTime.slice(0,16);

function clickButton() {
  var x = setInterval(function() {
    // Get Date Selected & Convert to ISO
    var n = document.getElementById("myDate").value;
    var d = new Date(n);
    var dISO = d.toISOString();

    // Get Today's Date
    var today = new Date();
    var tS = today.toDateString();
    var tISO = today.toISOString();

    // Calculate Time Left
    var dParse = Date.parse(dISO);
    var tParse = Date.parse(tISO);
    var distance = dParse - tParse;
    // days
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    if (days > 0) {
      days = Math.floor(distance / (1000 * 60 * 60 * 24));
    } else {
      days = 0;
    }
    // hours
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    if (hours > 0) {
      hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    } else {
      hours = 0;
    }
    // minutes
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    if (minutes > 0) {
      minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    } else {
      minutes = 0;
    }
    // seconds
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    if (seconds > 0) {
      seconds = Math.floor((distance % (1000 * 60)) / 1000);
    } else {
      seconds = 0;
    }

    // Print Distance or Expired Message
    if (days > 0 || hours > 0 || days > 0 || seconds > 0) {
      document.getElementById("showDate").innerHTML = days + " days " + hours + " hours " + minutes + " minutes " + seconds + " seconds ";
    } else {
      document.getElementById("showDate").innerHTML = "The time has expired";
    }
  }, 1000);
}

Upvotes: 0

Views: 735

Answers (2)

Sarah
Sarah

Reputation: 2003

By using AJAX to submit the form (i.e store the date on the server), the page won't reload and so your javaScript code will be executed.
Here is a break down of how it can work:

  1. The clickButton() JavaScript function gets the values from the input fields of the form.
  2. It then performs the ajax request sending the data to a PHP file i.e store_data.php (this will contain the php code which was originally at the top of your page).
  3. The server processes whats in the PHP file. i.e inserts the date to the database
  4. The PHP file echos back whatever data you like to the client (in your case you have success or error).
  5. A callback is performed on the client side where the data (that was echoed) can be retrieved from the server and javaScript code can be executed. Note: The page hasn't reloaded so the myDate input field is still populated.

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>User Form</title>
<script type="text/javascript" src="/displaytimer.js"></script>
</head>
<body>
  <!-- HTML Form -->
  <form class="" action="" method="post">
    <input type="datetime-local" name="myDate" id="myDate"><br /><br />
      <button id="submit" onclick="clickButton()" type="button">Submit</button><br /><br />
      <div id="showDate"></div>
  </form>
</body>
</html>

displaytimer.js

 window.onload = function(){
      // get the iso time string formatted for usage in an input['type="datetime-local"']
      var tzoffset = (new Date()).getTimezoneOffset() * 60000; //offset in milliseconds
      var localISOTime = (new Date(Date.now() - tzoffset)).toISOString().slice(0,-1);
      var localISOTimeWithoutSeconds = localISOTime.slice(0,16);

      // select the "datetime-local" input to set the default value on
      var dtlInput = document.querySelector('input[type="datetime-local"]');

      // set it and forget it ;)
      dtlInput.value = localISOTime.slice(0,16);
    }


    function createXHR(){
      //This function sets up the XMLHttpRequest
      try{
        return new XMLHttpRequest();
      }catch(e){
        //to support older browsers
        try{
          return new ActiveXObject("Microsoft.XMLHTTP");
         }catch(e){
           return new ActiveXObject("Msxml2.XMLHTTP");
         }
      }
    }

    function clickButton(){
      //The form has been submitted.
      //Get the value of the myDate field from the form
      var myDate = document.getElementById('myDate').value;
      //set up the ajax request
      xmlhttp = createXHR();
      xmlhttp.onreadystatechange = ajaxCallback; //name of our callback function here
      //Ive called the php file store_data.php but you can call it whatever you like.
      xmlhttp.open("POST", "store_data.php" ,true);
      xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      //send our variables with the request
      xmlhttp.send("myDate=" + myDate);
    }

    function ajaxCallback(){
      //this function will be executed once the ajax request is completed
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
        //The ajax request was successful.
        //we can now get the response text using xmlhttp.responseText. This will be whatever was echoed in the php file
        var data = xmlhttp.responseText; 
        //In your case "data" will either be "Success! Row ID: ..." OR "Error: ....." so you can do checks here.
        //For demonstration I will just continue with the rest of your code.

        var x = setInterval(function() {
          // Get Date Selected & Convert to ISO
          var n = document.getElementById("myDate").value;
          var d = new Date(n);
          var dISO = d.toISOString();

          // Get Today's Date
          var today = new Date();
          var tS = today.toDateString();
          var tISO = today.toISOString();

          // Calculate Time Left
          var dParse = Date.parse(dISO);
          var tParse = Date.parse(tISO);
          var distance = dParse - tParse;
          // days
          var days = Math.floor(distance / (1000 * 60 * 60 * 24));
          if (days > 0) {
            days = Math.floor(distance / (1000 * 60 * 60 * 24));
          } else {
            days = 0;
          }
          // hours
          var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          if (hours > 0) {
            hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          } else {
            hours = 0;
          }
          // minutes
          var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
          if (minutes > 0) {
            minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
          } else {
            minutes = 0;
          }
          // seconds
          var seconds = Math.floor((distance % (1000 * 60)) / 1000);
          if (seconds > 0) {
            seconds = Math.floor((distance % (1000 * 60)) / 1000);
          } else {
            seconds = 0;
          }

          // Print Distance or Expired Message
          if (days > 0 || hours > 0 || days > 0 || seconds > 0) {
            document.getElementById("showDate").innerHTML = days + " days " + hours + " hours " + minutes + " minutes " + seconds + " seconds ";
          } else {
            document.getElementById("showDate").innerHTML = "The time has expired";
          }
        }, 1000);   

      }
    }

store_data.php

<?php
// ONLY Process Form if $_POST is NOT Empty
if ( ! empty( $_POST ) ) {

  // Connect to MySQL
  $mysqli = new mysqli( 'hn', 'un', 'pw', 'db' );

  // Check Our Connection
  if ( $mysqli->connect_error ) {
    die( 'Connect Error: ' . $mysqli->connect_errno . ': ' . $mysqli->connect_error );
  }

  // Insert Our Data
  $sql = "INSERT INTO table ( mydate ) VALUES ( '{$mysqli->real_escape_string($_POST['myDate'])}' )";
  $insert = $mysqli->query($sql);

  // Print Response from MySQL
  if ( $insert ) {
    echo "Success! Row ID: {$mysqli->insert_id}";
  } else {
    die("Error: {$mysqli->errno} : {$mysqli->error}");
  }

  // Close Connection
  $mysqli->close();
}
?>

UPDATE:

If you want to send multiple variables back from the PHP file you can create an associative array and use json_encode as follows:

store_data.php:

$responseData = array(); //create a PHP array
$responseData['status'] = "success"; 
$responseData['myDateSubmitted'] = $_POST['myDate']; //store the date that was submitted into a variable to send back
echo json_encode($responseData); //echo the response data back to the client

displaytimer.js

function ajaxCallback(){
  //this function will be executed once the ajax request is completed
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
    //The ajax request was successful.
    //we can now get the response text using xmlhttp.responseText. 
    //parse the response text as JSON because we used json_encode in our PHP file.
    var jsonData = JSON.parse(xmlhttp.responseText);
    console.log(jsonData.myDateSubmitted); //check one of our variables
    //Rest of your code here
  }

}

Upvotes: 3

Stefano Coletta
Stefano Coletta

Reputation: 730

You should avoid submitting data with a POST, this way the page will not reload, so you don't need spitting back anything.

Use AJAX to send myDate to the backend to make it persistent on the DB.

Simply speaking, you should convert your PHP code in a basic backend REST service; avoid sticking PHP code with the HTML page and process posted data, this is a very old way of doing things.

Use PHP for the backend and JS for the frontend.

Upvotes: 0

Related Questions