make 'other' field optional and add inactivate/activate button

This commit is contained in:
2025-08-16 16:03:27 +02:00
parent 2f67319cdc
commit d0d19b8b4e
4 changed files with 104 additions and 80 deletions

View File

@@ -1,6 +1,6 @@
<div class="form_wrapper">
<form method="post">
<input type="hidden" name="action" id="action" value="user_data_create">
<form method="post">
<input type="hidden" name="action" id="action" value="user_data_create">
<div>
<label class="desc" for="uk_name">Név:</label>
<div><input type="text" name="uk_name" id="uk_name" size="8" class="field text fn" required></div>
@@ -61,7 +61,7 @@
</select>
</div>
</div>
<div>
<legend class="desc" for="uk_hand">Kéz: </legend>
<div>
@@ -162,84 +162,84 @@
</div>
</form>
</form>
</div>
<script>
$('#uk_parent_1').change(function() {
$(".add_parent_1_block").toggle(this.value == 'null');
});
$('#uk_parent_1').change(function() {
$(".add_parent_1_block").toggle(this.value == 'null');
});
$('#uk_parent_2').change(function() {
$(".add_parent_2_block").toggle(this.value == 'null');
});
$('#uk_parent_2').change(function() {
$(".add_parent_2_block").toggle(this.value == 'null');
});
$('#uk_school_sc_id').change(function() {
$(".add_school").toggle(this.value == 'null');
});
$('#uk_school_sc_id').change(function() {
$(".add_school").toggle(this.value == 'null');
});
document.addEventListener("DOMContentLoaded", function() {
const form = document.querySelector(".form_wrapper form");
const submitButton = form.querySelector('input.button.black[type="submit"]');
document.addEventListener("DOMContentLoaded", function () {
const form = document.querySelector(".form_wrapper form");
const submitButton = form.querySelector('input.button.black[type="submit"]');
// Collect text inputs but exclude #uk_other
const textInputs = Array.from(form.querySelectorAll(
'input[type="text"], input[type="email"], textarea'
)).filter(input => input.id !== "uk_other");
const textInputs = Array.from(form.querySelectorAll('input[type="text"], input[type="email"], textarea'));
// Select fields that control conditional validation
const parentSelect = form.querySelector('#uk_parent_1');
const schoolSelect = form.querySelector('#uk_school_sc_id');
const addressSelect = form.querySelector('#uk_address_scc_id');
// Select fields that control conditional validation
const parentSelect = form.querySelector('#uk_parent_1');
const schoolSelect = form.querySelector('#uk_school_sc_id');
const addressSelect = form.querySelector('#uk_address_scc_id');
const conditionalFields = [
{
select: parentSelect,
valueToIgnore: 'null',
fields: [
form.querySelector('#add_parent_1'),
form.querySelector('#parent_1_email'),
form.querySelector('#parent_1_phone')
]
},
{
select: schoolSelect,
valueToIgnore: 'null',
fields: [
form.querySelector('#add_school')
]
}
];
function toggleSubmitButton() {
let fieldsToCheck = [...textInputs];
// Exclude fields based on select value
conditionalFields.forEach(group => {
if (group.select.value !== group.valueToIgnore) {
fieldsToCheck = fieldsToCheck.filter(field => !group.fields.includes(field));
const conditionalFields = [{
select: parentSelect,
valueToIgnore: 'null',
fields: [
form.querySelector('#add_parent_1'),
form.querySelector('#parent_1_email'),
form.querySelector('#parent_1_phone')
]
},
{
select: schoolSelect,
valueToIgnore: 'null',
fields: [
form.querySelector('#add_school')
]
}
];
function toggleSubmitButton() {
let fieldsToCheck = [...textInputs];
// Exclude fields based on select value
conditionalFields.forEach(group => {
if (group.select.value !== group.valueToIgnore) {
fieldsToCheck = fieldsToCheck.filter(field => !group.fields.includes(field));
}
});
// Check if any required field is empty
const anyEmpty = fieldsToCheck.some(input => input.value.trim() === "");
// Check if uk_address_scc_id is still "null"
const addressMissing = addressSelect.value === "null";
submitButton.disabled = anyEmpty || addressMissing;
}
// Listen to input changes
textInputs.forEach(input => {
input.addEventListener("input", toggleSubmitButton);
});
// Check if any required field is empty
const anyEmpty = fieldsToCheck.some(input => input.value.trim() === "");
// Listen to select changes
[parentSelect, schoolSelect, addressSelect].forEach(select => {
select.addEventListener("change", toggleSubmitButton);
});
// Check if uk_address_scc_id is still "null"
const addressMissing = addressSelect.value === "null";
submitButton.disabled = anyEmpty || addressMissing;
}
// Listen to input changes
textInputs.forEach(input => {
input.addEventListener("input", toggleSubmitButton);
// Initial validation
toggleSubmitButton();
});
// Listen to select changes
[parentSelect, schoolSelect, addressSelect].forEach(select => {
select.addEventListener("change", toggleSubmitButton);
});
// Initial validation
toggleSubmitButton();
});
</script>
</script>

View File

@@ -1,6 +1,13 @@
<div class="form_wrapper">
<div class="buttons">
<a href="/admin/delete_member/{$user_data.uk_id}" class="addbutton delete-big">Törlés</a>
<a href="/admin/set_active_status/{$user_data.uk_id}" class="addbutton big">
{if $user_data.uk_is_active}
Inaktiválás
{else}
Aktiválás
{/if}
</a>
</div>
<form method="post">
<input type="hidden" name="action" id="action" value="user_data_edit">
@@ -13,12 +20,6 @@
value="{$user_data.uk_name}" required></div>
</div>
<div>
<label class="desc" for="uk_is_active">Aktív:</label>
<div><input type="checkbox" name="uk_is_active" id="uk_is_active" value="1"
{if 1==$user_data.uk_is_active}checked{/if}></div>
</div>
<div>
<label for="uk_lease">Bérletes:</label>
<div><input type="checkbox" name="uk_lease" id="uk_lease" value="1" {if 1==$user_data.uk_lease}checked{/if}>
@@ -258,8 +259,10 @@
const form = document.querySelector(".form_wrapper form");
const submitButton = form.querySelector('input.button.black[type="submit"]');
// Collect text inputs but exclude #uk_other
const textInputs = Array.from(form.querySelectorAll(
'input[type="text"], input[type="email"], textarea'));
'input[type="text"], input[type="email"], textarea'
)).filter(input => input.id !== "uk_other");
// Select fields that control conditional validation
const parentSelect = form.querySelector('#uk_parent_1');