Agfdhyk

My main problem is that my modal is showing but alert is showing [object Object]. I have four tables like stud,country_master_academic, master_city and master_state.When i click on edit, modal appears but data fetched from database is not showing in it.

jQuery in home.php page

$(document).ready(function(){

             $(document).on('click', '.edit_data', function(event){

               var stud_no = $(this).attr("id");

               $.ajax({  

                    url:"update.php",  

                    method:"POST",  

                    data:{stud_no:stud_no},  

                    dataType:"json",  

                    success:function(data){  

                    console.log(data);

                    $('#name').val(data.name);

                    $('#mob_no').val(data.mob_no);

                    $('#dob').val(data.dob);

                    $('#add').val(data.add);

                    $('#photo').val(data.photo);

                    $('#gender').val(data.gender);

                    $('#country').val(data.country);

                    $('#state').val(data.state);

                    $('#city').val(data.city);

                    $('#stud_no').val(data.stud_no);

                    $('#update_data_modal').modal('show');  





                    },  

                    });     

                });  

    });

Modal for update in home.php page

<div class="container">

<div class="modal fade" id="update_data_modal" role="dialog">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-heading" style="margin-top:30px;text-align:center">

                <button class="close" data-dismiss="modal" style="margin-right:20px;font-weight:bold;">x</button>

                <h4 class="modal-title"><span class="glyphicon glyphicon-edit"></span>Update Student</h4>

            </div>

            <div class="modal-body">

            <?php

                $img = "images/".trim($vrow["photo"]);

                echo '<img src='.$img.' class="image" style="margin-left:75%;margin-top:5%;width:120px;height:120px;border:2px solid #bbbbbb;border-radius:10px;">';

                ?>

                <br/>

                <input type="file" name="photo"  style="margin-left:70%;">

                <div class="form-group">

                <form class="form-horizontal" name="form" id="form" method="post" action="<?php $_PHP_SELF?>" enctype="multipart/form-data">

                    <label for="name" id="name"><span class="glyphicon glyphicon-user"></span><b> Student Name: </b></label>

                    <input type="text" class="form-control" name="name" id="name" pattern="[a-zA-Z]{3,}" title="Name should only contain letters and atleast 3 letters" required />

                </div>

                <div class="form-group">

                    <label for="no"><span class="glyphicon glyphicon-phone"></span><b> Mobile No: </b></label>

                    <input type="text" class="form-control" name="mob_no" id="mob_no" pattern="[0-9]{10}" title="Mobile number should be of 10 digits" required />

                </div>

                <div class="form-group">    

                    <label for="dob"><span class="glyphicon glyphicon-calendar"></span><b> Birth Date: </b></label>

                    <input type="date" class="form-control" name="dob" id="dob" required />

                </div>

                <div class="form-group">

                    <label for="add"><span class="glyphicon glyphicon-map-marker"></span><b> Address: </b></label>

                    <textarea rows="4" cols="33" class="form-control" name="add" id="add" required></textarea>

                </div>

                <div class="form-group">

                    <label for="photo"><span class="glyphicon glyphicon-camera"></span><b> Photo: </b></label>

                    <input type="file" name="photo" id="photo" required />

                </div>

                <div class="form-group">

                    <label for="gen"><b> Gender: </b></label>

                    <input type="radio" name="gender" id="gender" value="M" required="required">Male

                    <input type="radio" name="gender" id="gender" value="F" required="required">Female

                </div>

                <div class="form-group">

                    <label for="cntry"><span class="glyphicon glyphicon-map-marker"></span><b> Country: </b></label>

                <select name="country" id="country" class="form-control">

                <option value="0">Select</option>

                    <?php 

                    $country="SELECT * from country_master_academic";

                    $res= $conn->query($country);

                    if($res->num_rows>0){

                        while($row=$res->fetch_assoc()){        

                        if($row["country_name"]==$vcountry or $vrow['country'] == $row["country_code"] )

                        {   

                                echo '<option value='.$row["country_code"].' selected>'.$row["country_name"].'</option>';

                        }

                            else

                            {

                                echo '<option value='.$row["country_code"].'>'.$row["country_name"].'</option>';

                            }

                        }

                    }

                ?>

                </select>



                </div>

                <div class="form-group">

                        <label for="state"><span class="glyphicon glyphicon-map-marker"></span><b> State: </b></label>

                <select name="state" id="state" class="form-control">

                <option value="0">Select</option>

                    <?php 

                    $state="SELECT * from master_state";

                    $res= $conn->query($state);

                    if($res->num_rows>0){

                        while($row=$res->fetch_assoc()){        

                        if($row["state_name"]==$vstate or $vrow['state'] == $row["state_code"] )

                        {   

                                echo '<option value='.$row["state_code"].' selected>'.$row["state_name"].'</option>';

                        }

                            else

                            {

                                echo '<option value='.$row["state_code"].'>'.$row["state_name"].'</option>';

                            }

                        }

                    }

                ?>

                </select>

                    </div>

                <div class="form-group">

                <label for="city"><span class="glyphicon glyphicon-map-marker"></span><b> City: </b></label>

                <select name="city" id="city" class="form-control">

                <option value="0">Select</option>

                    <?php 

                    $city="SELECT * from master_city";

                    $res= $conn->query($city);

                    if($res->num_rows>0){

                        while($row=$res->fetch_assoc()){        

                        if($row["city_name"]==$vcity or $vrow['city'] == $row["city_code"] )

                        {   

                                echo '<option value='.$row["city_code"].' selected>'.$row["city_name"].'</option>';

                        }

                            else

                            {

                                echo '<option value='.$row["city_code"].'>'.$row["city_name"].'</option>';

                            }

                        }

                    }

                ?>

                </select>

                </div>



                <div class="form-group">

                <input type="hidden" name="stud_no" id="stud_no" />  

                    <button type="submit" name="update" id="update" class="btn btn-info">Update</button>

                </div>

                </form>

            </div>

            <div class="modal-footer">

            <button class="btn btn-danger" type="button" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div> 

