# Hide input field with parent div

**URL:** <https://discourse.cakephp.org/t/hide-input-field-with-parent-div/11857>\
**Category:** Need Help\
**Created:** [February 9, 2024, 9:36am UTC](https://discourse.cakephp.org/t/hide-input-field-with-parent-div/11857 "2024-02-09T09:36:02Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![MDebus](https://avatars.discourse-cdn.com/v4/letter/m/b77776/32.png) [@MDebus](https://discourse.cakephp.org/u/MDebus)\
**Post date:** [February 9, 2024, 9:36am UTC](https://discourse.cakephp.org/t/hide-input-field-with-parent-div/11857/1 "2024-02-09T09:36:02Z")

</div>

Hello,

oftentimes, we need to hide both the input field and its corresponding label based on certain conditions, but CakePHP 4.x doesn’t offer a built-in option to hide the whole div, label and the input field directly in the `$this->Form->control()` method. Is that right?

Cheers,  
Marc

---

<div class="post-metadata">

**Author:** ![KevinPfeifer](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/kevinpfeifer/32/3365_2.png) [@KevinPfeifer](https://discourse.cakephp.org/u/KevinPfeifer)\
**Post date:** [February 9, 2024, 9:39am UTC](https://discourse.cakephp.org/t/hide-input-field-with-parent-div/11857/2 "2024-02-09T09:39:06Z")

</div>

Thats up 2 you to implement since CakePHP doesn’t offer any JS specific functionality. We are a purely serverside framework.

---

<div class="post-metadata">

**Author:** ![MDebus](https://avatars.discourse-cdn.com/v4/letter/m/b77776/32.png) [@MDebus](https://discourse.cakephp.org/u/MDebus)\
**Post date:** [February 9, 2024, 9:47am UTC](https://discourse.cakephp.org/t/hide-input-field-with-parent-div/11857/3 "2024-02-09T09:47:42Z")

</div>

okay, but why i can hide the input field with that ‘hidden’ option?

I need to generate a hidden control and my javascript show it, depending on another fields value. Maybe I’m the only one who has this need 🙂

If I solve this with JavaScript, which actually works so far, this input field is first rendered for a millisecond and then it is hidden. Do you have a hint for me?

---

<div class="post-metadata">

**Author:** ![KevinPfeifer](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/kevinpfeifer/32/3365_2.png) [@KevinPfeifer](https://discourse.cakephp.org/u/KevinPfeifer)\
**Post date:** [February 9, 2024, 10:00am UTC](https://discourse.cakephp.org/t/hide-input-field-with-parent-div/11857/4 "2024-02-09T10:00:45Z")

</div>

If you are talking about

```auto
$this->Form->hidden('somefiled');

```

this generates

```auto
<input name="somefiled" type="hidden" />

```

and therefore is just a visibly hidden input field which still is being submitted (basic HTML)

But this does not do what you want (do conditionally hide/show forms depending on other forms)

* * *

If you want your form to be rendered with prefilled data which conditionally hides/shows fields you will have to replicate those conditions in your template, not only JS.

An alternative approach is to use HTMX to re-render the form whenever it changes - but I have not yet tried that. See e.g. [Posts | Mark Story](https://mark-story.com/posts/view/building-my-first-htmx-application)

---

<div class="post-metadata">

**Author:** ![MDebus](https://avatars.discourse-cdn.com/v4/letter/m/b77776/32.png) [@MDebus](https://discourse.cakephp.org/u/MDebus)\
**Post date:** [February 9, 2024, 10:08am UTC](https://discourse.cakephp.org/t/hide-input-field-with-parent-div/11857/5 "2024-02-09T10:08:03Z")

</div>

i need something like this:

```auto
echo $this->Form->control('password_new', ['type' => 'password', 'label' => __('Password')]);
echo $this->Form->control('password_old', ['type' => 'password', 'required' => 'required', 'hidden' => true, 'label' => __('Old Password')]);

```

and the javascript part:

```auto
$(document).ready(function() {
        
        $("#password-new").change(function() {
            
            if($("#passwort-new").val().trim() !== "")
                $("#passwort-old").parent().show();
            else
                $("#passwort-old").parent().hide();
        });

    });

```

but in this example it is only hiding the old passwords input field, not the label.

---

<div class="post-metadata">

**Author:** ![Zuluru](https://yyz1.discourse-cdn.com/flex029/user_avatar/discourse.cakephp.org/zuluru/32/1230_2.png) [@Zuluru](https://discourse.cakephp.org/u/Zuluru)\
**Post date:** [February 9, 2024, 3:09pm UTC](https://discourse.cakephp.org/t/hide-input-field-with-parent-div/11857/6 "2024-02-09T15:09:24Z")

</div>

Then, as @KevinPfeifer said, you need to change your JavaScript. Cake doesn’t offer those tools at all. Take a look at the HTML Cake is generating, and adjust your JS to match the DOM you are working with. You’ll need to have it traverse upwards to find the right container element to show or hide.