© 2002-2018 Axure Software Solutions, Inc. All rights reserved. Axure® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

TERMS AND CONDITIONS

Create a terms and conditions agreement form that requires the user to check a checkbox and enter their name.

STEP 1: DISABLE TEXT FIELD AND BUTTON

STEP 3: DISABLE AND CLEAR TEXT FIELD WHEN CHECKBOX IS UNCHECKED

With the "Agree Checkbox" checkbox widget still selected, double-click "OnUnselected" in the Properties tab of the Inspector to give it a new OnUnselected case.


In the Case Editor, choose the "Disable" action under "Enable/Disable". Under "Configure actions", check the "Signature Field" text field widget.


Back in the left column, choose the "Set Text" action. Under "Configure actions", check the "Signature Field" text field widget again. At the bottom of the right column, leave the value field blank.


Together, these two actions will disable the text field and clear its text when the "Agree Checkbox" checkbox is unchecked.


Click "OK" to close the Case Editor.

STEP 4: ENABLE BUTTON WHEN TEXT FIELD IS NOT BLANK

Now, select the "Signature Field" text field widget, and double-click "OnTextChange" in the Properties tab of the Inspector to give it a new OnTextChange case.


At the top of the Case Editor, click the "Add Condition" button to open the Condition Builder.


Change the third dropdown from "equals" to "does not equal". Leave the other fields as they are. This condition will evaluate to "true" when the "Signature Field" text field is not blank, i.e., when the user has entered text into it in the web browser.


Click "OK" to close the Condition Builder.

MORE RESOURCES

 

 

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 2: ENABLE TEXT FIELD WHEN CHECKBOX IS CHECKED

Select the "Agree Checkbox" checkbox widget, and double-click "OnSelected" in the Properties tab of the Inspector to give it a new OnSelected case.


In the Case Editor, choose the "Enable" action under "Enable/Disable". Under "Configure actions", check the "Signature Field" text field widget.


Back in the left column, choose the "Focus" action. Under "Configure actions", check the "Signature Field" text field widget again.


Together, these two actions will enable the text field for text entry and automatically move the cursor onto the text field when the "Agree Checkbox" checkbox is checked in the web browser.


Click "OK" to close the Case Editor.

 

 

In the training document, open the page named "Terms and Conditions". On the canvas is a simple terms and conditions agreement form.


Select the "Signature Field" text field widget at the bottom of the form. In the Inspector pane, scroll down to the bottom of the Properties tab and check the box labeled "Disabled". Alternatively, you can right-click the text field and select "Disabled" in the context menu. This will disable the text field so that it cannot be interacted with in the web browser.


Repeat this process for the "Continue Button" rectangle widget to disable it as well. Note that this will also activate the rectangle's Disabled Interaction Style in the web browser.

In the Case Editor, choose the "Enable" action under "Enable/Disable". Under "Configure actions", check the "Continue Button" rectangle widget.


Click "OK" to close the Case Editor.

STEP 5: DISABLE BUTTON WHEN TEXT FIELD IS BLANK

With the "Signature Field" text field widget still selected, double-click "OnTextChange" again in the Properties tab of the Inspector to give it a second OnTextChange case.


In the Case Editor, choose the "Disable" action under "Enable/Disable". Under "Configure actions", check the "Continue Button" rectangle widget.


Click "OK" to close the Case Editor.


Notice that even though we didn't set up a condition for this case, it shows the condition "Else If True". This case will fire if the first case's condition doesn't pass, i.e., when the "Signature Field" text field is blank again in the web browser. This will happen if the user clears the text field's text manually or if they uncheck the "Agree Checkbox" checkbox.

STEP 6: PREVIEW

Preview the page and check the checkbox in the web browser to enable the text field. Enter some text in the text field to enable the button. Then, uncheck the checkbox to disable both the text field and the button again.

Please sign below

CONTINUE

TRY IT!