CODEWITHSUNDEEP
javascriptphpjqueryhtmlforms
Pebble
Pebble

Reputation: 47

Using hidden inputs to POST JavaScript function result

I have a single form input on my homepage userinput. The homepage also contains a JavaScript function that uses that userinput value to calculate a result.

<form action="/run.php" method="POST" target="_blank">
    <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>

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

I'm trying to find a way in which a user can enter their input, submit the form, the JavaScript takes that userinput and calculates a result, then that result is POST'ed along with the userinput in the form.

The problem I can forsee with this method is that:

My attempted solution(s):

I was wondering whether it's possible to use a button (type="button"), instead of a submit (type="submit") for the form. Then just use that button to call the JS function, then (somehow) submit the form (with the JS function result) after the JS function has completed? (either with plain JS or jQuery).

Upvotes: 0

Views: 2091

Answers (5)

Niklesh Raut
Niklesh Raut

Reputation: 34914

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>

Upvotes: 0

Mikey
Mikey

Reputation: 6766

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>

Upvotes: 0

hassan
hassan

Reputation: 8288

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

Upvotes: 1

Neil
Neil

Reputation: 14313

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

?>

Upvotes: 0

Spholt
Spholt

Reputation: 4012

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

Upvotes: 0

Related Questions