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

}

edited Nov 24 '18 at 23:48

asked Nov 24 '18 at 23:38

EataSandwhich

125

3

Um, once the form submits you JavaScript function vanishes into the aether. You can spit it back out in the php response, or you can use AJAX instead of submitting.

– Jared Smith
Nov 25 '18 at 0:09

@JaredSmith, if I were to use AJAX instead of submitting, does that mean that the date would not be stored in my database table, or would the function run without submitting, or am I missing the point? I have been trying to find a way to perform the former with my understanding being that the data is submitted through the form > stored on the server > spit back out through a variable > echoed in the JS function. Am I sounding offbase on my understanding of either solution?

– EataSandwhich
Nov 25 '18 at 0:19

If you look at your form, the action is "/date_php/index.php" that means that once you submit the form you navigate to this url (which is the same url you are on) and because the $POST variable is populated the php code at the top of the page gets executed (because you have: if ( ! empty( $_POST ) ). However the javaScript clickedButton doesn't proceed because the page has been reloaded. By using AJAX to submit the form, the page won't reload and so the javaScript code will be executed and you can also store the data on the server. :) If you give me some time I will show you some code. :)

– Sarah
Nov 25 '18 at 0:27

Hi @Sarah! I would very much appreciate anything that you could provide (: thank you!

– EataSandwhich
Nov 25 '18 at 1:22

@EataSandwhich No probs. I just posted some code. I tested it and it works for me. But I was just thinking you might need to "echo" back the date that was submitted instead of using document.getElementById("myDate").value; in the setInterval function as the user may have changed this input field in the meantime. But I know how you can echo back multiple variables from the PHP file in the ajax request so just let me know. :)

– Sarah
Nov 25 '18 at 1:52

|
show 2 more comments

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>

// 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);

}

edited Nov 24 '18 at 23:48

asked Nov 24 '18 at 23:38

EataSandwhich

125

3

Um, once the form submits you JavaScript function vanishes into the aether. You can spit it back out in the php response, or you can use AJAX instead of submitting.

– Jared Smith
Nov 25 '18 at 0:09

@JaredSmith, if I were to use AJAX instead of submitting, does that mean that the date would not be stored in my database table, or would the function run without submitting, or am I missing the point? I have been trying to find a way to perform the former with my understanding being that the data is submitted through the form > stored on the server > spit back out through a variable > echoed in the JS function. Am I sounding offbase on my understanding of either solution?

– EataSandwhich
Nov 25 '18 at 0:19

If you look at your form, the action is "/date_php/index.php" that means that once you submit the form you navigate to this url (which is the same url you are on) and because the $POST variable is populated the php code at the top of the page gets executed (because you have: if ( ! empty( $_POST ) ). However the javaScript clickedButton doesn't proceed because the page has been reloaded. By using AJAX to submit the form, the page won't reload and so the javaScript code will be executed and you can also store the data on the server. :) If you give me some time I will show you some code. :)

– Sarah
Nov 25 '18 at 0:27

Hi @Sarah! I would very much appreciate anything that you could provide (: thank you!

– EataSandwhich
Nov 25 '18 at 1:22

@EataSandwhich No probs. I just posted some code. I tested it and it works for me. But I was just thinking you might need to "echo" back the date that was submitted instead of using document.getElementById("myDate").value; in the setInterval function as the user may have changed this input field in the meantime. But I know how you can echo back multiple variables from the PHP file in the ajax request so just let me know. :)

– Sarah
Nov 25 '18 at 1:52

|
show 2 more comments

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>

// 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);

}

edited Nov 24 '18 at 23:48

asked Nov 24 '18 at 23:38

EataSandwhich

125

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>

// 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);

}

javascript php

edited Nov 24 '18 at 23:48

asked Nov 24 '18 at 23:38

EataSandwhich

125

edited Nov 24 '18 at 23:48

asked Nov 24 '18 at 23:38

EataSandwhich

125

edited Nov 24 '18 at 23:48

asked Nov 24 '18 at 23:38

EataSandwhich

125

asked Nov 24 '18 at 23:38

EataSandwhich

125

asked Nov 24 '18 at 23:38

EataSandwhich

125

3

