Jump to content

Retrive data from database and display in table based on month selection

Senthilkumar

By Senthilkumar
in PHP Coding Help

 Share
Go to solution Solved by Senthilkumar,

Recommended Posts

Senthilkumar Advanced Member

Senthilkumar

Posted
Posted

Dear Team,

I have a table that I use to store the values and then submit them in final form month by month. Depending on the month selected, I want to retrieve the previously saved data and display the results in a table.

It should show blank values if the final submission for that particular month has been made.

The table should initially be empty while the page is loading.

My table is  

<form method="post" action="" enctype="multipart/form-data">
                <div class="date">
                    Month of the Submission:
                    <input type="month" name="Month" id="Month" onchange="myFunction1()" min="<?php echo $previous_month; ?>" max="<?php echo $current_month; ?>" required style="width:auto;border:solid; border-color:black;font-family:Cambria;border-radius:5px;height:30px" />
                    <input type="text" name="employeeno" id="employeeno" hidden value="<?php echo $Emp_No; ?>" />
                    
                </div>
                <div class="tbl-header">

                    <table cellpadding="0" cellspacing="0" border="0">
                        <thead>
                            <tr>
                                <th align='center' style="width:4%">S.No</th>
                                <th style="width:25%">Description</th>
                                <th style="width:25%">Ratings</th>
                                <th style="width:8%">Target</th>
                                <th style="width:8%">Actual</th>
                                <th style="width:17%">Date of Submission</th>
                                <th style="width:17%">Remarks</th>
                                <th style="width:19%">Document</th>
                            </tr>
                        </thead>
                    </table>
                </div>

                <div class="tbl-content">

                    <table cellpadding="0" cellspacing="0" border="0">
                        <tbody>

                            <?php

                            $n  =   1;
                            while($row  =   mysqli_fetch_assoc($result)){
                                $ID= $row['Ass_ID'];
                                $Name = $row['User_Name'];
                                $Ass_Description = $row['Ass_Description'];
                                $Ass_Marks = $row['Ass_Marks'];
                                $Ass_Assigned = $row['Ass_Assigned'];
                                $Emp_No = $row['User_EMp_No'];
                                $mandatory = $row['Mandatory'];

                                if($mandatory == 'Yes'){
									$man = '*';
								}else {
                                    $man = '';
								}                             

					?>
                            <tr>
                                <td align='center' style="width:4%">
                                    <?php echo $n++; ?>
                                </td>
                                <td style="width:25%">
                                    <?php echo $Ass_Description; ?>
                                </td>
                                <td hidden align='center' style="width:5%">
                                    <input type="text" name="description[]" id="Ass_Description" value="<?php echo $Ass_Description; ?>" class="tbl-input-cus" tabindex="1" />
                                </td>
                                <td style="width:25%">
                                    <?php echo $Ass_Marks; ?>
                                </td>
                                <td hidden align='center' style="width:5%">
                                    <input type="text" name="rating[]" id="Ass_Marks" value="<?php echo $Ass_Marks; ?>" class="tbl-input-cus" />
                                </td>
                                <td align='center' style="width:8%">
                                    <input type="text" name="target[]" id="target" class="tbl-input-cus" value="1" />
                                </td>
                                <td align='center' style="width:8%">
                                    <input type="number" name="actual[]" id="actual" min="-1" max="1" step="0.01" value="" class="tbl-input-cus" />
                                </td>
                                <td align='center' style="width:17%">
                                    <input type="date" name="date[]" id="date" value="" class="tbl-input-cus" />
                                </td>
                                <td align='center' style="width:17%">
                                    <input type="text" name="remarks[]" id="remarks" value="" class="tbl-input-cus1" />
                                </td>
                                <td align='center' style="width:19%">

                                    <input type="file" name="file[]" id="file" accept=".jpg, .jpeg, .png, .pdf, .xlsx" value="" class="tbl-input-cus1 " />

                                    <a href=" http://localhost:63640/<?php echo $Directory; ?>/<?php echo $Document; ?>" target="_blank">
                                        <?php echo $Document; ?>
                                    </a>
                                </td>
                                <td hidden align='center' style="width:10%">
                                    <input type="checkbox" checked="checked" class="checkbox" name='lang[]' value="<?php echo $ID; ?>" />
                                </td>
                            </tr>
                            <?php
                            }

                            ?>
                        </tbody>
                    </table>


                </div>

                <div class="row">

                    <div class="padding">
                        <button type="submit" name="save" value="Submit" class="btn">Save</button>
                    </div>>
                    <div class="padding">
                        <button type="submit" name="submit" value="Submit" class="btn"> Final Submit</button>
                    </div>
                </div>
            </form>

My script for retrive data from databse is  

<script>
        function myFunction1() {
            var month = document.getElementById("Month").value;
            var employeeid = document.getElementById("employeeno").value;

            $.ajax({
                type: 'get',
                dataType: 'JSON',
                url: 'Mykra_view.php',
                data: 'Month=' + month + '&employeeno=' + employeeid,
                success: function (response) {
                    var len = response.length;
                    for (var i = 0; i < len; i++) {
                        var Ass_Description = response[i].Ass_Description;
                        var Ass_Marks = response[i].Ass_Marks;
                        var target = response[i].target;
                        var actual = response[i].actual;
                        var date = response[i].date;
                        var remarks = response[i].remarks;
                        var file = response[i].file;

                            $("#Ass_Description").html(Ass_Description);
                            $("#Ass_Marks").html(Ass_Marks);
                            $("#target").html(target);
                            $("#actual").html(actual);
                            $("#date").html(date);
                            $("#remarks").html(remarks);
                            $("#file").html(file);
                    }
                }
            });
                
            
        }
    </script>

 

