CODEWITHSUNDEEP
phpajaxcodeigniter
GSM
GSM

Reputation: 23

Condition in AJAX with multiple variabel

i have code like this : (form input)

<label>Nomor Kartu Keluarga</label>
<select class="custom-select" id="nokk" name="nokk" required="" onkeyup="getortu()">
     <?php
     foreach($nokk->result_array() as $u)
    {
    echo '<option value="'.$u["nokk"].'">'.$u["nokk"].'   -  '.$u["namakepalakeluarga"].'</option>';
     }
     ?>
     </select>
    
    
 <label>Status Hubungan Dalam Keluarga</label>
 <select class="custom-select" id="statushubkeluarga" name="statushubkeluarga" required="" onkeyup="getortu()">
     <?php
     foreach($statushubkeluarga->result_array() as $u)
     {
     echo '<option value="'.$u["id"].'">'.$u["namastatushub"].'</option>';
     }
     ?>
     </select>

     <label>Nama Ayah</label>
      <select class="form-control" id="namaayah" name="namaayah" >
     </select>

And, i want when "statushubkeluarga" == 3, use "AJAX" but when != 3 use input tag, my ajax code:

function getortu(){


            var nokk = $("#nokk").val();
            var statushubkeluarga = $("#statushubkeluarga").val();
            if(statushubkeluarga == 3){

    
            $.ajax({
              url : "<?php echo base_url();?>/MainController/Getnamaayah",
              method : "POST",
              data : {nokk:nokk},
              async : false,
              dataType : 'json',
              success: function(data){
                var html = '';
                var i;

                for(i=0; i<data.length; i++){
                  html += '<option value='+data[i].namakepalakeluarga+'>'+data[i].namakepalakeluarga+'</option>';
                }
                $('#namaayah').html(html);


              }
            });
          }else{

          }
        }

why my ajax code not working? my condition not working so option can't show. Help me.. Thankyou

Upvotes: 2

Views: 135

Answers (2)

Umair Khan
Umair Khan

Reputation: 1752

The problem, it seems, is onkeyup="getortu()". You should be using onchange.

For Details Please see HTML onchange Attribute and ONCHANGE attribute for INPUT elements

function getortu() {


  var nokk = $("#nokk").val();
  var statushubkeluarga = $("#statushubkeluarga").val();
  if (statushubkeluarga == 3) {
    console.log('Send Ajax');
  } else {
    console.log('Do Not Send Ajax');
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Nomor Kartu Keluarga</label>
<select class="custom-select" id="nokk" name="nokk" required="" onchange="getortu()">
  <option value='a'>A</option>
  <option value='b'>B</option>
  <option value='c'>C</option>
</select>

<label>Status Hubungan Dalam Keluarga</label>
<select class="custom-select" id="statushubkeluarga" name="statushubkeluarga" required="" onchange="getortu()">
  <option value='1'>1 Val</option>
  <option value='2'>2 Val</option>
  <option value='3'>3 Val</option>
</select>

<label>Nama Ayah</label>
<select class="form-control" id="namaayah" name="namaayah">
</select>

Upvotes: 2

Shahbaz A.
Shahbaz A.

Reputation: 4356

You are using wrong function. You should use onchange instead of onkeyup.

<select class="custom-select" id="statushubkeluarga" name="statushubkeluarga" required="" onchange="getortu()"></select>


<select class="custom-select" id="statushubkeluarga" name="statushubkeluarga" required="" onchange="getortu()"></select>

Upvotes: 1

Related Questions