Um, once the form submits you JavaScript function vanishes into the aether. You can spit it back out in the php response, or you can use AJAX instead of submitting.

– Jared Smith
Nov 25 '18 at 0:09

@JaredSmith, if I were to use AJAX instead of submitting, does that mean that the date would not be stored in my database table, or would the function run without submitting, or am I missing the point? I have been trying to find a way to perform the former with my understanding being that the data is submitted through the form > stored on the server > spit back out through a variable > echoed in the JS function. Am I sounding offbase on my understanding of either solution?

– EataSandwhich
Nov 25 '18 at 0:19

If you look at your form, the action is "/date_php/index.php" that means that once you submit the form you navigate to this url (which is the same url you are on) and because the $POST variable is populated the php code at the top of the page gets executed (because you have: if ( ! empty( $_POST ) ). However the javaScript clickedButton doesn't proceed because the page has been reloaded. By using AJAX to submit the form, the page won't reload and so the javaScript code will be executed and you can also store the data on the server. :) If you give me some time I will show you some code. :)

– Sarah
Nov 25 '18 at 0:27

Hi @Sarah! I would very much appreciate anything that you could provide (: thank you!

– EataSandwhich
Nov 25 '18 at 1:22

@EataSandwhich No probs. I just posted some code. I tested it and it works for me. But I was just thinking you might need to "echo" back the date that was submitted instead of using document.getElementById("myDate").value; in the setInterval function as the user may have changed this input field in the meantime. But I know how you can echo back multiple variables from the PHP file in the ajax request so just let me know. :)

– Sarah
Nov 25 '18 at 1:52

|
show 2 more comments

3

Um, once the form submits you JavaScript function vanishes into the aether. You can spit it back out in the php response, or you can use AJAX instead of submitting.

– Jared Smith
Nov 25 '18 at 0:09

@JaredSmith, if I were to use AJAX instead of submitting, does that mean that the date would not be stored in my database table, or would the function run without submitting, or am I missing the point? I have been trying to find a way to perform the former with my understanding being that the data is submitted through the form > stored on the server > spit back out through a variable > echoed in the JS function. Am I sounding offbase on my understanding of either solution?

– EataSandwhich
Nov 25 '18 at 0:19

If you look at your form, the action is "/date_php/index.php" that means that once you submit the form you navigate to this url (which is the same url you are on) and because the $POST variable is populated the php code at the top of the page gets executed (because you have: if ( ! empty( $_POST ) ). However the javaScript clickedButton doesn't proceed because the page has been reloaded. By using AJAX to submit the form, the page won't reload and so the javaScript code will be executed and you can also store the data on the server. :) If you give me some time I will show you some code. :)

– Sarah
Nov 25 '18 at 0:27

Hi @Sarah! I would very much appreciate anything that you could provide (: thank you!

– EataSandwhich
Nov 25 '18 at 1:22

@EataSandwhich No probs. I just posted some code. I tested it and it works for me. But I was just thinking you might need to "echo" back the date that was submitted instead of using document.getElementById("myDate").value; in the setInterval function as the user may have changed this input field in the meantime. But I know how you can echo back multiple variables from the PHP file in the ajax request so just let me know. :)

– Sarah
Nov 25 '18 at 1:52

Um, once the form submits you JavaScript function vanishes into the aether. You can spit it back out in the php response, or you can use AJAX instead of submitting.

– Jared Smith
Nov 25 '18 at 0:09

@JaredSmith, if I were to use AJAX instead of submitting, does that mean that the date would not be stored in my database table, or would the function run without submitting, or am I missing the point? I have been trying to find a way to perform the former with my understanding being that the data is submitted through the form > stored on the server > spit back out through a variable > echoed in the JS function. Am I sounding offbase on my understanding of either solution?

– EataSandwhich
Nov 25 '18 at 0:19

If you look at your form, the action is "/date_php/index.php" that means that once you submit the form you navigate to this url (which is the same url you are on) and because the $POST variable is populated the php code at the top of the page gets executed (because you have: if ( ! empty( $_POST ) ). However the javaScript clickedButton doesn't proceed because the page has been reloaded. By using AJAX to submit the form, the page won't reload and so the javaScript code will be executed and you can also store the data on the server. :) If you give me some time I will show you some code. :)