Mykra_view.php is 

<?php

include("../connection.php");
if(isset($_GET['Month'])){
    $Month = $_GET['Month'];
    $Employeeid = $_GET['employeeno'];


    $query = "SELECT* FROM mykra where Month= '$Month' AND Engg_No = '$Employeeid' AND Status = '0'";
    $result = mysqli_query($conn, $query);
    while ($row = mysqli_fetch_array($result)) {

        $Ass_Description = $row['Point_Description'];
        $Ass_Marks = $row['Point_Marks'];
        $target = $row['Marks_Target'];
        $actual = $row['Marks_Actual'];
        $date = $row['DOS'];
        $remarks = $row['Marks_Description'];

        $return_arr[] = array(
            "Ass_Description" => $Ass_Description,
            "Ass_Marks" => $Ass_Marks,
            "target" => $target,
            "actual" => $actual,
            "date" => $date,
            "remarks" => $remarks
        );
    }

    echo json_encode($return_arr);

}

with above code, when i am selecting month, Mykra_view.php is running and fetch the data from database. But it is not displaying table. Can any one please help me to clear this problem.

Link to comment
Share on other sites
mac_gyver Prolific Member

mac_gyver

Posted
Posted (edited)

i don't think anyone understands, based on the description, what the overall work flow is. could you describe or show what the user should see at each step.

you state the html table should be empty while the page is loading, but you show php code looping over the result of some not-shown query producing that html table output. if the purpose of this php code is to produce a 'template', which the ajax success code is supposed to populate with values, you need to tell us? you would also not use a loop. you would only output one instance of the markup. the only thing i can tell you based on the posted attempt is what has been written in your threads before, you cannot repeat ids in the markup. all the code like - id="Ass_Description" will not work when there is more than one instance on a page. you need to use the technique from the last thread, where class names are used, then you use the .find() method to reference each element.

Edited by mac_gyver
  • Like 1
Link to comment
Share on other sites
Drummin Member

Drummin

Posted
Posted (edited)

Hey I might be a bit old school and to me using submit button to send the month works just fine in many cases. That being said A little jquery and a 'keyup' function can also be used to send that month value to the page based on the input ID. 

$('#Month').bind('keyup', function() {

} );

You can then get the min max attributes from this input like so. 

var max = parseInt($(this).attr('max'));
var min = parseInt($(this).attr('min'));

You can then write an IF condition comparing the Month input value against these min max variables so that an Action can be taken IF this condition is true. Then by adding an ID to the <form> tag, 

<form method="post" id="monthform" action="" enctype="multipart/form-data">

this allows you to submit the form. 

<script type="text/javascript">	
	$('#Month').bind('keyup', function() {
	
		var max = parseInt($(this).attr('max'));
		var min = parseInt($(this).attr('min'));
		if ($(this).val() >= min && $(this).val() <= max)
		{
			$('#monthform').submit();
		}
	
	} );			
</script>

I will note that a form submit button should never be named "submit" and would prohibit this code from working so I renamed your button to "finalsubmit". 

<button type="submit" name="finalsubmit" value="Submit" class="btn"> Final Submit</button>

Now that the month value can be submitted you can pick that up with php but before using it I would again check the value against your min and max values. As $Emp_Num is defined already on the page I would not pass this value with the form and simply make sure it is not empty.  All in all the IF condition looks like this. 

if($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['Month']) && $_POST['Month'] >= $previous_month && $_POST['Month'] <= $current_month && !empty($Emp_Num)):

endif;

You should bind user input when making a query to the database.  This usually starts by putting placeholders where the values would go.  In this case question marks. 

$sql = "SELECT * FROM mykra WHERE Month = ? AND Engg_No = ? AND Status = '0'";

We prepare the statement and I am assuming that the Engg_No are integers so we will bind both values as 'i' , execute and get the result. 

if($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['Month']) && $_POST['Month'] >= $previous_month && $_POST['Month'] <= $current_month && !empty($Emp_Num)):

	$sql = "SELECT * FROM mykra WHERE Month = ? AND Engg_No = ? AND Status = '0'";
	$query = $con->prepare($sql);		
	$query->bind_param("ii",$_POST['Month'], $Emp_Num); 		
	$query->execute();
	$result = $query->get_result();

endif;

Down within your display table I would wrap your WHILE section in an IF condition 

if(!empty($result)):

endif;

I would NOT define variables for each field but instead use the $row['fieldname'] in the display.  I also would not go back and forth between html and php and instead put the row in a single quote echo like so.  I may or may not have gotten all your fields right but you get the idea. 

