Upon selecting multiple checkboxes, corresponding form fields will be displayed based on shared attributes

Question

Upon selecting multiple checkboxes, corresponding form fields will be displayed based on shared attributes

When multiple checkboxes are selected by the user, corresponding form fields should appear based on the checkboxes. For example, if both flight and hotel checkboxes are checked, then the full name and last name fields should be displayed while other fields remain hidden.

I attempted to implement a toggle method to hide/show fields when a checkbox is checked, but I am facing challenges in selecting multiple fields together and hiding others. Additionally, I need my checkboxes to be aligned horizontally using CSS, but it's not functioning as expected.

javascript html css

Answer 1

Answer №1

Take a look at this condensed and generalized CSS-only solution for toggling form fields conditionally with checkboxes:

.form__field {
display: block;
}
[class*="--checkbox"] {
display: inline-block;
}
[data-conditional] {
display: none;
}
#flight:checked ~ [data-conditional*="flight"] {
display: block;
}
#hotel:checked ~ [data-conditional*="hotel"] {
display: block;
}
#travel:checked ~ [data-conditional*="travel"] {
display: block;
}

<form action="mailto:?subject=Travel Pre-approval Form " method="POST" enctype="text/plain" id="travel-form" onsubmit="test1()">

<input class="form__input form__input--checkbox" type="checkbox" id="flight" />
<label class="form__field form__field--checkbox" for="flight">
<span class="form__label">Flight</span>
</label>

<input class="form__input form__input--checkbox" type="checkbox" id="hotel" />
<label class="form__field form__field--checkbox" for="hotel">
<span class="form__label">Hotel</span>
</label>

<input class="form__input form__input--checkbox" type="checkbox" id="travel" />
<label class="form__field form__field--checkbox" for="travel">
<span class="form__label">Travel</span>
</label>

<label class="form__field form__field--text" data-conditional="flight hotel">
<span class="form__label">Full Name:</span>
<input class="form__input" type="text"  placeholder="Full Name as per Passport" />
</label>

<label class="form__field form__field--date" data-conditional="flight hotel">
<span class="form__label">Date of travel:</span>
<input class="form__input" type="date" />
</label>

<label class="form__field form__field--date" data-conditional="flight hotel">
<span class="form__label">Date of arrival:</span>
<input class="form__input" type="date" />
</label>

<label class="form__field form__field--text" data-conditional="flight">
<span class="form__label">For Flight only:</span>
<input class="form__input form__input--text" type="text" />
</label>

<label class="form__field form__field--text" data-conditional="hotel">
<span class="form__label">For Hotel only:</span>
<input class="form__input form__input--text" type="text" />
</label>

<label class="form__field form__field--text" data-conditional="travel">
<span class="form__label">For Travel only:</span>
<input class="form__input form__input--text" type="text" />
</label>

<div class="form__field form__field--submit">
<button type="submit">Submit</button>
</div>
</form>

My checkboxes should be aligned horizontally.

The code snippet provided above satisfies the horizontal alignment of the checkboxes.

By using checkboxes to toggle form fields based on the data-conditional attribute, we can control which fields are displayed. The key technique here is the general next sibling selector in CSS combined with specific HTML markup.

Additional fields have been included at the end of the form to demonstrate how the conditional filtering works for individual checkboxes.

Answer 2

Take a look at this condensed and generalized CSS-only solution for toggling form fields conditionally with checkboxes:

.form__field {
display: block;
}
[class*="--checkbox"] {
display: inline-block;
}
[data-conditional] {
display: none;
}
#flight:checked ~ [data-conditional*="flight"] {
display: block;
}
#hotel:checked ~ [data-conditional*="hotel"] {
display: block;
}
#travel:checked ~ [data-conditional*="travel"] {
display: block;
}

<form action="mailto:?subject=Travel Pre-approval Form " method="POST" enctype="text/plain" id="travel-form" onsubmit="test1()">

<input class="form__input form__input--checkbox" type="checkbox" id="flight" />
<label class="form__field form__field--checkbox" for="flight">
<span class="form__label">Flight</span>
</label>

<input class="form__input form__input--checkbox" type="checkbox" id="hotel" />
<label class="form__field form__field--checkbox" for="hotel">
<span class="form__label">Hotel</span>
</label>

<input class="form__input form__input--checkbox" type="checkbox" id="travel" />
<label class="form__field form__field--checkbox" for="travel">
<span class="form__label">Travel</span>
</label>

<label class="form__field form__field--text" data-conditional="flight hotel">
<span class="form__label">Full Name:</span>
<input class="form__input" type="text"  placeholder="Full Name as per Passport" />
</label>

<label class="form__field form__field--date" data-conditional="flight hotel">
<span class="form__label">Date of travel:</span>
<input class="form__input" type="date" />
</label>

<label class="form__field form__field--date" data-conditional="flight hotel">
<span class="form__label">Date of arrival:</span>
<input class="form__input" type="date" />
</label>

<label class="form__field form__field--text" data-conditional="flight">
<span class="form__label">For Flight only:</span>
<input class="form__input form__input--text" type="text" />
</label>

<label class="form__field form__field--text" data-conditional="hotel">
<span class="form__label">For Hotel only:</span>
<input class="form__input form__input--text" type="text" />
</label>

<label class="form__field form__field--text" data-conditional="travel">
<span class="form__label">For Travel only:</span>
<input class="form__input form__input--text" type="text" />
</label>

<div class="form__field form__field--submit">
<button type="submit">Submit</button>
</div>
</form>

My checkboxes should be aligned horizontally.

The code snippet provided above satisfies the horizontal alignment of the checkboxes.

By using checkboxes to toggle form fields based on the data-conditional attribute, we can control which fields are displayed. The key technique here is the general next sibling selector in CSS combined with specific HTML markup.

Additional fields have been included at the end of the form to demonstrate how the conditional filtering works for individual checkboxes.

Upon selecting multiple checkboxes, corresponding form fields will be displayed based on shared attributes

Answer №1

Similar questions

Is there a way for me to specifically show just the initial image contained in the images[] array within the json data?

What is the best method for effectively organizing and storing DOM elements alongside their related objects?

a guide to structuring REST API requests with axios in Vue.js

Creating an array of logos in ReactJS with the help of TailwindCSS

Choose class based on the retrieved information

A JavaScript async function with a nested call inside

The functionality to scroll to the top of the page is not functioning properly in Next.js when navigating to a new page using the Link

Excessive alerts being produced within the loop

Error with the Knockout framework's inability to bind to the model

What is the process for sending a request to Electron from my backend using NAPI?

The verification of form is not done using an if statement

What is the process of inserting information into a nuxt-link in nuxt.js?

Tips for preserving checkbox state?

Checking TinyMCE to ensure it handles empty inputs properly

`Prepare and load all materials in advance`

Why does my ajax request show the result in the php file rather than redirecting to the html page?

Tips for showing ng-repeat items solely when filters are applied by the user

Position the Facebook Like Button in alignment with the counts box

The focus and blur events for the document in a content editable iframe are not activated by Chrome

Using an array to set the center of a map - Google Maps API