Stillnet Studios

The CFWindow tag can be useful to prompt for information on a form. We use this sometimes after a user has clicked the submit button. We do some client side validation in JavaScript, and if certain conditions are met, we use CFWindow to prompt for some additional information.

Its a little tricky though. If you try to use a CFWindow tag inside a CFForm tag you will get a ColdFusion error. If you use it inside a regular form tag you won’t get an error, but it won’t work like you expect. Lets take this code for example:

<form action="somefile.cfm">
	Name: <input name="name">
	
	<cfwindow name="win">
		Age:<input name="age"><br />
		<br />
		<input type="submit">
	</cfwindow>
	
	<br /><br />
	<input type="button" Value="Continue" onclick="ColdFusion.Window.show('win')">
</form>

In this example we have a simple form that prompts for a name. When the user clicks the submit button, we use cfwindow to open a popup window and prompt for age. There is a submit button in the popup window so the user can submit the form from there.

But when you run this code and click on the submit button in the popup window, nothing happens. Thats because ColdFusion places the CFWindow code near the end of the file. It won’t be inside your FORM tags. Changing the submit button to a button with an onclick event that submits the form won’t help either. It will cause the form to be submitted, but only the name field will be passed in. Age won’t be passed because that form element wasn’t inside the form tags.

The way around this is to use JavaScript to copy the data from the form fields to hidden fields that are inside the form. Lets change the code to this:

<form action="somefile.cfm" id="theForm">
	Name: <input name="name">
	<input type="hidden" name="age" id="hidden_age">
	<cfwindow name="win">
		Age:<input name="age" id="age"><br />
		<br />
		<input type="button" onclick="doSubmit()">
	</cfwindow>
	
	<br /><br />
	<input type="button" Value="Continue" onclick="ColdFusion.Window.show('win')">
</form>

Here I’ve added a hidden field for the age, and given IDs to both age fields and the form tag so I can reference them easily. I’ve also changed the submit button to a regular button, and gave it an onclick handler of doSubmit. Here is the code for doSubmit():

<script language="JavaScript">
function doSubmit() {
  var hiddenAge = document.getElementById("hidden_age");
  var age = document.getElementById("age");
  hiddenAge.value = age.value;
  document.getElementById("theForm").submit();
}
</script>

Now when the user clicks the button from the popup window, the values from that window are copied to the hidden form elements that exist in the form, and they will be passed to the server.

I use jQuery, which makes this even easier. I don’t have to setup a bunch of hidden fields in the form, I just create them in the doSubmit() function. You just need to have one element inside the form already that you can reference, so you can add an element after it. In this example I know the name element is there so I am adding the new form elements after that.

<script language="JavaScript">
function doSubmit() {
  $('#name').append('<input type="hidden" id="hidden_age" name="age">');
  $('#hidden_age').val( $('#age').val() );

  document.getElementById("theForm").submit();
}
</script>