<?php
if(!empty($result)):
    $n  =   1;
    while($row  =   mysqli_fetch_assoc($result)){
        echo '<tr>
            <td style="text-align:center; width:4%">'.$n++.'</td>
            <td style="width:25%"><input type="text" name="description[]" id="AssDescription" value="'.$row['Point_Description'].'" class="tbl-input-cus" tabindex="1" /></td>
            <td style="width:25%"><input type="text" name="rating[]" id="Ass_Marks" value="'.$row['Point_Marks'].'" class="tbl-input-cus" /></td>
            <td style="text-align:center; width:8%"><input type="text" name="target[]" id="target" class="tbl-input-cus" value="1" /></td>
            <td style="text-align:center; width:8%"><input type="number" name="actual[]" id="actual" min="-1" max="1" step="0.01" value="'.$row['Marks_Actual'].'" class="tbl-input-cus" /></td>
            <td style="text-align:center; width:17%"><input type="date" name="date[]" id="date" value="'.$row['DOS'].'" class="tbl-input-cus" /></td>
            <td style="text-align:center; width:17%"><input type="text" name="remarks[]" id="remarks" value="" class="tbl-input-cus1" /></td>
            <td style="text-align:center; width:19%">
                <input type="file" name="file[]" id="file" accept=".jpg, .jpeg, .png, .pdf, .xlsx" value="" class="tbl-input-cus1 " />
                <a href="http://localhost:63640/'.$Directory.'/'.$row['file'].'" target="_blank">'.$row['file'].'</a>
            </td>
        </tr>';            
    }
endif;
?>

 

After making these changes I can then enter a month number within the min max range and matching records will be displayed.

 

selectmonth.png

Edited by AKADRUMMIN
Added image
Link to comment
Share on other sites
Drummin Member

Drummin

Posted
Posted

Just noting that I added a hidden input holding the record ID so it can be used for making the update plus the value for the Remarks input. 

echo '<tr>
    <td style="text-align:center; width:4%">'.$n++.'</td>
    <td style="width:25%"><input type="text" name="description[]" id="AssDescription" value="'.$row['Point_Description'].'" class="tbl-input-cus" tabindex="1" /></td>
    <td style="width:25%"><input type="text" name="rating[]" id="Ass_Marks" value="'.$row['Point_Marks'].'" class="tbl-input-cus" /></td>
    <td style="text-align:center; width:8%"><input type="text" name="target[]" id="target" class="tbl-input-cus" value="1" /></td>
    <td style="text-align:center; width:8%"><input type="number" name="actual[]" id="actual" min="-1" max="1" step="0.01" value="'.$row['Marks_Actual'].'" class="tbl-input-cus" /></td>
    <td style="text-align:center; width:17%"><input type="date" name="date[]" id="date" value="'.$row['DOS'].'" class="tbl-input-cus" /></td>
    <td style="text-align:center; width:17%"><input type="text" name="remarks[]" id="remarks" value="'.$row['Marks_Description'].'" class="tbl-input-cus1" /></td>
    <td style="text-align:center; width:19%">
        <input type="file" name="file[]" id="file" accept=".jpg, .jpeg, .png, .pdf, .xlsx" value="" class="tbl-input-cus1 " />
        <a href="http://localhost:63640/'.$Directory.'/'.$row['file'].'" target="_blank">'.$row['file'].'</a>
        <input type="hidden" name="record_id[]" value="'.$row['id'].'" />
    </td>
</tr>';

 

Link to comment
Share on other sites
Senthilkumar Advanced Member

Senthilkumar

Posted
  • Author
Posted

Hi 

The bellow is my table. While page is loading, initially the Actual, Dote of Submission, Remarks and documents will be display empty. 

image.thumb.png.226f9266bfc5f4f48ac5a3250f86ac8d.png

If the data is exist on database and meets my condition ( $query = "SELECT* FROM mykra where Month= '$Month' AND Engg_No = '$Employeeid' AND Status = '0'";) it should display the Actual, Dote of Submission, Remarks and documents values on the same table. 

 My table is  

