Laravel 8 Javascript function not working with form tag

user_14994883 0
Viewed 145

The code below works fine without the use of the FORM tag.

But after I add the FORM tag, the code does not work anymore.

My code:

function ismcstop() {
  var chkNo = document.getElementById("radio2_ismcstop");
  var mcnostopreason = document.getElementById("mcnostopreason");
  mcnostopreason.disabled = chkNo.checked ? false : true;
  if (!mcnostopreason.disabled) {
    mcnostopreason.focus();
  }
}
<form action="" method="post">
  <div class="row">
    <div class="col-4">
      <div class="container">
        <label for="ismcstop">Machine Stop?</label>
        <div class="form-check-inline">
          <label class="form-check-label" for="radio1_ismcstop">
                <input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" onclick="ismcstop()" value="Yes">Yes
              </label>
        </div>
        <div class="form-check-inline">
          <label class="form-check-label" for="radio2_ismcstop">
                <input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" onclick="ismcstop()" value="No">No
              </label>
        </div>
      </div>
    </div>
    <div class="col-2">
      <label for="mcnostopreason">If No, Reason:</label>
    </div>
    <div class="col-6">
      <input class="inputstyle-100" id="mcnostopreason" name="" value="" disabled>
    </div>
  </div><br>

</form>

html javascript
2 Answers

Change the name of the label to something else other than ismcstop. I think it is overridden the function.

    <label for="ismcstopLabel">Machine Stop?</label>

OR

Change the function name ismcstop() to ismcstopFunc()

user_150576130

Just rename ismcstop() function name like below

function ismcsfortop() {
        var chkNo = document.getElementById("radio2_ismcstop");
        var mcnostopreason = document.getElementById("mcnostopreason");
        mcnostopreason.disabled = chkNo.checked ? false : true;
        if (!mcnostopreason.disabled) {
            mcnostopreason.focus();
        }
    }
<form action="" method="post">
   <div class="row">
    <div class="col-4">
      <div class="container">
        <label for="ismcstop">Machine Stop?</label>
        <div class="form-check-inline">
          <label class="form-check-label" for="radio1_ismcstop">
            <input type="radio" class="form-check-input" id="radio1_ismcstop" name="ismcstop" onclick="ismcsfortop()" value="Yes">Yes
          </label>
        </div>
        <div class="form-check-inline">
          <label class="form-check-label" for="radio2_ismcstop">
            <input type="radio" class="form-check-input" id="radio2_ismcstop" name="ismcstop" onclick="ismcsfortop()" value="No">No
          </label>
        </div>
      </div>
    </div>
    <div class="col-2">
      <label for="mcnostopreason">If No, Reason:</label>
    </div>
    <div class="col-6">
      <input class="inputstyle-100" id="mcnostopreason" name="" value="" disabled>
    </div>
  </div><br>

</form>

user_117170580
Related