How to return a value into webpage

Question

Hello:

I have a simple webpage that displays the credit balance for calling cards. So far without any problems, with HTML, PHP and mysql, I was able to retrieve the balance from a data base. But I have to display the result in ANOTHER PAGE, wich looks akward because the page must reload.

Can I just load this value into a pre-drawed field under the input fields that collect the data from the customer? Such as :

Account Number: 134556 PIN: * |send|

Balance is: $12.36

Thanks in advanced

Answer 1

Eventhough I agree to annakata's point I'd recomend you this. An ajax basics tutorial.

Answer 2

You could use Ajax as pointed out by KB22.

Ajax is a technique using which you can fetch content from your server using javascript and handle the request/response etc. without having to reload your page. It can happen in the background and a little code can be used to take the content fetched remotely and display it in the location(on the existing page) that you want.

Here is a simple Ajax Tutorial http://www.codecoffee.com/articles/ajax.html

Answer 3

I also think that AJAX will the best option. I would suggest you to use jQuery javascript library. It provides a nice wrapper for many functions. I usually use jQuery/AJAX/POST at http://docs.jquery.com/Ajax/jQuery.post#urldatacallbacktype +jQuery is cross-browser compliant & popular.

Answer 4

<form action="your_action" method="POST" id="balance_checker_form">
    <input type="text" name="account_id" id="account_id" />
    <input type="submit" value="Check Balance" />
</form>
<script type="text/javascript">
    $(function(){
     $('#balance_checker_form').submit(function(){
      $.ajax({
       url : $(this).attr('href'),
       success : function(html){
        // Inject the response into the balance_response div.  Might want to do some highlighting or something to let the
        // user know that the field was updated
        $('#balance_response').html(html);
       }
      });

      return false;
     });
    });
</script>
<div id="balance_response"></div>

Try that. Should help you get started in the correct direction. You will need to include the jQuery library. http://jquery.com/