Fix: household name input visible on page load when creating new household

This commit is contained in:
agentbox
2026-07-31 22:04:59 +00:00
parent 1e57a886f4
commit 53a1ceab75
+20 -7
View File
@@ -17,9 +17,7 @@
<legend>Household</legend> <legend>Household</legend>
<label class="radio-label"> <label class="radio-label">
<input type="radio" name="household_action" value="join" checked <input type="radio" name="household_action" value="join" id="radio-join" checked>
onchange="document.getElementById('join-block').hidden=false;
document.getElementById('create-block').hidden=true;">
Join an existing household Join an existing household
</label> </label>
<div id="join-block" class="household-block"> <div id="join-block" class="household-block">
@@ -35,13 +33,11 @@
</div> </div>
<label class="radio-label"> <label class="radio-label">
<input type="radio" name="household_action" value="create" <input type="radio" name="household_action" value="create" id="radio-create"
onchange="document.getElementById('join-block').hidden=true;
document.getElementById('create-block').hidden=false;"
{% if not households %}checked{% endif %}> {% if not households %}checked{% endif %}>
Create a new household Create a new household
</label> </label>
<div id="create-block" class="household-block" hidden> <div id="create-block" class="household-block">
<input type="text" name="new_household_name" <input type="text" name="new_household_name"
placeholder="Household name (e.g. The Smiths)" placeholder="Household name (e.g. The Smiths)"
class="text-input"> class="text-input">
@@ -55,4 +51,21 @@
Already have an account? <a href="{{ url_for('auth.login') }}">Log in</a> Already have an account? <a href="{{ url_for('auth.login') }}">Log in</a>
</p> </p>
</div> </div>
<script>
(function() {
var joinBlock = document.getElementById('join-block');
var createBlock = document.getElementById('create-block');
var radioJoin = document.getElementById('radio-join');
var radioCreate = document.getElementById('radio-create');
function sync() {
joinBlock.hidden = !radioJoin.checked;
createBlock.hidden = !radioCreate.checked;
}
radioJoin.onchange = sync;
radioCreate.onchange = sync;
sync();
})();
</script>
{% endblock %} {% endblock %}