CODEWITHSUNDEEP
javascriptjqueryhtml
Fenz
Fenz

Reputation: 139

How to set empty or null value doesn't worked in Jquery change

I want the value in the input text to be null after the hide process

This is my view :

<div class="form-group row">
  <label for="status" class="col-sm-4 col-form-label col-form-label-sm">Status Karyawan</label>
  <div class="col-sm-8">
    <select id="status" name="status" class="form-control form-control-sm" required>
        <option value="" selected>Pilih Status Karyawan</option>
        <option value="Kontrak">Kontrak</option>
        <option value="Tetap">Tetap</option>
    </select>
  </div>
</div>
<div class="form-group row" id="tgl_pengangkatan" style="display:none">
  <label for="tgl_pengangkatan" class="col-sm-4 col-form-label col-form-label-sm">Tgl. Pengangkatan</label>
  <div class="col-sm-8 input-group">
    <input name="tgl_pengangkatan" type="text" class="form-control datepicker form-control-sm" id="tgl_pengangkatan" placeholder="yyyy-mm-dd" value="">
  </div>
</div>
<div class="form-group row" id="tgl_berakhir_kontrak"  style="display:none">
  <label for="tgl_berakhir_kontrak" class="col-sm-4 col-form-label col-form-label-sm">Tgl. Akhir Kontrak</label>
  <div class="col-sm-8 input-group">
    <input name="tgl_berakhir_kontrak" type="text" class="form-control datepicker form-control-sm" id="tgl_berakhir_kontrak" placeholder="yyyy-mm-dd" value="">
  </div>
</div>

And than, this is my script:

<script>
$(function () {
    $("#status").change(function() {
    var val = $(this).val();
    if(val === "Kontrak") {
        $("#tgl_berakhir_kontrak").show();
        $("#tgl_pengangkatan").hide();
        $("#tgl_pengangkatan").val('');
    }
    else if (val === "Tetap") {
        $("#tgl_pengangkatan").show();
        $("#tgl_berakhir_kontrak").hide();
        $("#tgl_berakhir_kontrak").val('');
    }
    });
});

I want to make it like that to minimize errors in the input process, thanks.

Upvotes: 1

Views: 2278

Answers (1)

display name
display name

Reputation: 4185

The element you are trying to change should be called with its name, not the id. Try changing it as:

$('[name="tgl_berakhir_kontrak"]').val('');

By the way, it's not a good practice to give identical name and id to separate elements on the same page.

Upvotes: 1

Related Questions