Highlighted

How you can make required fields (answer to a previous post - my replies are never saved.)

LEGEND ,
Oct 09, 2019

Copy link to clipboard

Copied

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,

 

^ _ ^

Views

18

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

How you can make required fields (answer to a previous post - my replies are never saved.)

LEGEND ,
Oct 09, 2019

Copy link to clipboard

Copied

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,

 

^ _ ^

Views

19

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 09, 2019 0

Have something to add?

Join the conversation