Creating Checkboxes on Web Forms

Follow

One of the features of the DLL allows you to create checkboxes on your web pages. Several user response fields on the default web pages utilize checkboxes instead of text boxes. Examples of fields that use these default checkboxes are the "Keep in Review" field on the DefaultRequest.html page and the "Share Research Topics?" field on the NewUserRegistration.html, ChangeUserInformation.html, and NewAuthRegistration.html pages.

Checkboxes reflect the value of a field as it appears in the database and on the client forms (for example, Checked = Yes, Unchecked = No) and are created using CHECKED tags in the HTML that allow you to control whether the default checked status will be checked (true) or unchecked (false) when the form is opened. The "Keep in Review" and "Share Research Topics" fields mentioned above include CHECKED tags that are formatted with a default checked the status of true so that the checkbox is pre-checked when the form opens.

As shown in the examples below, the value sets the value that is sent to the server ("yes" or "no") and the default determines if the box is checked (true) or unchecked (false) when the form is opened. Checking and unchecking a checkbox updates the database and is reflected on the appropriate client form (Request or User Information form).

The Default Keep in Review (UserReview) Checked Tag:

<label for="UserReview">
	<span class="field">
		<span class="<#ERROR name="ERRORUserReview">"><b>Keep In Review</b>
		</span><br />
		<span class="note">Keep request in a review state before submitting 
		to processing.</span>
	</span>
	<input id="UserReview" name="UserReview" class="f-checkbox" tabindex="70" 
	value="Yes" type="checkbox" <#CHECKED name="UserReview" default="true">>
	<br />
</label>		

The Default Share Research Topics (ResearchTopicsSharing) Checked Tag:

<label for="ResearchTopicsSharing">
	<span class="field">
		<span class="<#ERROR name="ERRORResearchTopicsSharing">"><b>Share 
		Research Topics?</b></span>
	</span>
	<input id="ResearchTopicsSharing" name="ResearchTopicsSharing" class=
	"f-checkbox" tabindex="95" value="Yes" type="checkbox"
	<#CHECKED name="ResearchTopicsSharing" default="true">><br />
</label>

Using the For Publication Field with a Checkbox

If you want to include the "For Publication" field in your photoduplication request pages, you can create a CHECKED tag for the field using the following example. Note that if this field is not included on your web forms, the For Publication field in the client defaults to "No" for requests submitted through the web, so the checkbox included on the Request form is left blank. Remember to also add this code to the corresponding Edit.html page.

<label for="ForPublication">
	<span class="field">
		<span class="<#ERROR name="ERRORForPublication">"><b>For Publication</b>
		</span><br />
		<span class="note">Will this photocopy be used in a publication? </span>
	</span>
	<input id="ForPublication" name="ForPublication" class="f-checkbox" 
	tabindex="70" value="Yes" type="checkbox" <#CHECKED name="ForPublication" 
	default="true">><br />
</label>

Using the User-Defined Fields with a Checkbox

The ability to use checkboxes on web pages has been expanded to work with the user-defined fields UserInfo1-5 and ItemInfo1-5. Checking and unchecking a checkbox used with a user-defined field, like the default checkboxes, updates the database and is reflected on the appropriate client form (Request or User form). To create a user-defined field with a checkbox:

  1. Add the field to your client form, changing the label of the field on the form to suit your needs.
  2. The example here places the UserInfo1 field on the User form. The label has been changed to Society Member.
  3. Add the field to the applicable form(s). Here we use the ChangeUserInformation.html form and call the field Special Collections Society Member.
  4. Create a new label using the CHECKED tag in the same manner as used in the ResearchTopicsSharing label shown above.
    <label for="UserInfo1">
    	<span class="field">
    		<span class="<#ERROR name="ERRORUserInfo1">"><b>Special Collections 
    		Society Member</b></span>
    	</span>
    	<input id="UserInfo1" name="UserInfo1" class="f-checkbox" tabindex="95" 
    	value="Yes" type="checkbox" <#CHECKED name="UserInfo1" default="false">>
    	<br />							
    </label>
  5. Note that using the CHECKED tag with new fields requires an input element that must come after the checkbox.
  6. Because of the way submitting forms works, the value of the checkbox element will only be submitted if it is checked.
  7. In order for the UserInformation1 field to be set to No when the checkbox isn't checked, we add the second element with the same name so this value will be used instead.
    <!-- This value will be used if the checkbox is unchecked -->
    <input name="UserInfo1" type="hidden" value="No"/>
  8. The finished CHECKED tag for the UserInfo1 field looks like this:

    <label for="UserInfo1">
    	<span class="field">
    		<span class="<#ERROR name="ERRORUserInfo1">"><b>Special Collections 
    		Society Member</b></span>
    	</span>
    	<input id="UserInfo1" name="UserInfo1" class="f-checkbox" tabindex="95" 
    	value="Yes" type="checkbox" <#CHECKED name="UserInfo1" default="false">>
    	<input name="UserInfo1" type="hidden" value="No"/> <!-- This value will 
    	be used if the checkbox is unchecked --><br />							
    </label>

Questions?

If this article didn’t resolve your issue, please take a moment and answer a few questions to help improve our documentation:

Feedback