Getting value from HTML and store in a TXT file with PHP

Question

I have a program where I pick a random word through JavaScript and this word changes every-time the page refreshes or someone visits it.

Broadly it looks something like this (the relevant bits of the index.php file):

<p> this is a <span class=“randomWord”></span> </p>

<script>:
let randomArray = [clarinet, chair, bubble, sofa, plant]
let randomNo = Math.floor(Math.random() * (randomArray.length -1) );
let randomW = document.querySelector(‘.randomWord’);

randomW.textContent =  randomArray[randomNo];

</script>

What I want to do is store this random word (from randomW.textContent). I want to either generate a .txt file and store it (if it is the first visit) or concatenate it to the existing .txt to whichever other words are there from previous visits.

So for example, after 5 visits the website would read "this is a clarinet" and the txt file would be : chair bubble bubble sofa clarinet

I have experience with HTML5, CSS and JS but PHP is still a huge unknown to me, so not sure exactly how to tackle it. Any help or guidance will be much appreciated! Thanks!

Answer 1

The easiest way is to create a <form> element and have the action attribute point to a PHP file in which you handle the server logic. In this case I've used the POST method. Inside the form put an <input> element that will receive the random word from JavaScript into its value property. This input will be the data that is sent to the server.

<form action="/save-random-word.php" method="POST">
  <input type="hidden" id="randomW" name="randomW" value="" />
  <button type="submit">Save random word</button>
</form>

In your JavaScript create your random word and set the value of the input element with the random word string. Now if you would submit the form, the random word will be sent.

let randomArray = ['clarinet', 'chair', 'bubble', 'sofa', 'plant']
let randomNo = Math.floor(Math.random() * (randomArray.length -1) );
let randomW = document.querySelector('#randomW');

randomW.value = randomArray[randomNo];

Now the server has a way of receiving data that is sent with either POST, GET or other methods. Since I've used POST we need to check if the global $_POST array contains a key that has the same name as the name attribute of our input. There you will find the data.

Then create a new file if a .txt file does not yet exist, or read the file and add the random word with a space in between to the content of the file and store the file again with the added content.

$randomW = isset( $_POST[ 'randomW' ] ) ? $_POST[ 'randomW' ] : '';
$file_name = './values.txt';

if ( ! is_file( $file_name ) ) {
  file_put_contents( $file_name, $randomW );
} else {
  $file_content = file_get_contents( $file_name );
  $file_content .= ' ' . $randomW;
  file_put_contents( $file_name, $file_contents );
}

die();

Answer 2

PHP part

<?php  
$fp = fopen('/path/to/words.txt', 'a'); //opens file in append mode  
fwrite($fp, $_POST['word']."\n");
fclose($fp);
?> 

On the Javascript side make a POST request to this PHP script sending the word variable.