Conditional

Conditional Submit Button Form

Overview

The conditional submit button form sample extends the feedback form with a "Terms and conditions." link and an "I agree" checkbox. The submit button is disabled as long as the checkbox is unchecked. The above screenshot shows a form with a disabled submit button.

Form Design

Start with the feedback form.

Drag and drop a string component symbol on the bottom of the text area symbol to create a string component as the second form component.

Adding a string component to the conditional submit button form

Right-click the string component's symbol to open the context menu and change the string component type to "Link".

Turning the string component type into link

Double-click the link's label cell and change the label to "Terms and conditions". Double-click the properties cell and enter an URL.

Changing the string component label to Terms and conditions in the conditional submit button form

Drag-and-drop a checkbox component symbol on the bottom of the link symbol to create a checkbox component as the third form component.

Adding a checkbox component as third form component of the conditional submit button form

Double-click the checkbox component's label cell and change the label to "I agree".

Changing the checkbox label to I agree in the conditional submit button form

Double-click the checkbox component's properties cell to open a properties dialog. Set the input required for server-side validation (disabled JavaScript).

Setting the checkbox required in the conditional submit button form

Double-click the checkbox component's "Missing Input Message" cell to enter an error message, for example "Please accept our terms and conditions".

Setting the required checkbox's error message in the conditional submit button form

Drag and drop the form's submit button symbol on the checkbox symbol. The checkbox symbol is displayed twice to indicate that the checkbox will become a group.

Below is the final form structure with the submit button as checkbox child.

The final conditional-submit-button form structure with the submit button as checkbox child

Form Layout

Switch to the layout view with the updated form layout. Toggle the view mode The zoom and view mode toggle as convenient.

Two additional drawing objects were added to the canvas, the link "Terms and conditions." and the checkbox with its label "I agree". Both were put on the bottom of the form. The page size was increased to hold the new drawing objects.

The initial layout in the layout view of the conditional submit button form

Rearrange the new drawing objects and the submit button. Update the page height.

Rearranging the new drawing objects and the submit button in the layout view of the conditional submit button form

Switch to the settings view and give the link a neater look.

Giving the link a neater look in the conditional submit button form

Double-click the page background to open the page's properties dialog and to set border and background.

Setting a page background and border in the conditional submit button form

Database Support

Click the settings tab, select the client-server code and the database "MySQL" options. Enter the MySQL root password if required - MySQL has no initial root password, MAMP's initial MySQL root password is "root" (see LAMP, MAMP, or WAMP).

The code generator will create a database

Click the product tab and save the HTML form to the server folder as index.php.

Load the HTML form in your browser, complete its fields, and submit it.

The completed sample conditional HTML form

Shown below is what we have in our database.

                "1"  
                "Men are all alike."
                "1"
                "2020-02-04 17:46:10"

The last entry is the record's timestamp (sample update on 2020-Feb-04).

Source Code

Below is the source code of the conditional submit button sample.

<?xml version="1.0" encoding="us-ascii" standalone="yes"?>
<!-- Created on Tue Feb 04 18:02:15 CET 2020 -->
<form>
	<settings>
		<form-settings code="1" database="1" host="bG9jYWxob3N0" port="8888" user="cm9vdA==" password="cm9vdA==" layout="2"/>
		<link-settings  link="custom" link-underline="false" link-color="3366FF" visited="custom" visited-underline="false" visited-color="3366FF" hover="custom" hover-underline="false" hover-color="3366FF" active="custom" active-underline="false" active-color="3366FF"/>
	</settings>
	<pages>
		<page width="1500" height="1080" border="1" border-color="C0C0C0" border-opacity="10" background="1" background-color="FFFFFF" background-opacity="10">
			<defaults>
				<shape border="1" border-color="6699FF" border-opacity="10" background="1" background-color="FFFFFF" background-opacity="10"/>
				<label alignment="left" font-family="THVjaWRhIFNhbnMgVW5pY29kZQ==" text-color="000000" text-opacity="10" border="0" background="0"/>
			</defaults>
			<shapes>
				<shape type="roundrect" x="40" y="40" width="1420" height="720" border-radius="20"/>
			</shapes>
			<components>
				<component type="textarea">
					<control x="80" y="220" width="1340" height="500"/>
					<label x="80" y="80" width="410" height="100">RmVlZGJhY2s=</label>
					<properties type="editable" required="true">
						<placeholder>UGxlYXNlIHRlbGwgdXMgd2hhdCB5b3UgdGhpbmsu</placeholder>
						<max-length>1000</max-length>
					</properties>
					<messages>
						<missing-input>UGxlYXNlIHRlbGwgdXMgd2hhdCB5b3UgdGhpbmsu</missing-input>
					</messages>
				</component>
				<component type="string">
					<label x="90" y="800" width="940" height="100">VGVybXMgYW5kIGNvbmRpdGlvbnMu</label>
					<properties type="link"/>
				</component>
				<component type="checkbox">
					<control x="90" y="940"/>
					<label x="230" y="940" width="280" height="100">SSBhZ3JlZQ==</label>
					<properties required="true"/>
					<components>
						<component type="button">
							<control x="1060" y="940" width="400"/>
							<label>U3VibWl0</label>
							<properties type="submit">
							</properties>
						</component>
					</components>
					<messages>
						<missing-input>UGxlYXNlIGFncmVlIHRvIG91ciB0ZXJtcyBhbmQgY29uZGl0aW9ucy4=</missing-input>
					</messages>
				</component>
			</components>
			<messages>
				<missing-input>TWlzc2luZyBpbnB1dDo=</missing-input>
			</messages>
		</page>
	</pages>
</form>