gristlabs_grist-core/static/forms/form.html
Jarosław Sadziński 0aad09a4ed (core) Forms improvements
Summary:
Forms improvements and following new design
- New headers
- New UI
- New right panel options

Test Plan: Tests updated

Reviewers: georgegevoian, dsagal

Reviewed By: georgegevoian

Subscribers: dsagal, paulfitz

Differential Revision: https://phab.getgrist.com/D4158
2024-01-19 10:34:03 +01:00

65 lines
2.4 KiB
HTML

<!doctype html>
<html>
<head>
<meta charset="utf8">
{{#if BASE}}
<base href="{{ BASE }}">
{{/if}}
<style>
</style>
<script src="forms/grist-form-submit.js"></script>
<script src="forms/purify.min.js"></script>
<link rel="stylesheet" href="forms/form.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main class='grist-form-container'>
<form class='grist-form'
onsubmit="event.target.parentElement.querySelector('.grist-form-confirm').style.display = 'flex', event.target.style.display = 'none'"
data-grist-doc="{{ DOC_URL }}"
data-grist-table="{{ TABLE_ID }}"
data-grist-success-url="{{ SUCCESS_URL }}"
>
{{ dompurify CONTENT }}
<div class="grist-power-by">
<a href="https://getgrist.com" target="_blank">
<div>Powered by</div>
<div class="grist-logo"></div>
</a>
</div>
</form>
<div class='grist-form-confirm' style='display: none'>
<div>
{{ SUCCESS_TEXT }}
</div>
{{#if ANOTHER_RESPONSE }}
<button onclick="window.location.reload()">Submit another response</button>
{{/if}}
</div>
</main>
<script>
// Validate choice list on submit
document.querySelector('.grist-form input[type="submit"]').addEventListener('click', function(event) {
// When submit is pressed make sure that all choice lists that are required
// have at least one option selected
const choiceLists = document.querySelectorAll('.grist-choice-list.required:not(:has(input:checked))');
Array.from(choiceLists).forEach(function(choiceList) {
// If the form has at least one checkbox make it required
const firstCheckbox = choiceList.querySelector('input[type="checkbox"]');
firstCheckbox?.setAttribute('required', 'required');
});
// All other required choice lists with at least one option selected are no longer required
const choiceListsRequired = document.querySelectorAll('.grist-choice-list.required:has(input:checked)');
Array.from(choiceListsRequired).forEach(function(choiceList) {
// If the form has at least one checkbox make it required
const firstCheckbox = choiceList.querySelector('input[type="checkbox"]');
firstCheckbox?.removeAttribute('required');
});
});
</script>
</body>
</html>