I WANT WHOMEVER KEEPS DELETING MY REPLIES TO KINDLY STOP DOING SO! I am trying to help someone, here.
Sorry for the delay. I ran into some issues coming up with this example. I have two files; formrequiredexample.cfc and formrequiredexample.cfm. First, the .cfm page:
<cfsilent>
<cfparam name="form.userName" default="" />
<cfparam name="form.favcolFULL" default="" />
<cfparam name="form.visitFULL" default="" />
<cfparam name="form.age" default="" />
<cfparam name="form.height" default="" />
</cfsilent><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Required Form Field Example</title>
<style>
#thisTable{width: 500px;}
.leftTD{width: 200px; text-align: right; vertical-align: top;}
.rightTD{width: 300px; text-align: left; vertical-align: top;}
input[type='text'], select{ width: 95%; }
</style>
</head>
<body>
<cfoutput>
<form id="thisForm" name="thisForm">
<table id="thisTable">
<tr>
<td class="leftTD">Name: *</td>
<td class="rightTD"><input type="text" id="userName" name="userName" value="#form.userName#" class="include" /></td>
</tr>
<tr>
<td class="leftTD">Favourite Colour:<br />(not required)</td>
<td class="rightTD">
<input type="checkbox" id="favcol1" name="favcol" value="Blue"<cfif ListContains(form.favcolFULL,"Blue")> checked</cfif> /> Blue<br />
<input type="checkbox" id="favcol2" name="favcol" value="Red"<cfif ListContains(form.favcolFULL,"Red")> checked</cfif> /> Red<br />
<input type="checkbox" id="favcol3" name="favcol" value="Green"<cfif ListContains(form.favcolFULL,"Green")> checked</cfif> /> Green<br />
<input type="checkbox" id="favcol4" name="favcol" value="Black"<cfif ListContains(form.favcolFULL,"Black")> checked</cfif> /> Black<br />
<input type="hidden" id="favcolFULL" name="favcolFULL" class="include" value="#form.favcolFULL#" />
</td>
</tr>
<tr>
<td class="leftTD">I'd like to visit: *</td>
<td class="rightTD">
<select id="visit" name="visit" multiple size="5" class="multi">
<option value="" disabled>Select at least one</option>
<option value="Canada">Canada</option>
<option value="USA">USA</option>
<option value="Japan">Japan</option>
<option value="Scotland">Scotland</option>
</select><input type="hidden" id="visitFULL" name="visitFULL" class="include" value="#form.visitFULL#" />
</td>
</tr>
<tr>
<td class="leftTD">Age: (not required)</td>
<td class="rightTD"><input type="text" id="age" name="age" class="include" value="#form.age#" /></td>
</tr>
<tr>
<td class="leftTD">Height: (not required)</td>
<td class="rightTD"><input type="text" id="height" name="height" class="include" value="#form.height#" /></td>
</tr>
<tr>
<td class="leftTD"></td>
<td class="rightTD"><button type="button" id="submitBtn" name="submitBtn">Submit</button></td>
</tr>
</table>
<div id="rslts"></div>
</form>
</cfoutput>
<script src="js/jq/jquery-1.11.2.min.js"></script>
<script>var vlu1, vlu2;
$('[name="visit"]').on('click',function(){
$thisName = $(this).attr('name'), $thisTarget = $('#'+$thisName+'FULL').attr('name');
vlu1 = $('[id="'+$thisName+'"]').val().join(',');
$('[id="'+$thisTarget+'"').val(vlu1);
});
$('[name="favcol"]').on('change',function(){
$thisName = $(this).attr('name'), $thisTarget = $('#'+$thisName+'FULL').attr('name');
vlu2 = $('[name="favcol"]:checked').map(function(){return this.value;}).get();
$('[id="'+$thisTarget+'"').val(vlu2);
});
$('#submitBtn').click(function(){
var data = $('#thisForm').serializeArray();
data = JSON.stringify(data);// Converts data to a JSON object then stringifies it.
$.ajax({
type: "POST",
contentType: "application/json",
url: "formrequiredexample.cfc?method=formTest",
data: data
}).done(function(rtn){$('#rslts').html(rtn);});
});
</script>
</body>
</html>
So this uses JavaScript to populate the hidden fields of the checkboxes and the select. If you want to see this in action, you can change the type="hidden" to type="text" and see the fields being populated as you click on checkboxes or choose from the select. The button uses AJaX to serialize the elements, convert to a JSON object, then stringify it. This is then posted to the .cfc function that converts it back into a form object, and you proceed from there.
Here is the .cfc:
<cfcomponent>
<cffunction name="formTest" access="remote" returntype="string" returnformat="plain">
<cfset form = {} /> <!--- create a blank form scope and fill it with JSON data --->
<cfset requestBody = DeserializeJSON(toString(getHttpRequestData().content)) />
<cfset aryLen = ArrayLen(variables.requestBody) />
<cfloop index="idx" from="1" to="#val(aryLen)#">
<cfif isStruct(variables.requestBody[idx])><cfset form[variables.requestBody[idx].name] = variables.requestBody[idx].value /></cfif>
</cfloop>
<!---<cfsavecontent variable="f"><cfdump var="#form#" /></cfsavecontent><cfreturn f />--->
<cfif NOT StructCount(form)><cfreturn "No Form Submitted.. aborting" /></cfif>
<cfset warn = "" />
<cfset form.userName = trim(canonicalize(form.userName,true,true)) />
<cfset form.favcolFULL = trim(canonicalize(form.favcolFULL,true,true)) />
<cfset form.visitFULL = trim(canonicalize(form.visitFULL,true,true)) />
<cfset form.age = trim(canonicalize(form.age,true,true)) />
<cfset form.height = trim(canonicalize(form.height,true,true)) />
<cfif form.userName eq ""><cfset warn = warn & "Your name is required<br />" /></cfif>
<cfif form.visitFULL eq ""><cfset warn = warn & "Select at least one place you want to visit<br />" /></cfif>
<cfif len(form.age) AND val(form.age) eq 0><cfset warn = warn & "Age must be a number greater than zero" /></cfif>
<cfif len(warn)>
<cfreturn warn />
<cfelse>
<!--- This is where you would place the code for processing the form data. --->
<cfreturn "Everything checks out." />
</cfif>
</cffunction>
</cfcomponent>
As you can see, it returns either the warning of what needs to be corrected, or a message that states all is good.
HTH,
^ _ ^
5
Replies
AdChoices