extended-dynamic-forms
Version:
Extended React JSON Schema Form (RJSF) v6 with custom components, widgets, templates, layouts, and form events
159 lines (152 loc) • 4.18 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conditional Form - Vanilla JS</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/antd@5.24.0/dist/reset.css">
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial;
padding: 20px;
max-width: 800px;
margin: 0 auto;
background: #f0f2f5;
}
.form-container {
background: #fff;
padding: 24px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.info-box {
background: #e6f7ff;
border: 1px solid #91d5ff;
padding: 12px;
border-radius: 4px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Conditional Form Example</h1>
<div class="info-box">
This example demonstrates conditional logic where fields appear/disappear based on user selections.
</div>
<div class="form-container">
<div id="conditional-form"></div>
</div>
<script src="../../dist/extended-dynamic-forms.standalone.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
const schema = {
type: 'object',
properties: {
userType: {
type: 'string',
title: 'User Type',
enum: ['individual', 'business'],
enumNames: ['Individual', 'Business']
},
firstName: {
type: 'string',
title: 'First Name'
},
lastName: {
type: 'string',
title: 'Last Name'
},
businessName: {
type: 'string',
title: 'Business Name'
},
taxId: {
type: 'string',
title: 'Tax ID / EIN'
},
hasInternationalOperations: {
type: 'boolean',
title: 'International Operations'
},
countries: {
type: 'array',
title: 'Countries of Operation',
items: {
type: 'string'
}
}
},
required: ['userType']
};
const uiSchema = {
userType: {
'ui:widget': 'radio'
},
countries: {
'ui:widget': 'checkboxes',
'ui:options': {
inline: true
}
}
};
// Define conditional rules
const conditionals = {
rules: [
// Show individual fields
{
conditions: { userType: 'individual' },
event: {
type: 'remove',
params: { field: ['businessName', 'taxId', 'hasInternationalOperations', 'countries'] }
}
},
// Show business fields
{
conditions: { userType: 'business' },
event: {
type: 'remove',
params: { field: ['firstName', 'lastName'] }
}
},
// Show countries when international
{
conditions: {
userType: 'business',
hasInternationalOperations: { not: true }
},
event: {
type: 'remove',
params: { field: 'countries' }
}
},
// Make business fields required
{
conditions: { userType: 'business' },
event: {
type: 'require',
params: { field: ['businessName', 'taxId'] }
}
}
]
};
// Create the form with conditionals
ExtendedDynamicForms.createForm({
container: '#conditional-form',
schema: schema,
uiSchema: uiSchema,
conditionals: conditionals,
formData: {
userType: 'individual'
},
onChange: function(formData) {
console.log('Form data:', formData);
},
onSubmit: function(formData) {
alert('Submitted: ' + JSON.stringify(formData, null, 2));
}
});
});
</script>
</body>
</html>