Enable disable fields through ajax call

Question

I am working on attendence management for employee. In below attachment there is 3 input fields(one dropdown, 2 calender fields). In dropdown, there are names of employees. In second field their is current date and current checkin time and in third fields there is checkout time of employees. I want,

1) When i select name from dropdown, according to name 2 calender fields are shown. for example , there is name(Ramandeep kaur) in dropdown. i select ramandeep kaur. onselect dropdown value i checked if in table name = 'ramandeep' and date ='current date', then my calender field for checkin will disable and my checkout div will enable. And if my checkin field is empty in database then checkout field will disable. my code is working good but i dont know how calender fields will be enable or disable.

Here is my html

<form id="form_validation" class="uk-form-stacked" method="post" action="code.php">
    <div class="uk-grid" data-uk-grid-margin>

        <div class="uk-width-medium-1-4">

            <div class="parsley-row">

                  <select name="name" id="val_select" class="form control" onChange="getname(this.value);" required>
                    <option value="">Choose..</option>
<?php 
    $employee = mysqli_query($cn, "SELECT * from `pg_employee`");

    while($attendence = mysqli_fetch_array($employee)){
?>

                    <option value="<?php echo $attendence['id']; ?>"><?php echo $attendence['name']; ?></option>
<?php } ?>

                </select>
            </div>
        </div>

            <div class="uk-width-medium-1-4">

                <div class="parsley-row">

                    <div id="datetimepicker" class="input-append date" style="border:#fff;">
                          <input type="md-input" class="form-control" name='check_in' style="padding:4px; border:1px solid #ccc;" value="<?php 
                          $date = date('d-M-Y'); 
                          echo $date;
                          ?>
                          "/></input>
                          <span class="add-on" style="background:#fff;">
                            <i data-time-icon="icon-time" style="font-size:60px;" data-date-icon="icon-calendar"></i>
                          </span>
                    </div>
                </div>
            </div>
            <div class="uk-width-medium-1-4">

                <div class="parsley-row">

                    <div id="datetimepicker2" class="input-append date" style="border:#fff;">
                          <input type="md-input" class="form-control" name="check_out" style="margin-left:20px; padding:4px; border:1px solid #ccc;"></input>
                          <span class="add-on" style="background:#fff;">

                            <i data-time-icon="icon-time" style="font-size:60px;" data-date-icon="icon-calendar"></i>
                          </span>
                    </div>
                </div>
            </div>

             <div class="uk-width-medium-1-4">

                <div class="parsley-row">

                     <button type="submit" name="attendence_date" style="margin-left:40px;" class="md-btn md-btn-primary">Submit</button>

                 <div id="name-list">
                 </div>
            </div>
        </div>

        </div>
        <div class="uk-grid">


        <div class="uk-width-medium-1-5">
            <div class="parsley-row">


            </div>
        </div>

        <div class="uk-width-medium-1-5">

            <div class="parsley-row">

            </div>

        </div>

    </div>

     <?php if($_GET['msg'] && $_GET['msg']=='create'){

            echo"<div style='color:red; text-align:center; font-weight:bold; font-size:16px;'>New record added</div>";

        }?>
      </form>

here is my ajax call code

<script>
function getname(val) {
     $.ajax({
        type: "POST",
        url: "manage_name.php",
        data:'attendence_id='+val,
        success: function(data){
            $("#name-list").html(data);
        }
    });
}
</script>

and here is my manage_name.php file code

 <?php
  date = date("Y-m-d");

 if(!empty($_POST["attendence_id"])) {

 $id = $_POST["attendence_id"];

 $employee = mysqli_query($cn, "SELECT * from `pg_attendence` WHERE emp_name ='$id' AND date ='$date'");
 $zxc = mysqli_num_rows($employee);
 if($zxc > 0){?>

<?php   }
}

?>

Please consider the dangers of SQL injection in manage_name.php — David_001, Oct 18 '16 at 12:03
[Little Bobby](http://bobby-tables.com/) says ***[your script is at risk for SQL Injection Attacks.](http://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php)*** Learn about [prepared](http://en.wikipedia.org/wiki/Prepared_statement) statements for [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php). Even [escaping the string](http://stackoverflow.com/questions/5741187/sql-injection-that-gets-around-mysql-real-escape-string) is not safe! [Don't believe it?](http://stackoverflow.com/q/38297105/1011527) — Jay Blanchard, Oct 18 '16 at 12:04

score 0 · Answer 1 · answered Oct 18 '16 at 12:17

<?php
  date = date("Y-m-d");

 if(!empty($_POST["attendence_id"])) {

 $id = $_POST["attendence_id"];

 $employee = mysqli_query($cn, "SELECT * from `pg_attendence` WHERE emp_name ='$id' AND date ='$date'");
 $zxc = mysqli_num_rows($employee);
 if($zxc > 0){?>
  echo 1;
<?php   }
else {
  echo 0;
}
}

?>

In your ajax callback replace the code

success: function(data){
            if(data == 1) {
                 $(".datetimepicker2 input").attr("disabled", disable);
            }
            else {
                 $(".datetimepicker input").attr("disabled", disable);
            }
}

Enable disable fields through ajax call

1 Answers1