– Sarah
Nov 25 '18 at 0:27

Hi @Sarah! I would very much appreciate anything that you could provide (: thank you!

– EataSandwhich
Nov 25 '18 at 1:22

@EataSandwhich No probs. I just posted some code. I tested it and it works for me. But I was just thinking you might need to "echo" back the date that was submitted instead of using document.getElementById("myDate").value; in the setInterval function as the user may have changed this input field in the meantime. But I know how you can echo back multiple variables from the PHP file in the ajax request so just let me know. :)

– Sarah
Nov 25 '18 at 1:52

|
show 2 more comments

2 Answers
2

active

oldest

votes

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:

The clickButton() JavaScript function gets the values from the
input fields of the form.

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

The server processes whats in the PHP file. i.e inserts the date to the database

The PHP file echos back whatever data you like to the client (in your case you have success or error).

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

  }

}

edited Nov 25 '18 at 14:55

answered Nov 25 '18 at 1:22

Sarah

1,127922

Wow! I don't even know what to say.... thank you so much for helping me understand! I am so thankful! In your follow-up comment you mentioned that I should echo that data within the variable. What is the benefit for that?

– EataSandwhich
Nov 25 '18 at 1:58

1

@EataSandwhich No probs. Glad to help :) I mean you should echo back the myDate that was submitted because when the setInterval function is processed you retrieve the date from the input field (var n = document.getElementById("myDate").value;) however the user may change this date while the setInterval is running and so the output in showDate wont be the desired output.

– Sarah
Nov 25 '18 at 2:30

How would I do so if you don't mind? I understand it may be a bit trickier to accomplish since it is a date and needs to stay the same format as it is currently being calculated.

– EataSandwhich
Nov 25 '18 at 2:42

@EataSandwhich I don't mind at all however I will get back to you tomorrow as its 3.00 a.m here lol :D Glad to have helped :)

– Sarah
Nov 25 '18 at 2:58

1

@EataSandwhich I just added an update to my answer. :) Also I advise you to clear the interval you set as it will keep going unless you clear it which will cause problems. To do this, your setInterval variable x should be global. Then you can use clearInterval(x); It might be a good idea to do this everytime the form is submitted (e.g insert clearInterval(x); at the top of the clickButton() method) Hope that helps

– Sarah
Nov 25 '18 at 13:10

add a comment |

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.

answered Nov 25 '18 at 0:29

Stefano Coletta

47937

1. What does the HTTP method have to do with anything? 2. What's wrong with using PHP and submitting forms? Not every site needs to be an SPA... as for old, old means 'proven'. Lots of sites (e.g. facebook, wayfair, etc) are still heavily PHP.

– Jared Smith
Nov 25 '18 at 1:15

This is very helpful as well. I will definitely be doing more research into this!

– EataSandwhich
Nov 25 '18 at 1:59

@JaredSmith nothing against PHP, but today, the way (even for Facebook) is to split backend with any language and spit out JSON to the frontend, that is made in pure JS, no reloading. In few words REST and WebSocket communication. If you have only to make a simple web page there's nothing wrong using PHP mixed with JS. But IMHO, every time I start with a simple page, after a while people ask for changes, and that simple page will get complex. With the "modern" way, you implement changes smoothly and rapidly, with the old way the risk for a spaghetti code result is always behind the corner.

– Stefano Coletta
Nov 25 '18 at 2:29

1

I have a lot of things against PHP, but at the same time I can't help but think building an SPA even in 2018 requires one to reinvent the wheel, badly. You need a third party router and a ton of boilerplate to get deep linking which you otherwise would get for free. State management is more complicated. Tooling is way more complicated. I mean, don't get me wrong I still build SPAs, but I wouldn't frame it as a one-sided tradeoff the way you seem to be doing.

– Jared Smith
Nov 25 '18 at 2:46

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53463363%2fsaving-user-input-to-php-to-then-use-in-javascript-function%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

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:

The clickButton() JavaScript function gets the values from the
input fields of the form.

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

The server processes whats in the PHP file. i.e inserts the date to the database

The PHP file echos back whatever data you like to the client (in your case you have success or error).

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

  }

}

