<html>
<head>
<meta name="Currency Converter" />
<title>Currency Converter</title>
</head>
<body>
<div class="converter">
<label for="from">Currency From: </label>
<select id="from"></select> <br />
<label for="to">Currency To: </label>
<select id="to"></select> <br />
<input type="text" id="amount" placeholder="enter amount" />
<input type="button" id="go" onclick="" value="Check Now" />
</div>
<div id="result"></div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var url = "http://openexchangerates.org/api/currencies.json";
$.getJSON(url, function(data){
var options = [];
$.each(data, function(key, val){
options.push("<option id='"+key+"' value='"+key+"'>"+val+"("+key+")</option>");
});
list = options.join('');
$("#from").append(list);
$("#to").append(list);
});
});
$("#go").click(function(){
var fromCurrency = $("#from option:selected").val();
var toCurrency = $("#to option:selected").val();
var amount = $("#amount").val().trim();
var request = $.ajax({
type: "POST",
url: "converter.php",
data: {from:fromCurrency, to:toCurrency, amt:amount},
dataType: "text"
});
request.done(function(msg){
$("#result").html("<h3>"+msg+"</h3>");
});
});
</script>
</body>
</html>
|