Javascript hide/show elements does not work properly

I have added this checkbox to my form:

<div class="row">
  <div class="form-group col">
    <input type="checkbox" name="prd_presell" id="product_presell" 
      onclick="presellTXT()" value="TRUE" @if(!empty($product)) @if($product->prd_presell == 'TRUE') checked @endif @endif>
    <label for="presell_product">Presell Product</label>
  </div>
</div>

So there is an onClick function named presellTXT() which goes like this:

function presellTXT() {
        var presell_checkbox = document.getElementById("product_presell"); // get checkbox
        
        var presell_text = document.getElementById("show_presell_text"); // text div
        
        var presell_text_input = document.getElementById("presell_product_text"); // text input
        
        if (presell_checkbox.checked == true){
            presell_text.style.display = "block";
        } else {
            presell_text_input.value = "";
            presell_checkbox.value = "";
            presell_text.style.display = "none";
        }
    }

So when the checkbox is checked, it basically shows the element with an id of show_presell_text:

<div class="row" id="show_presell_text">
  <div class="col-lg-12">
    <div class="form-group">
      <label>Product Presell Text:</label>
      <input name="prd_presell_text" id="presell_product_text" class="form-control" value="{{ old('prd_presell_text', !empty($product) ? $product->prd_presell_text : '') }}">
    </div>
  </div>
</div>

So when the page loads, it should not be showing the Product Presell Text unless the checkbox is checked.

Now if you take a look at jsfillde example, you can see as soon as the page loads, the text input appears however the checkbox is not checked at all!

So how to hide the text input when the page loads and the checkbox is not checked?

Note: I don’t want to use CSS for this because I need to determine correctly if prd_presell is checked on page loads (because of @if($product->prd_presell == 'TRUE') which retrieves data from the DB) then it has to show the Product Presell Text text input.

UPDATE:

I tried adding this:

#show-presell-text.hidden {
    display: none !important;
}

And adding this to the div:

<div class="row" id="show_presell_text" class="@if(!empty($product)) @if($product->prd_presell != 'TRUE') hidden @endif @endif">

But does not work and hide the element.

Answer

to hide/show the elements on load then this can be easily done by adding an if statement like so

@if (!empty($product))
<div class="row" id="show_presell_text">
  <div class="col-lg-12">
    <div class="form-group">
      <label>Product Presell Text:</label>
      <input name="prd_presell_text" id="presell_product_text" class="form-control" value="{{ old('prd_presell_text', !empty($product) ? $product->prd_presell_text : '') }}">
    </div>
  </div>
</div>
@endif

This will completely omit the element you want at page load if empty and you can add it via JS code. However, If you want to just hide it using CSS classes you can do this:

<div class="row" id="show_presell_text" class="@if (empty($product)) hidden @endif">
  <div class="col-lg-12">
    <div class="form-group">
      <label>Product Presell Text:</label>
      <input name="prd_presell_text" id="presell_product_text" class="form-control" value="{{ old('prd_presell_text', !empty($product) ? $product->prd_presell_text : '') }}">
    </div>
  </div>
</div>

If the product is empty the class will not be present and you can use CSS to set the element to display: none if the class is absent. Let me know if I can clarify further or if I got something wrong.

Edit: A better alternative for the second code block would be to add a hidden class as suggested below if the product is empty and then use it to hide it via CSS. You can then simply add or remove this class via JS as needed.

#show-presell-text.hidden {
display: none;
}

Advertisement

Answer