edited Nov 25 '18 at 14:55

answered Nov 25 '18 at 1:22

Sarah

1,127922

Wow! I don't even know what to say.... thank you so much for helping me understand! I am so thankful! In your follow-up comment you mentioned that I should echo that data within the variable. What is the benefit for that?

– EataSandwhich
Nov 25 '18 at 1:58

1

@EataSandwhich No probs. Glad to help :) I mean you should echo back the myDate that was submitted because when the setInterval function is processed you retrieve the date from the input field (var n = document.getElementById("myDate").value;) however the user may change this date while the setInterval is running and so the output in showDate wont be the desired output.

– Sarah
Nov 25 '18 at 2:30

How would I do so if you don't mind? I understand it may be a bit trickier to accomplish since it is a date and needs to stay the same format as it is currently being calculated.

– EataSandwhich
Nov 25 '18 at 2:42

@EataSandwhich I don't mind at all however I will get back to you tomorrow as its 3.00 a.m here lol :D Glad to have helped :)

– Sarah
Nov 25 '18 at 2:58

1

@EataSandwhich I just added an update to my answer. :) Also I advise you to clear the interval you set as it will keep going unless you clear it which will cause problems. To do this, your setInterval variable x should be global. Then you can use clearInterval(x); It might be a good idea to do this everytime the form is submitted (e.g insert clearInterval(x); at the top of the clickButton() method) Hope that helps

– Sarah
Nov 25 '18 at 13:10

add a comment |

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:

The clickButton() JavaScript function gets the values from the
input fields of the form.

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

The server processes whats in the PHP file. i.e inserts the date to the database

The PHP file echos back whatever data you like to the client (in your case you have success or error).

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

  }

}

edited Nov 25 '18 at 14:55

answered Nov 25 '18 at 1:22

Sarah

1,127922

Wow! I don't even know what to say.... thank you so much for helping me understand! I am so thankful! In your follow-up comment you mentioned that I should echo that data within the variable. What is the benefit for that?

– EataSandwhich
Nov 25 '18 at 1:58

1

@EataSandwhich No probs. Glad to help :) I mean you should echo back the myDate that was submitted because when the setInterval function is processed you retrieve the date from the input field (var n = document.getElementById("myDate").value;) however the user may change this date while the setInterval is running and so the output in showDate wont be the desired output.

– Sarah
Nov 25 '18 at 2:30

How would I do so if you don't mind? I understand it may be a bit trickier to accomplish since it is a date and needs to stay the same format as it is currently being calculated.

– EataSandwhich
Nov 25 '18 at 2:42

@EataSandwhich I don't mind at all however I will get back to you tomorrow as its 3.00 a.m here lol :D Glad to have helped :)

– Sarah
Nov 25 '18 at 2:58

1

@EataSandwhich I just added an update to my answer. :) Also I advise you to clear the interval you set as it will keep going unless you clear it which will cause problems. To do this, your setInterval variable x should be global. Then you can use clearInterval(x); It might be a good idea to do this everytime the form is submitted (e.g insert clearInterval(x); at the top of the clickButton() method) Hope that helps

– Sarah
Nov 25 '18 at 13:10

add a comment |

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:

The clickButton() JavaScript function gets the values from the
input fields of the form.

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

The server processes whats in the PHP file. i.e inserts the date to the database

The PHP file echos back whatever data you like to the client (in your case you have success or error).

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

  }

}

edited Nov 25 '18 at 14:55

answered Nov 25 '18 at 1:22

Sarah

1,127922

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:

The clickButton() JavaScript function gets the values from the
input fields of the form.

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

The server processes whats in the PHP file. i.e inserts the date to the database

The PHP file echos back whatever data you like to the client (in your case you have success or error).

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

  }

}

edited Nov 25 '18 at 14:55

answered Nov 25 '18 at 1:22

Sarah

1,127922

edited Nov 25 '18 at 14:55

answered Nov 25 '18 at 1:22

Sarah

1,127922

answered Nov 25 '18 at 1:22

Sarah

1,127922

answered Nov 25 '18 at 1:22

Sarah

1,127922

Wow! I don't even know what to say.... thank you so much for helping me understand! I am so thankful! In your follow-up comment you mentioned that I should echo that data within the variable. What is the benefit for that?

