用php计算html文本字段的输入

Question

At the moment, I try to create a survey in a webpage. At the end of the survey, users are able to fill two text fields with values. With these values, my plan is to calculate an output, displayed for them at the same page. So:

Input: a

Input: b

Result: ab+b-ab (do not concentrate this please, its just an example)

My plan is that the user is able to fill the two input fields and by a buttonclick, a php function is calculating the result field (by my own algorithm depending on input - this is already working) and fills this field. Do i have to link to another webpage for this purpose? And how is it possible to grab the two input values and give it to my php function? And as last thing, how is it possible to start a php function either embedded in html or in an own file?

I tried your solution and some others as well (fetching inputA and inputB from the DOM with document.getElementById does not work. Below is my code

<form>
    InputA:<br>
    <input type="text" id="inputA"/></br>
    InputB:<br>
    <input type="text" id="inputB"/></br>
    Output:<br>
    <input type="text" id="output"/>
</form> 

<input name="go" type="button" value="Calculate" id="calculate" >

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js" ></script>
<script type="text/javascript">
$("#calculate").click(function(){
        $.get( "submit.php", { value1: $("#inputA").val(), value2: $("#inputB").val() } )
        .done(function( data ) {
        $("#output").val(data);
    });

});

</script>

submit.php:

<?php 
        $value1 = $_POST['value1'];
        $value2 = $_POST['value2'];

        $output = $value1 + $value2;
        echo($output);

    }
?>

When I check with firebug the error, i get a: no element found exception in both (html and php) files. Seems like the problem is, that with: value1: $("#inputA").val(); no value is givent to the server or it can not be handled there.

If i grab the value from the DOM, I can "bring" the value inside the .click function but there is still a "no element found exception" by calling the submit.php.

I have no idea what i am doing wrong, any suggestions? Do i need to install/bind anything in for using JQuery?

---

After some additional changes, it finally worked (one thing was the header line in the submit.php file):

<form>
    WorkerID:<br>
    <input type="text" id="workerId"/></br>
    CampaignId:<br>
    <input type="text" id="campaignId"/></br>
    Payment Code:<br>
    <input type="text" id="payCode"/>
</form> 

<input name="go" type="button" value="Calculate" id="calculate" >

<script type="text/javascript">
$("#calculate").click(function(){
    $.get( 'submit.php', { wId: $('#workerId').val(), cId: $('#campaignId').val()} )
    .done(function( data ) {
        $('#payCode').val(data.payCode);
    });     
});

and submit.php:

<?php 
    header('Content-Type: text/json');

    $workerId = $_GET['wId'];
    $campaignId = $_GET['cId'];

    $payCode = $campaignId . $workerId;

    $result = array("status" => "success",
                    "payCode" => $payCode);
    echo json_encode($result);
?>

Answer 1

To simplify, i am using jQuery, doing this in vanilla JS is a real pain in the a** in my opinion.

You can use .get(), which is the GET shorthand for .ajax().

With that code, you bind a handler on your submit button and make a AJAX request to your PHP and fill the result your PHP gives into your result field asynchronously.

$("#calculate").click(function(){

  $.get( "path/to/your_php.php", { value1: $("#inputA").val(), value2: $("#inputB").val() } )
  .done(function( data ) {
    $("#output").val(data);
  });

});

Also change your submit to something like this:

<input name="go" type="button" value="Calculate" id="calculate" >

Like that, your button won't submit a form and therefore synchronously load your PHP.

Since you seem new to JavaScript and you had this comment

my button, but here i got redirected to submit, no idea how i can go back to page before with filled textfield

in your question, i'll tell you, JavaScript works while the DOM (Document Object Model) is loaded, means you can access your elements when already loaded and alter them.

Getting the value of a input is as easy as that in jQuery:

$("#inputA").val();

With the AJAX you get what your php will return in data.

// the { value1: $("#inputA").val(), value2: $("#inputB").val() } object
// is what you send to your PHP and process it
$.get( "path/to/your_php.php", { value1: $("#inputA").val(), value2: $("#inputB").val() } )
.done(function( data ) {
     // data is what your php function returned
});

Using JS you can now change your elements as just said, effectively meaning to change the value of your output here:

$("#output").val(data);

"Working" Example: JSFiddle (There is no PHP to access to, so it will not do anything actively)