<div class="body" style="margin-top:2%">
            <form method="post" action="" enctype="multipart/form-data">
                <div class="date">
                    Month of the Submission:
                    <input type="month" name="Month" id="Month" onchange="viewData()" min="<?php echo $previous_month; ?>" max="<?php echo $current_month; ?>" required style="width:auto;border:solid; border-color:black;font-family:Cambria;border-radius:5px;height:30px" />
                    <input type="text" name="employeeno" id="employeeno" hidden value="<?php echo $Emp_No; ?>" />
                    
                </div>
                <div class="tbl-header">

                    <table cellpadding="0" cellspacing="0" border="0">
                        <thead>
                            <tr>
                                <th align='center' style="width:4%">S.No</th>
                                <th style="width:25%">Description</th>
                                <th style="width:25%">Ratings</th>
                                <th style="width:8%">Target</th>
                                <th style="width:8%">Actual</th>
                                <th style="width:17%">Date of Submission</th>
                                <th style="width:17%">Remarks</th>
                                <th style="width:19%">Document</th>
                            </tr>
                        </thead>
                    </table>
                </div>

                <div class="tbl-content">

                    <table cellpadding="0" cellspacing="0" border="0">
                        <tbody>

                            <?php

                            $n  =   1;
                            while($row  =   mysqli_fetch_assoc($result)){
                                $ID= $row['Ass_ID'];
                                $Name = $row['User_Name'];
                                $Ass_Description = $row['Ass_Description'];
                                $Ass_Marks = $row['Ass_Marks'];
                                $Ass_Assigned = $row['Ass_Assigned'];
                                $Emp_No = $row['User_EMp_No'];
                                $mandatory = $row['Mandatory'];

                                if($mandatory == 'Yes'){
									$man = '*';
								}else {
                                    $man = '';
								}



                                $query3=mysqli_query($conn,"SELECT * FROM mykra WHERE Engg_No = '$Emp_No' AND Month = '$Mon' AND Row_id = '$ID' AND Status = 0 ");
                                $row1  =   mysqli_fetch_assoc($query3);
                                $Marks_Target = $row1['Marks_Target'];
                                $Marks_Actual = $row1['Marks_Actual'];
                                $Marks_Description = $row1['Marks_Description'];
                                $DOS = $row1['DOS'];
                                $Document = $row1['Document'];
                                $Directory = $row1['Directory'];


                                if($Marks_Target == ''){
                                    $target = '1';
                                }else{
                                    $target = $Marks_Target;
                                }


                            ?>
                            <tr>
                                <td align='center' style="width:4%">
                                    <?php echo $n++; ?>
                                </td>
                                <td style="width:25%">
                                    <?php echo $Ass_Description; ?>
                                </td>
                                <td hidden align='center' style="width:5%">
                                    <input type="text" name="description[]" id="Ass_Description" value="<?php echo $Ass_Description; ?>" class="tbl-input-cus" tabindex="1" />
                                </td>
                                <td style="width:25%">
                                    <?php echo $Ass_Marks; ?>
                                </td>
                                <td hidden align='center' style="width:5%">
                                    <input type="text" name="rating[]" id="Ass_Marks" value="<?php echo $Ass_Marks; ?>" class="tbl-input-cus" />
                                </td>
                                <td align='center' style="width:8%">
                                    <input type="text" name="target[]" id="target" class="tbl-input-cus" value="1" />
                                </td>
                                <td align='center' style="width:8%">
                                    <input type="number" name="actual[]" id="actual" min="-1" max="1" step="0.01" value="" class="tbl-input-cus" />
                                </td>
                                <td align='center' style="width:17%">
                                    <input type="date" name="date[]" id="date" value="" class="tbl-input-cus" />
                                </td>
                                <td align='center' style="width:17%">
                                    <input type="text" name="remarks[]" id="remarks" value="" class="tbl-input-cus1" />
                                </td>
                                <td align='center' style="width:19%">

                                    <input type="file" name="file[]" id="file" accept=".jpg, .jpeg, .png, .pdf, .xlsx" value="" class="tbl-input-cus1 " />

                                    <a href=" http://localhost:63640/<?php echo $Directory; ?>/<?php echo $Document; ?>" target="_blank">
                                        <?php echo $Document; ?>
                                    </a>
                                </td>
                                <td hidden align='center' style="width:10%">
                                    <input type="checkbox" checked="checked" class="checkbox" name='lang[]' value="<?php echo $ID; ?>" />
                                </td>
                            </tr>
                            <?php
                            }

                            ?>
                        </tbody>
                    </table>


                </div>
                <p style="text-align:center; color:red">
                    <b>Note:</b> Before clicking Final Submit, first click <b>Save</b> then click <b>Preview</b> and finally <b>Final Submit</b>.
                </p>
                <div class="row">

                    <div class="padding">
                        <button type="submit" name="save" value="Submit" class="btn">Save</button>
                    </div>
                    <div class="padding">
                        <!--<a class="btn" popup-open="popup-1" name="preview" href="javascript:void(0)" >Preview</a>-->
                        <!-- <button type="submit" name="preview" value="Submit" class="btn">Preview</button>-->
                        <!-- <a class="link"  onclick="document.getElementById('id02').style.display='block'">View</a>-->
                        <a class="btn" href="#?edit=<?php echo $id ; ?>,<?php echo $min ; ?>" onclick="getProfileData('<?=$id?>', '<?=$min?>')">Preview</a>

                    </div>
                    <div class="padding">
                        <button type="submit" name="submit" value="Submit" class="btn"> Final Submit</button>
                    </div>
                </div>
            </form>

        </div>

 

My month change Jquery is  

<script>

        function viewData() {
            var month = document.getElementById("Month").value;
            var employeeid = document.getElementById("employeeno").value;
          
                $.ajax({
                    type: 'get',
                    dataType: 'JSON',
                    url: 'Mykra_view.php',
                    data: 'Month=' + month + '&employeeno=' + employeeid,
                    success: function (response) {
                        var len = response.length;
                        for (var i = 0; i < len; i++) {
                            var Ass_Description = response[i].Ass_Description;
                            var Ass_Marks = response[i].Ass_Marks;
                            var target = response[i].target;
                            var actual = response[i].actual;
                            var date = response[i].date;
                            var remarks = response[i].remarks;
                            var file = response[i].file;

                                  
                                    document.getElementById("Ass_Description").value = Ass_Description;
                                    document.getElementById("Ass_Marks").value = Ass_Marks;
                                    document.getElementById("target").value = target;
                                    document.getElementById("actual").value = actual;
                                    document.getElementById("date").value = date;
                                    document.getElementById("remarks").value = remarks;
                                    document.getElementById("file").value = file;
                        }


                    }
                });


        };
        
    </script>

