asked on

Binding data to a hidden field before form submission

I have a coldfusion application using a Javascript and a CFFORM that I am having a problem with. The CFFORM tag basically renders as a regular old HTML tag at runtime so don't let it scare you. It just allows some added flexibility to the form that I need.

The example below is a stripped down version of what I need, but am using it to test the JavaScript’s. I am using an online editor and I need to grab the contents of the editor and bind it to a form field. I have everything I need in terms of functions but I can't get it work. The exmaple is below. If I attach the JavaScript which is currently attached to the submit button to a href link, it populates the form field perfectly, so I know I know the JavaScript’s work. The issue is setting the value of the hidden field before the form gets submitted. Any suggestions? Its worth 500 points case I'm desperate.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title><cfoutput>#Request.PageTitle#</cfoutput></title>
<title>Submit An announcement</title>
<link href="../common/css/style.css" rel="stylesheet" type="text/css">
<script language="JavaScript">
function retrieveDocument(src){
document.addcontent.contentbody2.value = src;
}
</script>

</head>
<body>
<cfform action="#CurrentPage#" method="post" name="addcontent" preloader="no" id="addcontent">
<table width="100%" align="center" cellpadding="5">
<tr valign="baseline">
<td class="ContentBox-Form-Labels"> Date:</td>
<td width="460" valign="baseline"><cfinput type="text" name="ContentDate" message="wrong" required="yes" id="ContentDate" size="10" maxlength="10"> </td>
</tr>
<tr valign="baseline">
<td class="ContentBox-Form-Labels">Body:</td>
<td valign="baseline">
<cfset configpath="#application.homepath#common\XMLConfigs\Content.xml">
<cffile action="read" file="#configpath#" variable="xmlConfig">
<script src="../common/editlivejava/editlivejava.js"></script>
<cfoutput>
<script language="JavaScript">
var ELJApplet1_js;
ELJApplet1_js = new EditLiveJava("ContentBody", "700", "300");

ELJApplet1_js.setDownloadDirectory("../common/editlivejava");
ELJApplet1_js.setConfigurationText("#URLEncodedFormat(xmlConfig)#");
ELJApplet1_js.setBody(" ");
ELJApplet1_js.setLocalDeployment(false);
ELJApplet1_js.setAutoSubmit(false);
ELJApplet1_js.setDebugLevel("info");
ELJApplet1_js.setReturnBodyOnly("true");
ELJApplet1_js.setShowSystemRequirementsError(true);
ELJApplet1_js.show();
</script>
</cfoutput> </td>
</tr>
<tr valign="baseline">
<td class="ContentBox-Form-Labels"> </td>
<td valign="baseline">
       <input type="hidden" name="contentbody2" id="contentbody2">
              </td>
</tr>
<tr valign="baseline">
<td width="100" class="ContentBox-Form-Labels"> </td>
<td valign="baseline">
       <input type="hidden" name="MM_InsertRecord" value="AddContent">

       <input type="submit" name="Submit" value="Submit" onClick="ELJApplet1_js.GetBody('retrieveDocument',true);document.addcontent.submit()"></td>
</tr>
</table>
</cfform>
</body>
</html>

Roonaan

Best would be to add your javascript command which you succesfully tested in the a href link, to your form onsubmit action. Not sure how this is done in coldfusion though.

Can you just have something like below?

<cfform action="#CurrentPage#" method="post" name="addcontent" preloader="no" id="addcontent" onsubmit="..copy editor contents to hidden form field..">

-r-

SiriusPhil

ASKER

I actually did that. I created a function called getbody then called the function using the onsubmit of the form. I also changed the hidden field to a text field so that I could see what is happening. The text from the editor does get set in the text field, but the field show empty on the submission page. So it seems that the field is not getting set before the form submits.

<script language="JavaScript">
function retrieveDocument(src){
document.addcontent.contentbody2.value = src;
}
function getbody()
{
ELJApplet1_js.GetBody('retrieveDocument',true);
}
</script>

and

<cfform action="#CurrentPage#" method="post" name="addcontent" preloader="no" id="addcontent" onsubmit="getbody()">

T

ASKER CERTIFIED SOLUTION

Roonaan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SiriusPhil

ASKER

With the alert, the function runs fine. When I click out of the alert, the form submits as expected. Looks like I need to add some type of delay?

SiriusPhil

ASKER

Fixed it. The final function looks like this:

<script language="JavaScript">
function retrieveDocument(src){
document.addcontent.contentbody.value = src;
}
function getbody(form)
{
ELJApplet1_js.GetBody('retrieveDocument',true);
setTimeout('document.addcontent.submit();', 500);
return false;
}
</script>

SiriusPhil

ASKER

Thanks. Works like a charm thanks to you. Now have a seperate question on how to make the functions dynamic. Will post a another question for it though.

Phil Hayes