Disable button using Jquery if and else function

Question

Screenshot i want to disable my button using if and else statement. If value on the input text "Tidak Diluluskan" the button disable else text " Proses " the button enable. Here my simple code.. Hope someone can help me figure this out.

<script>
    $(document).ready( function () {
       if(textstatusmodal.value =="Tidak Diluluskan"){
        $('button:submit').attr("disabled", 'disabled');
         }else{
           if(textstatusmodal.value =="Proses"){
             $('button:submit').attr("enable", 'enable');
             }
           }
       }
    });
    // $(this).attr("disabled", "disabled");
    //$(this).removeAttr("disabled");//enable button again
</script

<form method="POST" action="<?php echo $editFormAction; ?>" name="form2" class="form-horizontal">
<fieldset>

 
<input id="textstatusmodal" name="textstatusmodals"  type="type" value="<?php echo $row_p_peribadi_kecemasan['status']; ?>"> 

<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-4 control-label" for="selectbasic">Pilihan</label>
  <div class="col-md-5">
    <select id="selectbasic" name="selectbasic" required class="form-control">
      <option value="">Sila Pilih</option>
      <option value="Batal">Batal</option>
    </select>
  </div>
</div>

<!-- Textarea -->
<div class="form-group">
  <label class="col-md-4 control-label" for="textcatatan">Catatan</label>
  <div class="col-md-4">                     
    <textarea class="form-control" required id="textcatatan" name="textcatatan"></textarea>
  </div>
</div>

      </div>
      <div class="modal-footer">
        <button  id="button3" type="submit" onclick="return confirm('Batal Pegerakan Bagi No Permohonan:<?php echo $row_p_peribadi_kecemasan['nopermohonan']; ?>?')" class="btn btn-success">Kemaskini</button>
        <button id="button4" class="btn btn-info" data-dismiss="modal">Tutup</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

What is "textstatusmodal" here?

Amit Singh
– Amit Singh

2015-11-16 13:59:50 +00:00
Commented Nov 16, 2015 at 13:59 — Amit Singh
– Amit Singh, Commented Nov 16, 2015 at 13:59

Moe · Accepted Answer · 2015-11-17 14:02:28Z

1

What's textstatusmodal in your code? If it's the Id of your text box then using JQuery the code should be something like this:

Add an event to your textbox, assuming onblur in the following snippet.

EDIT

Adding Trim & To Lower Case.

   $(document).ready(function() {
$('#textstatusmodal').blur(function () {
         if($(this).val().toLowerCase().trim() =="tidak diluluskan"){
                $('#button3').attr('disabled', 'disabled');
                 }else{
                   if($(this).val().toLowerCase().trim() =="proses"){
                     $('#button3').removeAttr('disabled');
                     }
                   }
}
    });

Consider adding Trim() and ToLowerCase() in your comparison.

edited Nov 17, 2015 at 14:02

answered Nov 16, 2015 at 14:02

Moe

1,59911 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Khairul Amir Over a year ago

<input id="textstatusmodal" name="textstatusmodals" type="type" value="<?php echo $row_p_peribadi_kecemasan['status']; ?>"> This echo contains value " Tidak Diluluskan" and also "prosess" if user update it. FYI this text input is in the Modal bootstraps

Moe Over a year ago

In that case the above code should work as expected.

Khairul Amir Over a year ago

i try, but it did not work for me. u can see my ScreenShot that i upload. that SS explain what i want to do.

Khairul Amir Over a year ago

i try, but still did not work. i don't why. Or cause i'm using Modal?

Amit Singh Over a year ago

@KhairulAmir: I am pretty sure it's the lack of trim() function, that the proposed solution is not working for you. Add trim() and everything should be fine.

|

Pᴇʜ · Accepted Answer · 2015-11-16 14:43:53Z

0

$(document).ready(function() {
  var btn = document.getElementById("button3");
  if (textstatusmodal.value == "Tidak Diluluskan") {
    btn.disabled=true;
  } else {
    if(textstatusmodal.value == "Proses") {
      btn.disabled=false;
    }
  }
});

edited Nov 16, 2015 at 14:43

Pᴇʜ

57.9k10 gold badges55 silver badges75 bronze badges

answered Nov 16, 2015 at 14:22

Akash Agrawal

294 bronze badges

Comments

Joy Biswas · Accepted Answer · 2015-11-16 14:53:01Z

0

To disable use $('button:submit').prop('disabled', true);

To enable use $('button:submit').prop('disabled', false);

Check snippet below.

function changeState(n){
  var st = $(n).html().trim()=='Enable';
  if(st){
    $(n).html('Disable');
    $('#button3').prop('disabled',false);
  }else{
    $(n).html('Enable');
    $('#button3').prop('disabled',true);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="changeState(this);">Disable</button>
<div class="modal-footer">
  <button  id="button3" type="submit" class="btn btn-success">Kemaskini</button>
  <button id="button4" class="btn btn-info" data-dismiss="modal">Tutup</button>
</div>

edited Nov 16, 2015 at 14:53

answered Nov 16, 2015 at 13:58

Joy Biswas

6,5371 gold badge27 silver badges50 bronze badges

2 Comments

ahervin Over a year ago

Would it not be better to use .removeAttr("disabled");?

Dave Salomon Over a year ago

It should also be .prop('disabled', true), not .prop('disabled','disabled').

Collectives™ on Stack Overflow

Disable button using Jquery if and else function

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related