my Mykraview.php is  

<?php

include("../connection.php");
if(isset($_GET['Month'])){
    $Month = $_GET['Month'];
    $Employeeid = $_GET['employeeno'];


    $query = "SELECT* FROM mykra where Month= '$Month' AND Engg_No = '$Employeeid' AND Status = '0'";
    $result = mysqli_query($conn, $query);
    while ($row = mysqli_fetch_array($result)) {

        $Ass_Description = $row['Point_Description'];
        $Ass_Marks = $row['Point_Marks'];
        $target = $row['Marks_Target'];
        $actual = $row['Marks_Actual'];
        $date = $row['DOS'];
        $remarks = $row['Marks_Description'];

        $return_arr[] = array(
            "Ass_Description" => $Ass_Description,
            "Ass_Marks" => $Ass_Marks,
            "target" => $target,
            "actual" => $actual,
            "date" => $date,
            "remarks" => $remarks
        );
    }

    echo json_encode($return_arr);

}
?>

With these above code when i am selecting the month, if data is exist it will displaying the values on first row only.

Remaining rows are not displaying. Plesae help me. 

image.thumb.png.ef8163e0c6fac46370ab826a29108263.png

My databse is looks 

image.thumb.png.265b75c9c351156539712a3ef556502f.png

Link to comment
Share on other sites
kicken Prolific Member

kicken

Posted
Posted

You are setting the values by ID, but IDs must be unique within a document, referring to only a single element.

You need to find the row that the data needs to be associated with, then set the values to the inputs in that row using something like querySelector and a class name.

I think the first question to ask is how do you determine which row to associate the data with?

Link to comment
Share on other sites
Drummin Member

Drummin

Posted
Posted (edited)
Quote

While page is loading, initially the Actual, Dote of Submission, Remarks and documents will be display empty. 

Where is the code where $Mon is defined?

AND where is the query that shows the records before the month is selected?  Wouldn't that look something like 

SELECT * FROM mykra WHERE Engg_No = '$Emp_No' AND Status = 0

What is the purpose of querying the same table twice?

I have not been able to get your code to work... I am not sure what files are required or where my tests are failing.   There seems to be many fields I am missing like Ass_ID and User_Name etc.

--

I recall doing something like this years ago with JS where I had a hidden input in the form defined by class that held an array of the record ids populated when building the form, which JS could then pick up by class.  I also added the record ID to each of the input ids in the form, for example.  

 id="Ass_Description<?php echo $row['id']; ?>"

Then in the JS I looped through the array of ids and appended the name of the ids.  Something like this. 

var Ass_Description_key = 'Ass_Description'+id;							
document.getElementById(Ass_Description_key).value = Ass_Description;

ANYWAY, that was many years ago and I am sure there are better ways to do things now days.

Edited by AKADRUMMIN
typo
Link to comment
Share on other sites
mac_gyver Prolific Member

mac_gyver

Posted
Posted

your database design is not normalized. this results in repeating the same data values over and over. you should have a column for, and store the Ass_ID value in the mykra table, instead of repeating the 'Point_Description' and 'Point_Marks' values in every row in that table. doing this will also simplify and help secure the form code, since you will no longer be passing the description[] and rating[] fields through the form, and it will simplify the ajax related code.

some points about the code -

  1. you need to stop copying variables to other variables for nothing. this is just a waste of your time typing. just use the original variables that data is in.
  2. you need to go through the code and eliminate all the unused code and unused variables.
  3. an empty action='' attribute is not valid html5. to cause a form to submit to the same page it is on, leave out the entire action attribute.
  4. you cannot set the value attribute of a type='file' field, so you might as well remove that from the ajax code (you aren't setting a 'file' value in the json data, so that code wasn't doing anything anyways.) you would want to build/output the href link using directory/document data.
  5. if there is a validation/user error in the post method form processing code, the form fields need to be 'sticky' and repopulate their values with any existing form data, so that the user doesn't need to keep reentering/editing values over and over.
  6. you havn't posted it yet, but the insert/update query (there's a single query to do this) could result in duplicate data. you need to handle this in the code and setup an error message for the user letting them know what was wrong with the data that they submitted, so that they can modify the offending value and resubmit the data again.
  7. you need to validate the resulting web pages at validator.w3.org

as to getting this to work, the Ass_ID value is the 'key' to finding the correct <tr> row of form inputs to operate on. it is also the 'key' to inserting/updating the correct rows of data in the database table when the form is submitted.

in the html table/form code, you need a hidden array field with the Ass_ID values in it. this will let you associate the submitted Ass_ID values with the corresponding data from the other form array fields. you also need a way of referencing the <tr> for each row. to do this add an id='...' attribute, such as - 

<tr id='<?='Aid_'.$row['Ass_ID']?>'>

in the Mykra_view.php code, you need to build the json data with the Ass_ID value, such as - 

		$return_arr[] = array(
		'Aid' => $row['Ass_ID'], // add the Ass_ID to the json data
		"target" => $row['Marks_Target'],
		"actual" => $row['Marks_Actual'],
		"date" => $row['DOS'],
		"remarks" => $row['Marks_Description']
		);

then in the ajax success code, you would get the Aid value and use it to select/find the correct form field value to set with the data - 