– EataSandwhich
Nov 25 '18 at 1:58

1

@EataSandwhich No probs. Glad to help :) I mean you should echo back the myDate that was submitted because when the setInterval function is processed you retrieve the date from the input field (var n = document.getElementById("myDate").value;) however the user may change this date while the setInterval is running and so the output in showDate wont be the desired output.

– Sarah
Nov 25 '18 at 2:30

How would I do so if you don't mind? I understand it may be a bit trickier to accomplish since it is a date and needs to stay the same format as it is currently being calculated.

– EataSandwhich
Nov 25 '18 at 2:42

@EataSandwhich I don't mind at all however I will get back to you tomorrow as its 3.00 a.m here lol :D Glad to have helped :)

– Sarah
Nov 25 '18 at 2:58

1

@EataSandwhich I just added an update to my answer. :) Also I advise you to clear the interval you set as it will keep going unless you clear it which will cause problems. To do this, your setInterval variable x should be global. Then you can use clearInterval(x); It might be a good idea to do this everytime the form is submitted (e.g insert clearInterval(x); at the top of the clickButton() method) Hope that helps

– Sarah
Nov 25 '18 at 13:10

add a comment |

Wow! I don't even know what to say.... thank you so much for helping me understand! I am so thankful! In your follow-up comment you mentioned that I should echo that data within the variable. What is the benefit for that?

– EataSandwhich
Nov 25 '18 at 1:58

1

@EataSandwhich No probs. Glad to help :) I mean you should echo back the myDate that was submitted because when the setInterval function is processed you retrieve the date from the input field (var n = document.getElementById("myDate").value;) however the user may change this date while the setInterval is running and so the output in showDate wont be the desired output.

– Sarah
Nov 25 '18 at 2:30

How would I do so if you don't mind? I understand it may be a bit trickier to accomplish since it is a date and needs to stay the same format as it is currently being calculated.

– EataSandwhich
Nov 25 '18 at 2:42

@EataSandwhich I don't mind at all however I will get back to you tomorrow as its 3.00 a.m here lol :D Glad to have helped :)

– Sarah
Nov 25 '18 at 2:58

1

@EataSandwhich I just added an update to my answer. :) Also I advise you to clear the interval you set as it will keep going unless you clear it which will cause problems. To do this, your setInterval variable x should be global. Then you can use clearInterval(x); It might be a good idea to do this everytime the form is submitted (e.g insert clearInterval(x); at the top of the clickButton() method) Hope that helps

– Sarah
Nov 25 '18 at 13:10

Wow! I don't even know what to say.... thank you so much for helping me understand! I am so thankful! In your follow-up comment you mentioned that I should echo that data within the variable. What is the benefit for that?

– EataSandwhich
Nov 25 '18 at 1:58

@EataSandwhich No probs. Glad to help :) I mean you should echo back the myDate that was submitted because when the setInterval function is processed you retrieve the date from the input field (var n = document.getElementById("myDate").value;) however the user may change this date while the setInterval is running and so the output in showDate wont be the desired output.

– Sarah
Nov 25 '18 at 2:30

How would I do so if you don't mind? I understand it may be a bit trickier to accomplish since it is a date and needs to stay the same format as it is currently being calculated.

– EataSandwhich
Nov 25 '18 at 2:42

@EataSandwhich I don't mind at all however I will get back to you tomorrow as its 3.00 a.m here lol :D Glad to have helped :)

– Sarah
Nov 25 '18 at 2:58

@EataSandwhich I just added an update to my answer. :) Also I advise you to clear the interval you set as it will keep going unless you clear it which will cause problems. To do this, your setInterval variable x should be global. Then you can use clearInterval(x); It might be a good idea to do this everytime the form is submitted (e.g insert clearInterval(x); at the top of the clickButton() method) Hope that helps

– Sarah
Nov 25 '18 at 13:10

add a comment |

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.

answered Nov 25 '18 at 0:29

Stefano Coletta

47937

1. What does the HTTP method have to do with anything? 2. What's wrong with using PHP and submitting forms? Not every site needs to be an SPA... as for old, old means 'proven'. Lots of sites (e.g. facebook, wayfair, etc) are still heavily PHP.

