How to get result from php to html use ajax?

Asked at 2017-01-11 21:42:21Z
  • 5 Subscribers
  • 114 Views
-1

Updated: It still not work after I add "#".

I am new to ajax. I am practicing to send value to php script ,and get result back.

Right now, I met one issue which I can not show my result in my html page. I tried serves answers online, but I still can not fix this issue.

My index.html take value from the form and send form information to getResult.php.

My getResult.php will do calculation and echo result. How do I display result into index.html?

Hers is html code

index.html

<html>
 <body>
    <form name="simIntCal" id="simIntCal" method="post"
        >
        <p id="Amount" >Amount(USD)</p>
        <input id="amount_value" type="text" name="amount_value">

        <p id="annual_rate" >Annual Rate of Interest
            (%)</p>
        <input id="rate_value" type="text" name="rate_value">

        <p id="time_years" >Time (years)</p>
        <input id="time_value" type="text" name="time">
         <input id="calculate" type="submit" value="Calculate">
    </form>
    <p id="amount_inteCal" >The Amount (Acount
        + Interest) is</p>
    <input id="result" type="text">
</body>
</html>

ajax script :

<script>
      $('#simIntCal').on('submit', function (e) {

            e.preventDefault();

            $.ajax({
                type: 'post',
                url: 'getResult.php',
                data: $('#simIntCal').serialize(),
                success: function (result) {
                    $("#result").text(result);// display result from getResult.php
                    alert('success');
                }
            });

        });
</script>

getResult.php

<?php
if ($_SERVER ["REQUEST_METHOD"] == "POST") {

//do  some calculation 
    $result=10;//set result to 10 for testing
    echo $result;
}
?>

3 answers in total

1
Chip Dean Posted at 2017-01-11 21:43:41Z

You are missing the '#' in front of your css selector for result.

$("result").text(result);// display result from cal.php

Should be

$("#result").text(result);// display result from cal.php

0
Dillon Burnett Posted at 2017-01-11 22:26:12Z

index.php

----php start---------     
    if(isset($_POST['name'])){
        echo 'Thank you, '.$_POST['name']; exit();
    }
----php end  ---------
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
<script>
function test(){
    var formDATA = {'name': $('#input_name').val()}
    $.ajax({
        type: 'POST',
        url: 'index.php',
        data: formDATA,
        success: function(response){
            $('#result').html();
        }
    });
 }
</script>
<input id="input_name" type="text" value="">
<button onclick="test();">Test Ajax</button>
<div id="result"></div>

Try something simple, this is a very basic version of ajax and php all in one page. Since the button triggers the function you don't even need a form (doesn't mean you shouldn't use one). But i left it simple so you could follow everything.

Sorry when i added php open and closing tags it didn't show up as code. Also don't forget to include your jquery resources.

0
Lucha Laura Hardie Posted at 2017-01-12 21:37:47Z

In your html file where you want the result to display, you probably want to be using a div.

Currently your code is using an input field:

<input id="result" type="text">

And what you probably want is something like this:

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

Unless you were intending to have the result show up in an input field inside your form, and in that case, the input field isn't actually inside your form code.

Answer this questsion