Using hidden inputs to POST JavaScript function result

there are multiple approaches to do this,

i'm gonna use jquery here instead of pure javascript to simplify it

[without submission] you may check the event change

$('#userinput').change(function (e) {
    // make some calculation
    // then update the input value
});

[with form submission] you will disable the submission using the object preventDefault inside the submit event

$('#userinput').submit(function (e) {
    e.preventDefault();
    // make some calculation
    // then update the input value

    // your ajax goes here OR resubmission of your form
    // to resubmit the form
    $(this).submit();
});

What you will find useful in this scenario is event.preventDefault();

function calcResult(e) {
    // Prevent the default action of the form
    e.preventDefault();

    var userinput = document.getElementById('userinput').value;
    var result    = userinput + 10;

    // Do whatever else you need to do

    // Submit the form with javascript
    document.getElementById("myForm").submit();
}

I believe this is what you are looking for. A way of having the information computed over PHP, without a page request. This uses a form and then serializes the data, then transmits it to PHP and displays the result from run.php.

Note: I did change your id to a name in the HTML so the code would serialize properly. I can change this per request.

index.php

$rand = rand(10,100);

?>

<form action="javascript:void(0);" id="targetForm">
    <input type="hidden" name="idg" value="<?php echo $rand ?>">
    <input type="text" value="12" name="userinput" id="userinput">
    <button onclick="ready()">Go!</button>
</form>

<div id="result"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
function ready() {
    $.post('run.php', $('#targetForm').serialize(), function (data) {
        $("#result").html(data);
    })
}
</script>

run.php

<?php

echo floatval($_POST['userinput']) * floatval($_POST['idg']);

?>

Nowhere in your question is there any indicator that your task requires AJAX. You're just trying to change an input value right when you submit. AJAX is not needed for that.

First, attach an onsubmit event handler to your form instead of using an onclick attribute on your button. Notice, we are not stopping the form from submitting with return false as we still want the form to submit.

For convenience, let's add an ID to your form and let's add a hidden input field to store the calculated value.

(Side-remark: you don't need to use document.getElementById(ID) if the ID is a string with no dashes i.e. document.getElementById('userinput') can be shortened to just userinput )

<form action="/run.php" method="POST" target="_blank" id="theform">
    <input type="hidden" id="idg" value="<?php echo $rand ?>">
    <input type="text" name="userinput" id="userinput">
    <input type="hidden" name="hiddeninput" id="hiddeninput">
    <button type="submit">Go!</button>
</form>

<script>
// this will be called right when you submit
theform.onsubmit = function calcResult() {
    // it should update the value of your hidden field before moving to the next page
    hiddeninput.value = parseInt(userinput.value, 10) + 10;
    return true;
}
</script>

One way is by onSubmit

  <form action="/run.php" method="POST" onSubmit="return calcResult()">
    <input type="hidden" id="idg" value="<?php echo $rand ?>"> // gets random url, can be ignored
    <input type="text" name="userinput" id="userinput">
    <button type="submit" onclick="calcResult();">Go!    </button>
 </form>

And when you return true then only form will submit.

<script>
  function calcResult() {
    var userinput = document.getElementById('userinput').value;
    var result = userinput + 10; // want to POST result in a hidden input field w/ form
   return true;
  }
</script>