– Jared Smith
Nov 25 '18 at 1:15

This is very helpful as well. I will definitely be doing more research into this!

– EataSandwhich
Nov 25 '18 at 1:59

@JaredSmith nothing against PHP, but today, the way (even for Facebook) is to split backend with any language and spit out JSON to the frontend, that is made in pure JS, no reloading. In few words REST and WebSocket communication. If you have only to make a simple web page there's nothing wrong using PHP mixed with JS. But IMHO, every time I start with a simple page, after a while people ask for changes, and that simple page will get complex. With the "modern" way, you implement changes smoothly and rapidly, with the old way the risk for a spaghetti code result is always behind the corner.

– Stefano Coletta
Nov 25 '18 at 2:29

1

I have a lot of things against PHP, but at the same time I can't help but think building an SPA even in 2018 requires one to reinvent the wheel, badly. You need a third party router and a ton of boilerplate to get deep linking which you otherwise would get for free. State management is more complicated. Tooling is way more complicated. I mean, don't get me wrong I still build SPAs, but I wouldn't frame it as a one-sided tradeoff the way you seem to be doing.

– Jared Smith
Nov 25 '18 at 2:46

add a comment |

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.

answered Nov 25 '18 at 0:29

Stefano Coletta

47937

1. What does the HTTP method have to do with anything? 2. What's wrong with using PHP and submitting forms? Not every site needs to be an SPA... as for old, old means 'proven'. Lots of sites (e.g. facebook, wayfair, etc) are still heavily PHP.

– Jared Smith
Nov 25 '18 at 1:15

This is very helpful as well. I will definitely be doing more research into this!

– EataSandwhich
Nov 25 '18 at 1:59

@JaredSmith nothing against PHP, but today, the way (even for Facebook) is to split backend with any language and spit out JSON to the frontend, that is made in pure JS, no reloading. In few words REST and WebSocket communication. If you have only to make a simple web page there's nothing wrong using PHP mixed with JS. But IMHO, every time I start with a simple page, after a while people ask for changes, and that simple page will get complex. With the "modern" way, you implement changes smoothly and rapidly, with the old way the risk for a spaghetti code result is always behind the corner.

– Stefano Coletta
Nov 25 '18 at 2:29

1

I have a lot of things against PHP, but at the same time I can't help but think building an SPA even in 2018 requires one to reinvent the wheel, badly. You need a third party router and a ton of boilerplate to get deep linking which you otherwise would get for free. State management is more complicated. Tooling is way more complicated. I mean, don't get me wrong I still build SPAs, but I wouldn't frame it as a one-sided tradeoff the way you seem to be doing.

– Jared Smith
Nov 25 '18 at 2:46

add a comment |

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.

answered Nov 25 '18 at 0:29

Stefano Coletta

47937

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.

answered Nov 25 '18 at 0:29

Stefano Coletta

47937

answered Nov 25 '18 at 0:29

Stefano Coletta

47937

answered Nov 25 '18 at 0:29

Stefano Coletta

47937

answered Nov 25 '18 at 0:29

Stefano Coletta

47937

1. What does the HTTP method have to do with anything? 2. What's wrong with using PHP and submitting forms? Not every site needs to be an SPA... as for old, old means 'proven'. Lots of sites (e.g. facebook, wayfair, etc) are still heavily PHP.

– Jared Smith
Nov 25 '18 at 1:15

This is very helpful as well. I will definitely be doing more research into this!

– EataSandwhich
Nov 25 '18 at 1:59

@JaredSmith nothing against PHP, but today, the way (even for Facebook) is to split backend with any language and spit out JSON to the frontend, that is made in pure JS, no reloading. In few words REST and WebSocket communication. If you have only to make a simple web page there's nothing wrong using PHP mixed with JS. But IMHO, every time I start with a simple page, after a while people ask for changes, and that simple page will get complex. With the "modern" way, you implement changes smoothly and rapidly, with the old way the risk for a spaghetti code result is always behind the corner.

– Stefano Coletta
Nov 25 '18 at 2:29

1