update.php page but still i am trying to fetch data, so only wrote code for selecting records from database.

My edit button which is kept in a loop

    echo '<td><button name="edit" style="font-weight:bold;" type="submit" id='.$row["stud_no"].' class="btn btn-warning edit_data" data-target="#update_data_modal" data-toggle="modal"><span class="glyphicon glyphicon-edit"></span> Edit</button></td>';

As shown in the snapshot, your object has numeric indexes hence data.photo will not return anything as there is no index photo in your object.

You can access image name by using data[5].

Similarly you can get any index value.

Like for name instead of using data.name you need to use data[1]

So your code would be something like this:

$('#name').val(data[1]);

$('#mob_no').val(data[2]);

$('#dob').val(data[3]);

$('#add').val(data[4]);

$('#photo').val(data[5]);

Also you have given same ids for labels and inputs:

<label for="name" id="name">

You need to remove id from all labels:

<label for="name">

Change in your html as below.

<div class="form-group">

    <label for="gen"><b> Gender: </b></label>

    <input type="radio" name="gender" id="genderMale" value="M" required="required">Male

    <input type="radio" name="gender" id="genderFemale" value="F" required="required">Female

</div>

Add this code in your ajax success.

if(data[6] == 'M')

{

    $("#genderMale").prop("checked", true);

} else if(data[6] == 'F') {

    $("#genderFemale").prop("checked", true);

}

For image file you can use as below in your html

<div class="form-group">

    <img id="resultedPhoto">

    <label for="photo"><span class="glyphicon glyphicon-camera"></span><b> Photo: </b></label>

    <input type="file" name="photo" id="photo" required />

</div>

Add below code in ajax success

$("#resultedPhoto").attr("src","/path-to-your-folder/" + data[5]);

Now when i click on edit Modal is not opening and database value is getting empty
another jquery

    $(document).ready(function(){

        $("#form1").submit(function(event){

            event.preventDefault();

            var formData = new FormData(this);

              $.ajax({

                 url:"upresult.php",

                 type:"POST",

                 data:{formData:formData},

                 async:false,

                 success:function(data) {

                   alert(data);

                    location.reload();

                },

                cache:false,

                contentType:false,

                processData:false

            });

         });



    });

upresult.php

    <?php

    include("connection.php");

    if(!empty($_POST)){

    $no=$_POST['stud_no'];

    $name=trim($_POST['name']);

    $mob=trim($_POST['mob_no']);

    $dob=trim($_POST['dob']);

    $add=trim($_POST['add']);

    $photo=trim($_FILES['photo']['name']);

    $gen=trim($_POST['gender']);

    $cn=trim($_POST['country']);

    $st=trim($_POST['state']);

    $ct=trim($_POST['city']);



    $qry="update stud set stud_name='$name',mobile='$mob',dob='$dob',address='$add',gender='$gen',country='$cn',state='$st',city='$ct' where stud_no='$no'";

    $data=mysqli_query($conn,$qry);

    if($data)

    {

        echo '<script language="javascript">';

        echo 'alert("Updated Successfully")';

        echo '</script>';

    }

    else {

        echo '<script language="javascript">';

        echo 'alert("Cannot update record")';

        echo '</script>';

    }

    if(!empty($_FILES['photo']['name'])){

    $qry1= "update stud set photo='$photo' where stud_no='$no'";

    $data1=mysqli_query($conn,$qry1);



    if($data1){

        $target_dir="images/";

            $target_file=$target_dir.basename($_FILES["photo"]["name"]);

            $imageFileType=pathinfo($target_file,PATHINFO_EXTENSION);

            if(move_uploaded_file($_FILES["photo"]["tmp_name"],$target_file)){

                echo '<script language="javascript">';

                echo 'alert("Image upload successfully")';

                echo '</script>';



            }  else {

                echo '<script language="javascript">';

                echo 'alert("Cannot Upload")';

                echo '</script>';

            }

    }

}



}