Dropdown menu to refresh the content without reloading the page?

I'm really new to php and javascript and I'm now doing the hardest part of my website.

I have this sidebar.php that contains a price list which is included in index.php.

                <tr>
                <td>Product 1</td>
                <td>30 USD</td>
                </tr>
                <tr>
                <td>Product 2</td>
                <td>50 USD</td>
                </tr>
	<tr>
                <td>Product 3</td>
                <td>25 USD</td>
                </tr>

I'm going to add a dropdown menu which will change the prices in different currencies like this.

	  <form method="get" action="sidebar.php"> 
      	  <select name="currency"> 
          <option value="0">Select Currency</option> 
          <option value="1">USD</option> 
          <option value="2">EURO</option>          
          <option value="3">GBP</option> 
          <option value="4">AUD</option> 
          </select> 
          <input type="submit" value="GO"/> 
  </form>

And I got this currency exchange code which works fine.

<?php
//error_reporting(0);
$path=pathinfo($_SERVER['PHP_SELF']);
$path=$_SERVER['DOCUMENT_ROOT'].$path['dirname'];
require_once("$path/currencyexchange_class.php");
$cx=new currencyExchange();
$cx->getData();
?>
<?php
if ($euro=$cx->Convert("USD","EUR",1)){
$euro=number_format($euro,4);
echo "€$euro Euros ";
}

But now I'm not sure how I will combine all these codes. All I want is a currency selection dropdown menu which will use php to calculate the prices in another currency and show them on the table without reloading the page. I think I will need some javascript in here if I don't want the page to reload.

I need to launch my website as soon as possible but it's taking too long for me to learn all the javascript and php.

I'd really appreciate if someone could show me some direction so I can focus studying on a particular subject.

Thank you.

Look into using prototype.js

then on your form button on the sidebar you'd put in: onclick="displayPrice("enter the form id here (id not name)"); return false"  return false is needed these days for IE which for some reason doesn't use the old rulings of whether an onclick was called, and it always recalls the page...

then in a javascript file (not the prototype.js) you would have something like:

function displayPrice(formID) {
var myRand = parseInt(Math.random()*99999999);
var srcs = "figureoutprice.php?ints="+myRand; // adding myRand here beats browser cache.  change the url to whatever, just remember to keep adding int(i use ints)="+myRand to it, of course int, ints, dongknocker, doesnt matter it does the same thing and the end user never actually sees it.
var pars = Form.serialize(formID); 

var myAjax = new Ajax.Request (
srcs,
{
method: "post",
parameters: pars,
onComplete: function(OriginalRequest) {
// originalRequest.responseTest  is used here....
document.getElementByID('price').innerHTML = originalRequest.responseText;
}
});
}

this shows there is an element ID with the name of price, so you would have the html code:

$<span id="price"></span>

wrapped around wherever on the page you want your price to be...  keep in mind that having more than one price results in only 1 getting changed..  each of them need to have their own name, and also need to be coded in the js file...

enjoy

Thank you very much.

I'm now looking in to prototype.js and it helps a lot.

I really appreciate it.