<script>
function viewData() {
	var month = document.getElementById("Month").value;
	var employeeid = document.getElementById("employeeno").value;

	$.ajax({
		type: 'get',
		dataType: 'JSON',
		url: 'Mykra_view.php',
		data: 'Month=' + month + '&employeeno=' + employeeid,
		success: function (response) {
			var len = response.length;
			for (var i = 0; i < len; i++) {
				
				var Aid = response[i].Aid;
				var target = response[i].target;
				var actual = response[i].actual;
				var date = response[i].date;
				var remarks = response[i].remarks;

				$('#Aid_'+Aid).find('.target').val(target);
				$('#Aid_'+Aid).find('.actual').val(actual);
				$('#Aid_'+Aid).find('.date').val(date);
				$('#Aid_'+Aid).find('.remarks').val(remarks);
			}
		}
	});
}
</script>

to make the above work, like in your previous thread, you would change the id='...' attributes to class='...' attributes (you would actually add the class names to the existing class='...' attributes.)

  • Like 1
Link to comment
Share on other sites
Drummin Member

Drummin

Posted
Posted (edited)

Yes, I like mac_gyver's version is better and he makes MANY good suggestions.  Just to follow up this is what I was talking about. 

<script>

	function viewData() {
		var month = document.getElementById("Month").value;
		var employeeid = document.getElementById("employeeno").value; 
		var ids = document.getElementsByClassName("ids"); 
		
		$.ajax({
			type: 'get',
			dataType: 'JSON',
			url: 'Mykra_view.php',
			data: 'Month=' + month + '&employeeno=' + employeeid,
			success: function (response) {
				var len = response.length; 
				//alert(len);
				if (ids.length > 0) {
					for (var k = 0; k < ids.length; k++) {
						var id = ids[k].value; 
						for (var i = 0; i < len; i++) {	
						
							if(response[i].Ass_ID == id){
								var Ass_ID = response[i].Ass_ID;
								var Ass_Description = response[i].Ass_Description;
								var Ass_Marks = response[i].Ass_Marks;
								var target = response[i].target;
								var actual = response[i].actual;
								var date = response[i].date;
								var remarks = response[i].remarks;
								var file = response[i].file;
								
								var Ass_Description_key = 'Ass_Description'+id;
								var Ass_Marks_key = 'Ass_Marks'+id;
								var target_key = 'target'+id;
								var actual_key = 'actual'+id;
								var date_key = 'date'+id;
								var remarks_key = 'remarks'+id;
								
								document.getElementById(Ass_Description_key).value = Ass_Description;							
								document.getElementById(Ass_Marks_key).value = Ass_Marks;
								document.getElementById(target_key).value = target;
								document.getElementById(actual_key).value = actual;
								document.getElementById(date_key).value = date;
								document.getElementById(remarks_key).value = remarks;
							
							}// if(response[i].Ass_ID == id)									
						}// for (var i 				
					}// for (var k
				}//if (ids.length > 0)
			}
		});
	};

</script>

A quick edit of your version to make it work. 

<form method="post" action="" enctype="multipart/form-data">
    <div class="date">
        Month of the Submission:
        <input type="month" name="Month" id="Month" onchange="viewData()" min="<?php echo $previous_month; ?>" max="<?php echo $current_month; ?>" required style="width:auto;border:solid; border-color:black;font-family:Cambria;border-radius:5px;height:30px" />
        <input type="text" name="employeeno" id="employeeno" hidden value="<?php echo $Emp_No; ?>" />
        
    </div>

        <table cellpadding="0" cellspacing="0" border="0">
            <thead>
                <tr>
                    <th align='center' style="width:4%">S.No</th>
                    <th style="width:25%">Description</th>
                    <th style="width:25%">Ratings</th>
                    <th style="width:8%">Target</th>
                    <th style="width:8%">Actual</th>
                    <th style="width:17%">Date of Submission</th>
                    <th style="width:17%">Remarks</th>
                    <th style="width:19%">Document</th>
                </tr>
            </thead>
            <tbody>

                <?php

                $n  =   1;	
