Calculate input of html text fields with php

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);
?>

You want to multiply 'ab' then add 'b' into it and then subtract 'ab' from it? — user5237857
– user5237857, Commented Jan 8, 2016 at 12:56
named forms only work if you're using jQuery. If you are using that, show it. Edit: both your form and input hold the same name; conflict. — Funk Forty Niner
– Funk Forty Niner, Commented Jan 8, 2016 at 13:04

Clemens Himmer · Accepted Answer · 2016-01-08 13:36:23Z

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)

edited Jan 8, 2016 at 13:36

answered Jan 8, 2016 at 13:14

Clemens Himmer

1,3422 gold badges13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MasterF Over a year ago

ahh yee i see, now i understand why using jquery/ajax let me try this and bugfix + read .get documentation of jquery

Clemens Himmer Over a year ago

Sweet, just added a way more detailed explanation, should clear up what this code exactly does!

Clemens Himmer Over a year ago

Your problem is probably that you mixed GET and POST, you have GET in your JS and POST in your PHP.

Collectives™ on Stack Overflow

Calculate input of html text fields with php

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related