screenshot2

screenshot1

I have 4 fields in a form

  1. Product Field.
  2. Brand Field.
  3. Services Field.

I want to show them all in the index, but when i go to the product url i want to show only product field and services field

I have tried .show and hide method but it's hiding the field for all url

I am trying this method to hide and Now it's hiding as per my request but compromising in the form field, and I don't want that there's an empty blank space.

The issue was different and it fixed now what I did was I created a different id and call the particular id, without compromising the margin and all and it's working like charm now.

<div style="display:none;" class="appointment" id="booking-form-modal" data-backdrop="static" data-keyboard="false">

  <form method="POST" action="/submit-request" onsubmit="submitRequest();">
  <input type="hidden" name="_token" value="{{ csrf_token() }}">

    <div class="row">
      <div class="col-md-12">
        <div class="form-group">
        <select id="productDropdown" class="form-control" name="product" required>
        <option value="">Select Products</option>
        @foreach($products as $product)
        <option value="{{ $product['id']}}">{{ $product['name']}}</option>
        @endforeach

          </select>
        </div>
      </div>
    </div>

      <div  class="row" >
        <div class="col-md-12">
          <div class="form-group">
          <select id="brandDropdown" class="form-control" name="brands" required>
            <option value="">Select Brands</option>
          </select>
          </div>
        </div>
      </div>
    <div class="row">
      <div class="col-md-12">
        <div class="form-group">
        <select id="serviceDropdown" class="form-control" name="services" required>
          <option value="">Select Services</option>
        </select>
        </div>
      </div>
    </div>
  </form>
</div>

Script to redirect as per the request

    <script type="text/javascript">
 window.addEventListener('load', function() {
    if(/services|1800/.test(window.location.href))
    {
      document.getElementById('brandDropdown').style.display = 'none';
    }
});



</script>

2 Answers

0
Recep Karadas On

How does your url look like and when do you call the provided snippet? Could you also provide a more detailed example of your code?

I guess you want to hide the elements "onload"? If so, then you need to wait until your elements are loaded.

window.addEventListener('load', function() {
    if(/repair/.test(window.location.href)) 
    { 
      document.getElementById('brandDropdown').closest('.row').style.display = 'none'; 
    }
});
0
Anil Loutombam On

The solution was, I added another id so that it didn't compromise my form fields, kindly find the solution below.

<div id="branddrop-row" class="row" >
    <div class="col-md-12">
      <div class="form-group">
      <select id="brandDropdown" class="form-control" name="brands" required>
        <option value="">Select Brands</option>
      </select>
      </div>
    </div>
  </div>

And here is the script for hiding as per the request. I call the div id instead of select id so that it didn't compromise my form fields.

 <script type="text/javascript">
 window.addEventListener('load', function() {
    if(/services|1800/.test(window.location.href))
    {
      document.getElementById('branddrop-row').style.display = 'none';
    }
});



</script>