Pass form value into global var

Question

Trying to pass a form value into a global var to be use in two functions but get this error document.PostReply is undefined or the javascript just crashes because getReplyId is undefined within the functions. No matter what I have tried I get one or the other errors

Can anyone see why the form value "ReplyID" is not being passed into the var.
The var is placed at the begining of the script before any functions.

form

<CFFORM NAME="PostReply" ID="PostReply" METHOD="POST">
<CFINPUT TYPE="hidden" NAME="ReplyID" ID="ReplyID" VALUE="#ReplyID#">
</CFFORM>

what I have tryed
1 - var getReplyId = document.PostReply.ReplyID;
2 - var getReplyId = document.PostReply.ReplyID.value;
3 - var getReplyId = document.getElementById("ReplyID");
4 - var getReplyId = document.PostReply.getElementById("ReplyID");
5 - var getReplyId = document.getElementById("PostReply.ReplyID").value;

If I just do this var getReplyId = 1 the script works great, but I need the ReplyID value.

Ok here is everything for the most part

<CFOUTPUT>
<STYLE>
targetPostReply#ReplyID#{visibility : visible}
targetPostReplyResponse#ReplyID#{visibility : visible}
</STYLE>
</CFOUTPUT>

<cfajaxproxy cfc="CFC/PostReply" jsclassname="PostReplyCFC">

<SCRIPT SRC="js/PostReply.js" TYPE="text/javascript"> var getReplyId = document.getElementById("ReplyID").value;
$(document).ready(
function () {
$("form#PostReply").submit(
function PostNewReply(ReplyID, ReplyComment){
var cfc = new PostReplyCFC();
cfc.setCallbackHandler(getNewReply)
cfc.setForm('PostReply')
cfc.PostNewReply('ReplyComment');
document.getElementById("targetPostReplyResponse"+getReplyId).style.display='block';
document.getElementById("targetMakeReply"+getReplyId);
$('#targetMakeReply'+getReplyId).slideToggle("slow");
$(this).toggleClass("targetMakeReply"+getReplyId);
return false;
}); // .submit()
});
function getNewReply(newReply)
{
$('#replyResponse'+getReplyId).html(newReply);
return false;
}
</SCRIPT>

<CFOUTPUT>
<DIV ID="targetMakeReply#ReplyID#">
<CFFORM NAME="PostReply" ID="PostReply" METHOD="POST">
<CFINPUT TYPE="hidden" NAME="ReplyID" ID="ReplyID" VALUE="#ReplyID#">
<textarea name="ReplyComment" rows="5" cols="95"></textarea>
<CFINPUT type="image" name="Submit" id="submitButton" value="Post Reply" src="images/PostReply.gif" onmouseover="src='images/PostReplyO.gif'" onmouseout="src='images/PostReply.gif'">
</CFFORM>
</DIV>
</CFOUTPUT>

<CFOUTPUT>
<STYLE>##targetPostReplyResponse#ReplyID#{display : none}</STYLE>
<DIV ID="targetPostReplyResponse#ReplyID#">
<TABLE ALIGN="center" VALIGN="top" WIDTH="750" BGCOLOR="FFFFFF" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD COLSPAN="2" CLASS="text12B"><IMG SRC="images/blank.gif" WIDTH="1" HEIGHT="5" ALT="" BORDER="0"><BR><SPAN ID="replyResponse#ReplyID#"></SPAN></TD>
</TR>
</TABLE>
</DIV>
</CFOUTPUT>

Answer 1

To make a variable global, just leave away the var.

getReplyId = document.getElementById("ReplyID").value;

note though that global variables are often sub-optimal practice. If possible, consider having one function call the other and pass the variable as a parameter.

Answer 2

Well i dont know why this works but i put getReplyId = document.getElementById("ReplyID").value; inside the PostNewReply function and it still works as a global var. From everything I know this shouldn't work but it does.

Answer 3

Wrapped all the JS inside a new function call "SubmitReply" and passed the ID to it with an onclick "SubmitReply" in the INPUT Submit button. The ID (ReplyID) was then passed to a var getReplyId = (Id). This made the getReplyId use able by all the JS shown above. Now the JS, cfajaxproxy, and CFC can use the ID making the form dynamic with their own ID.