$result=mysqli_query($conn,"SELECT * FROM mykra WHERE Engg_No = '$Emp_No' AND Status = 0 ");
                while($row  =   mysqli_fetch_assoc($result)){ 

                    $ID= $row['Ass_ID'];
                    $Name = $row['User_Name'];
                    $Ass_Description = $row['Point_Description'];
                    $Ass_Marks = $row['Point_Marks'];
                    $Ass_Assigned = $row['Marks_Target'];
                    $Emp_No = $row['User_EMp_No'];
                    $mandatory = $row['Mandatory'];

                    if($mandatory == 'Yes'){
$man = '*';
}else {
                        $man = '';
}



                ?>
                <tr>
                    <td align='center' style="width:4%">
                        <?php echo $n++; ?>
                    </td>
                    <td style="width:25%">
                        <?php echo $Ass_Description; ?>
                    </td>
                    <td hidden align='center' style="width:5%">
                        <input type="text" name="description[]" id="Ass_Description<?php echo $row['Ass_ID']; ?>" value="<?php echo $Ass_Description; ?>" class="tbl-input-cus" tabindex="1" />
                    </td>
                    <td style="width:25%">
                        <?php echo $Ass_Marks; ?>
                    </td>
                    <td hidden align='center' style="width:5%">
                        <input type="text" name="rating[]" id="Ass_Marks<?php echo $row['Ass_ID']; ?>" value="<?php echo $Ass_Marks; ?>" class="tbl-input-cus" />
                    </td>
                    <td align='center' style="width:8%">
                        <input type="text" name="target[]" id="target<?php echo $row['Ass_ID']; ?>" class="tbl-input-cus" value="1" />
                    </td>
                    <td align='center' style="width:8%">
                        <input type="number" name="actual[]" id="actual<?php echo $row['Ass_ID']; ?>" min="-1" max="1" step="0.01" value="" class="tbl-input-cus" />
                    </td>
                    <td align='center' style="width:17%">
                        <input type="date" name="date[]" id="date<?php echo $row['Ass_ID']; ?>" value="" class="tbl-input-cus" />
                    </td>
                    <td align='center' style="width:17%">
                        <input type="text" name="remarks[]" id="remarks<?php echo $row['Ass_ID']; ?>" value="" class="tbl-input-cus1" />
                    </td>
                    <td align='center' style="width:19%">
                        <input type="file" name="file[]" id="file" accept=".jpg, .jpeg, .png, .pdf, .xlsx" value="" class="tbl-input-cus1 " />
                        <a href=" http://localhost:63640/<?php echo $Directory; ?>/<?php echo $Document; ?>" target="_blank">
                            <?php echo $Document; ?>
                        </a>
<input type="hidden" class="ids" name='lang[]' value="<?php echo $row['Ass_ID']; ?>" />
                    </td>
                </tr>
                <?php
                }

                ?>
            </tbody>
        </table>


    </div>
    <p style="text-align:center; color:red">
        <b>Note:</b> Before clicking Final Submit, first click <b>Save</b> then click <b>Preview</b> and finally <b>Final Submit</b>.
    </p>
    <div class="row">

        <div class="padding">
            <button type="submit" name="save" value="Submit" class="btn">Save</button>
        </div>
        <div class="padding">
            <!--<a class="btn" popup-open="popup-1" name="preview" href="javascript:void(0)" >Preview</a>-->
            <!-- <button type="submit" name="preview" value="Submit" class="btn">Preview</button>-->
            <!-- <a class="link"  onclick="document.getElementById('id02').style.display='block'">View</a>-->
            <a class="btn" href="#?edit=<?php echo $id ; ?>,<?php echo $min ; ?>" onclick="getProfileData('<?=$id?>', '<?=$min?>')">Preview</a>

        </div>
        <div class="padding">
            <button type="submit" name="finalsubmit" value="Submit" class="btn"> Final Submit</button>
        </div>
    </div>
</form>

And my Mykra_view modification. 

include '../connection.php';
if(isset($_GET['Month'])){
    $Month = $_GET['Month'];
    $Employeeid = $_GET['employeeno'];


    $query = "SELECT * FROM mykra where Month= '$Month' AND Engg_No = '$Employeeid' AND Status = '0'";
    $result = mysqli_query($conn, $query);
    while ($row = mysqli_fetch_array($result)) {

        $Ass_ID = $row['Ass_ID'];
        $Ass_Description = $row['Point_Description'];
        $Ass_Marks = $row['Point_Marks'];
        $target = $row['Marks_Target'];
        $actual = $row['Marks_Actual'];
        $date = $row['DOS'];
        $remarks = $row['Marks_Description'];

        $return_arr[] = array(
            "Ass_ID" => $Ass_ID,
            "Ass_Description" => $Ass_Description,
            "Ass_Marks" => $Ass_Marks,
            "target" => $target,
            "actual" => $actual,
            "date" => $date,
            "remarks" => $remarks
        );
    }

    echo json_encode($return_arr);

}

Again mac_gyver's version is better and many things can be cleaned up in this code.

Edited by AKADRUMMIN
Link to comment
Share on other sites
Drummin Member

Drummin

Posted
Posted

After looking at this again I see no reason to send the ids and loop through them in the JS as I suggested. Just append the id with the record id the same in both the input and the JS, i.e. 

id="Ass_Description<?php echo $row['Ass_ID']; ?>"

and 

document.getElementById('Ass_Description'+Ass_ID).value = Ass_Description;

and the values will be passed to the matching inputs. New version below. 

<script>

	function viewData() {
		var month = document.getElementById("Month").value;
		var employeeid = document.getElementById("employeeno").value;
		
		$.ajax({
			type: 'get',
			dataType: 'JSON',
			url: 'Mykra_view.php',
			data: 'Month=' + month + '&employeeno=' + employeeid,
			success: function (response) {
				var len = response.length;
				
				for (var i = 0; i < len; i++) {	
				
					var Ass_ID = response[i].Ass_ID;
					var Ass_Description = response[i].Ass_Description;
					var Ass_Marks = response[i].Ass_Marks;
					var target = response[i].target;
					var actual = response[i].actual;
					var date = response[i].date;
					var remarks = response[i].remarks;
					var file = response[i].file;
					
					document.getElementById('Ass_Description'+Ass_ID).value = Ass_Description;							
					document.getElementById('Ass_Marks'+Ass_ID).value = Ass_Marks;
					document.getElementById('target'+Ass_ID).value = target;
					document.getElementById('actual'+Ass_ID).value = actual;
					document.getElementById('date'+Ass_ID).value = date;
					document.getElementById('remarks'+Ass_ID).value = remarks;
													
				}	
			}
		});
	};

