formrequiredexample.cfm:
<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>
formrequiredexample.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>
So, my replies to an earlier post have not been saving, for some annoying reason.. so I'm putting my reply here, hoping the OP finds this and that this helps out the OP.
V/r,
^ _ ^
AdChoices