I have a lot of things against PHP, but at the same time I can't help but think building an SPA even in 2018 requires one to reinvent the wheel, badly. You need a third party router and a ton of boilerplate to get deep linking which you otherwise would get for free. State management is more complicated. Tooling is way more complicated. I mean, don't get me wrong I still build SPAs, but I wouldn't frame it as a one-sided tradeoff the way you seem to be doing.

– Jared Smith
Nov 25 '18 at 2:46

add a comment |

1. What does the HTTP method have to do with anything? 2. What's wrong with using PHP and submitting forms? Not every site needs to be an SPA... as for old, old means 'proven'. Lots of sites (e.g. facebook, wayfair, etc) are still heavily PHP.

– Jared Smith
Nov 25 '18 at 1:15

This is very helpful as well. I will definitely be doing more research into this!

– EataSandwhich
Nov 25 '18 at 1:59

@JaredSmith nothing against PHP, but today, the way (even for Facebook) is to split backend with any language and spit out JSON to the frontend, that is made in pure JS, no reloading. In few words REST and WebSocket communication. If you have only to make a simple web page there's nothing wrong using PHP mixed with JS. But IMHO, every time I start with a simple page, after a while people ask for changes, and that simple page will get complex. With the "modern" way, you implement changes smoothly and rapidly, with the old way the risk for a spaghetti code result is always behind the corner.

– Stefano Coletta
Nov 25 '18 at 2:29

1

I have a lot of things against PHP, but at the same time I can't help but think building an SPA even in 2018 requires one to reinvent the wheel, badly. You need a third party router and a ton of boilerplate to get deep linking which you otherwise would get for free. State management is more complicated. Tooling is way more complicated. I mean, don't get me wrong I still build SPAs, but I wouldn't frame it as a one-sided tradeoff the way you seem to be doing.

– Jared Smith
Nov 25 '18 at 2:46

1. What does the HTTP method have to do with anything? 2. What's wrong with using PHP and submitting forms? Not every site needs to be an SPA... as for old, old means 'proven'. Lots of sites (e.g. facebook, wayfair, etc) are still heavily PHP.

– Jared Smith
Nov 25 '18 at 1:15

This is very helpful as well. I will definitely be doing more research into this!

– EataSandwhich
Nov 25 '18 at 1:59

@JaredSmith nothing against PHP, but today, the way (even for Facebook) is to split backend with any language and spit out JSON to the frontend, that is made in pure JS, no reloading. In few words REST and WebSocket communication. If you have only to make a simple web page there's nothing wrong using PHP mixed with JS. But IMHO, every time I start with a simple page, after a while people ask for changes, and that simple page will get complex. With the "modern" way, you implement changes smoothly and rapidly, with the old way the risk for a spaghetti code result is always behind the corner.

– Stefano Coletta
Nov 25 '18 at 2:29

I have a lot of things against PHP, but at the same time I can't help but think building an SPA even in 2018 requires one to reinvent the wheel, badly. You need a third party router and a ton of boilerplate to get deep linking which you otherwise would get for free. State management is more complicated. Tooling is way more complicated. I mean, don't get me wrong I still build SPAs, but I wouldn't frame it as a one-sided tradeoff the way you seem to be doing.

– Jared Smith
Nov 25 '18 at 2:46

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Saving User Input to PHP to then Use in Javascript Function

2 Answers 2

index.html

displaytimer.js

store_data.php

UPDATE:

store_data.php:

displaytimer.js

Your Answer

Sign up or log in

Post as a guest

Post as a guest

2 Answers 2

2 Answers 2

index.html

displaytimer.js

store_data.php

UPDATE:

store_data.php:

displaytimer.js

index.html

displaytimer.js

store_data.php

UPDATE:

store_data.php:

displaytimer.js

index.html

displaytimer.js

store_data.php

UPDATE:

store_data.php:

displaytimer.js

index.html

displaytimer.js

store_data.php

UPDATE:

store_data.php:

displaytimer.js

Sign up or log in

Post as a guest

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Sign up or log in

Post as a guest

Popular posts from this blog

404 Error Contact Form 7 ajax form submitting

How to know if a Active Directory user can login interactively

Refactoring coordinates for Minecraft Pi buildings written in Python

2 Answers
2

2 Answers
2

2 Answers
2