</script>

 

Link to comment
Share on other sites
Senthilkumar Advanced Member

Senthilkumar

Posted
  • Author
Posted (edited)

Dear AKADRUMMIN,

Thanks for your reply. All the values are updaing properly on the same row.

But the file is not showing. 

					<td align='center' style="width:19%">
                        <input type="file" name="file[]" id="file" accept=".jpg, .jpeg, .png, .pdf, .xlsx" value="" class="tbl-input-cus1 " />
                        <a href=" http://localhost:63640/<?php echo $Directory; ?>/<?php echo $Document; ?>" target="_blank">
                            <?php echo $Document; ?>
                        </a>
						<input type="hidden" class="ids" name='lang[]' value="<?php echo $row['Ass_ID']; ?>" />
                    </td>

 

The file is updating. But not able to display in href. Pls suggest

Edited by Senthilkumar
Link to comment
Share on other sites
mac_gyver Prolific Member

mac_gyver

Posted
Posted

since your version didn't even put values into the json data, neither of the respondents attempted to fix that part of the code.

i recommend that you supply the directory and document values separately in the json data.

in the ajax success code, you would create javascript variables for both of those values.

since this isn't a form field, it doesn't have a .value attribute (what your code was trying to do.)

to set the href value, you would set the .href attribute with a relative url made up from the directory and document values. to set the display text, you would set the .innerText attribute with the document value.

Link to comment
Share on other sites
Senthilkumar Advanced Member

Senthilkumar

Posted
  • Author
Posted

Dear Mac

I get the directory and document values and created the variable on my script. 

$query = "SELECT * FROM mykra where Month= '$Month' AND Engg_No = '$Employeeid' AND Status = '0'";
    $result = mysqli_query($conn, $query);
    while ($row = mysqli_fetch_array($result)) {

        $Ass_ID = $row['Row_id'];
        $Ass_Description = $row['Point_Description'];
        $Ass_Marks = $row['Point_Marks'];
        $target = $row['Marks_Target'];
        $actual = $row['Marks_Actual'];
        $date = $row['DOS'];
        $remarks = $row['Marks_Description'];
        $Document= $row['Document'];
        $Directory = $row['Directory'];

        $return_arr[] = array(
            "Ass_ID" => $Ass_ID,
            "Ass_Description" => $Ass_Description,
            "Ass_Marks" => $Ass_Marks,
            "target" => $target,
            "actual" => $actual,
            "date" => $date,
            "Document" => $Document,
            "Directory" => $Directory,
            "remarks" => $remarks
        );
    }

    echo json_encode($return_arr);
for (var i = 0; i < len; i++) {	
				
					var Ass_ID = response[i].Ass_ID;
					var Ass_Description = response[i].Ass_Description;
					var Ass_Marks = response[i].Ass_Marks;
					var target = response[i].target;
					var actual = response[i].actual;
					var date = response[i].date;
					var remarks = response[i].remarks;
                    var Document = response[i].Document;
                    var Directory = response[i].Directory;
					
					document.getElementById('Ass_Description'+Ass_ID).value = Ass_Description;							
					document.getElementById('Ass_Marks'+Ass_ID).value = Ass_Marks;
					document.getElementById('target'+Ass_ID).value = target;
					document.getElementById('actual'+Ass_ID).value = actual;
					document.getElementById('date'+Ass_ID).value = date;
                    document.getElementById('remarks' + Ass_ID).value = remarks;
                    document.getElementById('file' + Ass_ID).value = Document;
													
				}

but i don't know how to append this on my href. Can yo please help me

Link to comment
Share on other sites
mac_gyver Prolific Member

mac_gyver

Posted
Posted

the fun part in programming is learning new things and in succeeding in getting the computer to do what you want. copy/pasting things someone else has written isn't programming.

i had never previously dynamically built a hyperlink using javascript. i began by researching (i.e. keep searching) until i found how to set the href attribute and how to set the innerText using javascript. since the method i used above uses jquery and is finding the class names within each row, i starting by giving an empty hyperlink markup a class name of 'file' - 

<a class='file' target="_blank"></a>

then the code to dynamically build the hyperlink, using the javascript Directory and Document variables, became - 

$('#Aid_'+Aid).find('.file').attr("href", '/'+Directory+'/'+Document);
$('#Aid_'+Aid).find('.file').text(Document);

you would need to research what these would need to be when not using jquery (my previous post above names the two attributes) and using the composite ids being used in the code you copied.

  • Like 1
Link to comment
Share on other sites
  • 3 weeks later...
  • Solution
Senthilkumar Advanced Member

Senthilkumar

Posted
  • Author
  • Solution
Posted

Dear Mac-Gayer,

Thanks for your reply.

 

I created span 

<span id=file1<?php echo $row['Ass_ID']; ?>><a></a></span>

And i append my Directory & Document on this span. 

$("#file1" + Ass_ID).append('<a target="_blank" href="' + Directory + '/' + Document + '">' + Document +  '</a>');

Now it is working properly.

image.thumb.png.725a59cc8d771b5e8e42679ea49fafc1.png

 

Thank you for supporting me.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.