Menu
I was wondering if someone could help please?
I have a piece of javascript code that dynamically creates form elements like so:
Page1
[CODE]
<script type=”text/javascript”>
function addFormField() {
var id = 1;
$(“#divCurrency”).append(“<div class=’myCurrency’><p id=’row” + id + “‘>
<label for=’currency” + id + “‘>Currency</label>
<select name=’currency’ id=’currency” + id + “‘ class=’select’ onChange=’getRate(this.value);’>
<option value=’0′>Please select</option>
<% rsCurrencies.Open SQL5, db
Dim x
If NOT rsCurrencies2.EOF Then
Do While NOT rsCurrencies.EOF
If rsCurrencies.Fields.Item(“CurrencyID”).Value = 21 Then
Else
Response.Write(“<option value='” & rsCurrencies.Fields.Item(“CurrencyID”).Value & “‘>” & rsCurrencies.Fields.Item(“CurrencyCountry”).Value & ” – ” & rsCurrencies.Fields.Item(“CurrencyName”).Value & “</option>”)
End If
rsCurrencies.MoveNext
Loop
Else
End If
%>
</select>
<label for=’amount’>Amount</label> <input type=’text’ size=’20’ name=’currency’ id=’amount” + id + “‘ class=’input’ onkeypress=’calCost(this.value);’ />
<label for=’rate’>Rate</label> <span id=’currencyRate’><input type=’text’ size=’20’ name=’currency’ id=’rate” + id + “‘ /></span>
<input type=’hidden’ size=’20’ name=’currency’ class=’cost’ class=’input’ />
<label for=’cost’>Cost</label> <input type=’text’ size=’20’ name=’currency’ id=’cost” + id + “‘ />
<input type=’hidden’ size=’20’ name=’currency’ id=’cost’ class=’input’ />
<a href=’#’ onClick=’removeFormField(“#row” + id + “”); return false;’>Remove</a></p></div>”);
$(‘#row’ + id).highlightFade({
speed:1000
});
id = (id – 1) + 2;
document.getElementById(“id”).value = id;
}
function removeFormField(id) {
$(id).remove();
}
</script>
<div id=”divCurrency”></div>
<p><a href=”#” onClick=”addFormField(); return false;”>Add</a></p>
Within the same page I have some Javascript that gets a ‘CurrencyID’ when the user makes a selection from the dropdown menu.
What happens is that the currencyID is passed to the function getRate() and sent along to an asp page mycurrency-GetCurrencyRate.asp. Within the asp page the currencyID is used to get the latest rate for that currency in the database.
Page 1
[CODE]
<script type=”text/javascript”>
var xmlHttp6
function getRate(Currency){
xmlHttp6=GetXmlHttpObject6();
if (xmlHttp6==null){
alert (“Your browser does not support AJAX!”);
return;
}
var params = ‘Currency=’ + Currency + ‘&SubmitCurrencyAjax=”activated”‘
var url=”/includes/mycurrency-GetCurrencyRate.asp”;
xmlHttp6.onreadystatechange=stateChanged6;
xmlHttp6.open(“POST”,url,true);
xmlHttp6.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
xmlHttp6.setRequestHeader(“Content-length”, params.length);
xmlHttp6.setRequestHeader(“Connection”, “close”);
xmlHttp6.send(params);
return false;
}
function stateChanged6(){
if (xmlHttp6.readyState == 4) {
document.getElementById(“currencyRate”).innerHTML=xmlHttp6.responseText;
}
}
function GetXmlHttpObject6()
{ var xmlHttp6=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp6=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp6=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
xmlHttp6=new ActiveXObject(“Microsoft.XMLHTTP”);
}
}
return xmlHttp6;
}
</script>
Then when the function stateChanged6 is triggered, the currency rate is inserted into a span element with the id CurrencyRate like so
[CODE]
document.getElementById(“currencyRate”).innerHTML=xmlHttp6.responseText;
The problem is, I am finding it hard to manage these as the user can add many form elements to select a currency as many times as they like. When they select a currencyID from say the second of two select boxes, the rate is inserted into the first span#CurrencyRate and not the last one.
I need to make sure that each rate is inserted into it’s respective span, and not the one before it. I know I should use classes, but this is just a test case for now.
Does anyone have any ideas?
Thanks in advance for your help! It’s much appreciated!