JavaScript to PHP form, based on user input

Question

I have a simple form on my homepage (index.php), that takes one user input.

<form action="/run.php" method="POST" target="_blank"
    <input type="text" name="userinput">
    <button type="submit">Run!</button>
</form>

That input is then passed to run.php where the content is displayed and inserted into a MySQL database.

However, I need to run JavaScript functions on that user input, and then input the results (from the JavaScript function) into the database (so passing the value from JavaScript to PHP).

I originally had the JavaScript in the run.php, which worked for calculating and displaying the value, but I was unable to pass the value to PHP to insert into the database.

From what I've read, you can't pass JavaScript values to PHP on the same page, as it requires some sort of POST or GET, so I'm attempting to run the JavaScript functions on the homepage index.php and then use a hidden input field to POST the value to the run.php file.

<input id='hidden_input' type='hidden' name='final-calc' value='random(userinput)' />

Where the function is a JavaScript Promise:

function random(userinput) {
    ....
    .then(function(userinput) { // Function needs to use the userinput from the form
         // calculations
         return X //(X being any random value)
    }
}

The two problems I'm running into is that:

1. I can only get the userinput value after the user enters a value and submits the form, so I don't believe I can pass that userinput value into the JavaScript function and still POST the returned value?

2. The JavaScript function is an asynchronous Promise, but apparently, this might not have an effect - so it may not be a problem.

Answer 1

The key here is AJAX. You have to retrieve the userinput using plain JS, make any calculations needed and then send the results to your PHP script. I left a fiddle: https://jsfiddle.net/k5xd54eu/1/

<input type="text" id="userinput" name="userinput"/>
<button onclick="inputhandler();">TEST</button>

<script>
function inputhandler() {
  var text = document.getElementById('userinput').value;
  alert(text);

  /*DRAGONS BE HERE*/
  /*THEN*/
  /*USE AJAX HERE TO PASS THE RESULTS TO PHP SCRIPT*/
}
</script>

I'm not explaining how to implement the AJAX call to send the results, mainly because it's a matter of taste too. For example you can use plain JS or a library such as jQuery (which is my personal preference, since it's very clean and easy). Take a look here:

http://api.jquery.com/jquery.ajax/

and here:

https://www.w3schools.com/jquery/jquery_ajax_intro.asp

for more information.

EDIT: Since I've mentioned AJAX, it would be more correct to include some code. So this is what I generally use for simple POSTs (it's based on the jQuery library so be careful to include it):

var url = 'ajaxhandler.php';
var stuff = '1234abcd';

$.ajax({
        type: "POST",
        url: url,
        data: {stuff: stuff},
        success: function (data) {
           /*Do things on successful POST*/
        }
        });