Question 201538 in Html Question posted in
Some basic documentation can be found here.

Html – My javascript function won't work only if the page has fully loaded

I want to disable an input text after user click on other input tag with checkbox type,

the problem is the daterange input text wont disable everytime i click on checkbox, can anyone help?

function myFunction() {
  document.getElementById("daterange").disabled = true;
}
<div class="item form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Date <span class="required">*</span>
        </label>
  <div class="col-md-6 col-sm-6 col-xs-12">
    <input type="text" name="daterange" id="daterange" class="form-control date" placeholder="Choose multiple dates">
    <p style="color: white">
      <input type="checkbox" name="everyday" id="everyday" onclick="myFunction()" value="everyday" class="flat" /> Everyday
    </p>
  </div>
</div>

EDIT :
I just realized that when the page is not fully loaded it can work as i expected, but if the page is fully loaded, it seems something make the function not working

Tags:

2

Answers


  1. 0

    maybe you can try to use alpineJS in laravel

    <div class="item form-group">
  <label class="control-label col-md-3 col-sm-3 col-xs-12" for="email">Date <span class="required">*</span>
        </label>
  <div x-data="{ inputDisabled: false }"  class="col-md-6 col-sm-6 col-xs-12">
    <input x-bind:disabled="inputDisabled"  type="text" name="daterange" id="daterange" class="form-control date" placeholder="Choose multiple dates">
    <p style="color: white">
      <input x-on:click="inputDisabled = true" type="checkbox" name="everyday" id="everyday"  value="everyday" class="flat" /> Everyday
    </p>
  </div>
</div>

    if you using laravel brezze, alpine JS already include on it.
    we can easily to manipulate our DOM without writting a lot code of JS. Just write in in inline HTML

    Login or Signup to reply.
  2. 0

    if you want to disable the "daterange" input text when the checkbox is clicked, you can modify your JavaScript function like-
    In the updated function, you can check the state of the "everyday" checkbox using the checked property. If the checkbox is checked, disable the "daterange" input by setting its disabled property to true. If the checkbox is not checked, we enable the "daterange" input by setting its disabled property to false.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search