We Keep Coding

Get data-id from url using javascript ajax

i've got stuck to get the data-id value from url. After user click the edit link from the url, i want to show the data in the modal dialog. I use the ajax script, but it doesnt work clearly. The modal dialog show an error warning.
This is my class_view.php
<script>
$(document).ready(function(){
$(".edit").on('click', function(e){
var id = $(e.relatedTarget).data('id');
$.ajax({
type: 'post',
url: "class/edit_class_form.php",
data: 'id=' + id,
success: function(data){
$('.show_class').html(data);
}
});
});
});
</script>
<table width="40%">
<thead>
<tr>
<th>No.</th>
<th>Kode</th>
<th>Name</th>
<th>Capacity</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$query = $db->prepare("SELECT * FROM class ORDER BY name ASC");
$query->execute();
for($no=1; $data = $query->fetch();){
?>
<tr>
<td><?php echo $no++;?></td>
<td><?php echo $data['code'];?></td>
<td><?php echo $data['type']." ".$data['name'];?></td>
<td><?php echo number_format($data['capacity'], 2, '.', ',');?> Ton</td>
<td>edit
</td>
</tr>
<?php };?>
</tbody>
</table>
</div>
<?php
include 'setting/class/edit_class_form.php';
?>
I use pure css modal. This is the code of my edit_class_form.php
<div id="edit_form" class="modal">
<div class="md-medium">
X
<h2>Edit Class</h2>
<form method="post" action="setting/class/edit_class_update.php" id="form" autocomplete="off">
<div class="md-content">
<table class="show_class">
<?php
require '../../inc/koneksi.php';
if($_POST['id']){
$id=$_POST['id'];
$stmt = $db->prepare("SELECT * FROM class WHERE id=:id");
$stmt->execute(array(':id' => $id));
?>
<?php while($row=$stmt->fetch(PDO::FETCH_ASSOC)){?>
<tr>
<td>Class Code</td>
<td><input type="text" name="code" size="5" maxlength="3" value="<?php echo $row['code'];?>" required></td>
</tr>
<tr>
<td>Class Type</td>
<td><input type="text" name="type" size="10" maxlength="5" value="<?php echo $row['type'];?>" required></td>
</tr>
<tr>
<td>Class Name</td>
<td><input type="text" name="name" size="40" maxlength="35" value="<?php echo $row['name'];?>" required></td>
</tr>
<tr>
<td>Capacity</td>
<td><input type="text" name="capacity" size="15" value="<?php echo $row['capacity];?>"maxlength="11" required> Persons</td>
</tr>
</table>
<?php }}?>
</div>
<div class="md-footer">
Cancel
<input type="submit" value="insert"">
</div>
</form>
</div>
</div>
Can you help me?

You can get the data-id of an element in this way then you can add the value to the url for your ajax call and your data should be an object
data: {id: id}
You can also var_dump($_POST) to check what are you receiving in PHP
$(document).ready(function() {
$(".edit").on('click', function(e) {
$this = $(this);
const id = $this.data("id")
$.ajax({
type: 'post',
url: "class/edit_class_form.php",
data: {
id: id
},
success: function(data) {
$('.show_class').html(data);
}
});
});
});
.edit {
cursor: pointer;
background: green;
width: 90px;
padding: 20px;
text-align: center;
color: #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="edit" data-id="5445454">Click me </div>

Dynamic subtotal in php

In my project I need to make the subtotal of the line (quantite*montant) dynamicali.
For the moment I have there:
I want the montant total it is auto make 1*110 for example and it is directly displayed.
My code :
<div id="contenu">
<h2>Renseigner ma fiche de frais du mois <?php echo $numMois."-".$numAnnee ?></h2>
<form method="POST" action="index.php?uc=gererFrais&action=validerMajFraisForfait">
<div class="corpsForm">
<fieldset>
<legend>Eléments forfaitisés
</legend>
<table width=100%>
<tr>
<td>Libelle</td>
<td>Nombre</td>
<td>Montant unitaire</td>
<td>Montant total</td>
</tr>
<?php
foreach ($lesFraisForfait as $unFrais)
{
$idFrais = $unFrais['idfrais'];
$libelle = $unFrais['libelle'];
$quantite = $unFrais['quantite'];
$montant = $unFrais['montant'];
?>
<tr>
<td><?php echo $libelle ?></td>
<td><input type="number" id="idFrais" name="lesFrais[<?php echo $idFrais?>]" size="10" min="0" autocomplete="off" maxlength="5" value="<?php echo $quantite?>" onkeyup="calculer()">
<td><input type="text" id="montant" value="<?php echo $montant ?>" disabled></td>
</tr>
<?php
}
?>
</table>
</fieldset>
</div>
<div class="piedForm">
<p>
<input id="ok" type="submit" value="Valider" size="20" />
<input id="annuler" type="reset" value="Effacer" size="20" />
</p>
</div>
</form>

Here I added another Answer for you.
So basically in your FOREACH Loop you have to create INCREMENTAL VARIABLE
<?php
$incr = 1;
foreach ($lesFraisForfait as $unFrais)
{
$idFrais = $unFrais['idfrais'];
$libelle = $unFrais['libelle'];
$quantite = $unFrais['quantite'];
$montant = $unFrais['montant'];
?>
<tr>
<td><?php echo $libelle ?></td>
<td><input type="number" id="<?php echo 'idFrais'.$incr; ?>" size="10" min="0" autocomplete="off" maxlength="5" value="<?php echo $quantite?>" onkeyup="calculer(this)">
<td><input type="text" id="<?php echo 'montant'.$incr; ?>" value="<?php echo $montant ?>" disabled></td>
<td id='subtotal<?php echo $incr;?>'><?php echo $quantite*$montant; ?></td>
</tr>
<?php
$incr ++;
}
?>
Since you already have ONKEYUP='calculer' on your javascript code this below.
function calculer( e ){
var i = e.getAttribute('id').length;
var input_identifier = e.getAttribute('id').substring(i-1,i);
var subtotal = document.getElementById('subtotal'+input_identifier)
var quantity = e.value;
var montant = document.getElementById('montant'+input_identifier);
subtotal.textContent = parseInt(quantity) + parseInt(montant.value);
return;
}
This should work.

please add td for total :
<tr>
<td><?php echo $libelle ?></td>
<td><input type="number" id="idFrais" name="lesFrais[<?php echo $idFrais?>]" size="10" min="0" autocomplete="off" maxlength="5" value="<?php echo $quantite?>" onkeyup="calculer()">
<td><input type="text" id="montant" value="<?php echo $montant ?>" disabled></td>
<td><input type="text" value="<?php echo ($montant*$quantite) ?>" disabled></td>
</tr>

You just have to add the following 4th TD.
<td><?php echo $quantite*$montant; ?></td>
That should work.

how can i make print button that will print a report?

I'm doing on a project but my problem is that i don't have any idea on how to make a print button to print my report..the report is in a table..can somebody please help me with this one?my question is how can i add a button for printing?
here is my code for the viewing of specific record
<?php
include_once 'dbconfig.php';
$username = isset($_GET['username']) ? $_GET['username'] : '';
$password = isset($_GET['password']) ? $_GET['password'] : '';
$province = isset($_GET['province']) ? $_GET['province'] : '';
if(isset($_GET['user_id']))
{
$user_id = $_GET['user_id'];
extract($crud->getID($user_id));
}
?>
<body>
<div id="Survey-view">
<div id="header">
</div>
<p><strong>INFORMATION</strong></p>
<hr />
<div id="main-frame">
<table id="information-content" cellspacing="0">
<thead>
<tr>
<th>Username</th>
<th>Password</th>
<th>Province</th>
</tr>
<tbody>
<tr>
<td><?php echo $username; ?></td>
<td><?php echo $password; ?></td>
<td><?php echo $province; ?></td>
</tr>
</tbody>
</thead>
</table>
</div>
<br />
<br />
<p><strong>ASP</strong></p>
<hr />
<div id="asp">
<table id="asp-content" cellspacing="0">
<thead>
<tr>
<th>Date Survey</th>
<th>Date Submitted</th>
<th>Date Approved</th>
<th>Date Recv'd by Region</th>
<th>Date Recv'd by DARPO</th>
</tr>
<tbody>
<tr>
<td><?php echo $username; ?></td>
<td><?php echo $username; ?></td>
<td><?php echo $username; ?></td>
<td><?php echo $username; ?></td>
<td><?php echo $username; ?></td>
</tr>
</tbody>
</thead>
</table>
</div><!-- End of asp-->
<br />
<br />
<p><strong>DENR/DARPO</strong></p>
<hr />
<div id="denrdarpo">
<table id="denrdarpo-content" cellspacing="0">
<thead>
<tr>
<th>Date Survey</th>
<th>Date Submitted</th>
<th>Date Approved</th>
<th>Date Recv'd by Region</th>
<th>Date Recv'd by DARPO</th>
</tr>
<tbody>
<tr>
<td><?php echo $username; ?></td>
<td><?php echo $username; ?></td>
<td><?php echo $username; ?></td>
<td><?php echo $username; ?></td>
<td><?php echo $username; ?></td>
</tr>
</tbody>
</thead>
</table>
</div><!--End of denrdarpo-->
<br />
<br />
<p><strong>OTHERS</strong></p>
<hr />
<div id="others">
<table id="others-content" cellspacing="0">
<tr>
<td>Project Number</td>
<td><input type="text" value="<?php echo $username; ?>" disabled></td>
<td>Module Number</td>
<td><input type="text" value="<?php echo $username; ?>" disabled></td>
</tr>
<tr>
<td>Fund Year</td>
<td><input type="text" value="<?php echo $username; ?>" disabled></td>
<td>LAD Target</td>
<td><input type="text" value="<?php echo $username; ?>" disabled></td>
</tr>
<tr>
<td>Land Category</td>
<td><select disabled>
<option><?php echo $username; ?></option>
</select></td>
<td>LAnd Type</td>
<td><select disabled>
<option><?php echo $username; ?></option>
</select></td>
</tr>
<tr>
<td>Date Reported</td>
<td><input type="text" value="<?php echo $username; ?>" disabled></td>
<td>Date Suspended</td>
<td><input type="text" value="<?php echo $username; ?>" disabled></td>
</tr>
<tr>
<td>Date Completed</td>
<td><input type="text" value="<?php echo $username; ?>" disabled></td>
<td>Number of Lots</td>
<td><input type="text" value="<?php echo $username; ?>" disabled></td>
</tr>
<tr>
<td>Station</td>
<td><input type="text" value="<?php echo $username; ?>" disabled></td>
<td>Contractor</td>
<td><input type="text" value="<?php echo $username; ?>" disabled></td>
</tr>
<tr>
<td>Agency</td>
<td><input type="text" value="<?php echo $username; ?>" disabled></td>
<td>Cert 40</td>
<td><input type="text" value="<?php echo $username; ?>" disabled></td>
</tr>
</table>
</div>
</div>
</body>

Every time I need to do this I go to my old Gmail account, print a page and then view the source code cus I'm too lazy to remember the functions..
This is how Google does it.
<script type="text/javascript">// <![CDATA[
document.body.onload=function(){document.body.offsetHeight;window.print()};
// ]]></script>
You could just as easily attach it to a button instead of doing it on load.
<button onclick="document.body.offsetHeight;window.print();">Print</button>
Here's a working example.
And this one will remove the button from the printed page:
<button onclick="this.style.display='none';document.body.offsetHeight;window.print();this.style.display='inline';">Print</button>
And another example.

<html>
<head>
<script type="text/javascript">
function openWin()
{
var myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>This is 'myWindow'</p>");
myWindow.document.close();
myWindow.focus();
myWindow.print();
myWindow.close();
}
</script>
</head>
<body>
<input type="button" value="Open window" onclick="openWin()" />
</body>
</html>

Table Row Sum Within PHP loop

I want to sum table rows dynamically as the user inputs values. Since the number of rows can vary I want to use a php loop to accomplish this. I'm having problems getting the loop to work correctly. If, for example, there are two individual rows to sum only the bottom row will be summed.
<script type="text/javascript">
var sumScoreF = function(a) {
var rowtotal = 0;
n = new Array();
for (i = 1; i <= 3; i++) {
if (parseInt(document.getElementById(a + i).value) > 0) {
n[i] = parseInt(document.getElementById(a + i).value);
rowtotal += n[i];
}
}
document.getElementById(a + 'total').value = rowtotal;
};
</script>
The following is an example of a single row sum. The total column continues to be summed as values are entered. This is a nice effect but not necessary.
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>total</td>
</tr>
<tr>
<td>
<input name="p1g1" id="p1g1" type="text" value="" onChange="sumScoreF('p1g')" />
</td>
<td>
<input name="p1g2" id="p1g2" type="text" value="" onChange="sumScoreF('p1g')" />
</td>
<td>
<input name="p1g3" id="p1g3" type="text" value="" onChange="sumScoreF('p1g')" />
</td>
<td>
<input name="p1gtotal" id="p1gtotal" type="text" value="" />
</td>
</tr>
</table>
Here is my attempt at looping additional rows using php and javascript. The first row will not sum but the second row will. I think the problem is with the javascript variable "m" in that it goes directly to the last row but I can't figure out how to fix it.
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>total</td>
</tr>
<?php for($j=1;$j<=3;$j++) { ?>
<script type="text/javascript">
var k = <?php echo json_encode($j); ?>;
var m = 'p'+k+'g';
</script>
<tr>
<td>
<input name="<?php echo 'p'.$j.'g1'; ?>" id="<?php echo 'p'.$j.'g1'; ?>" type="text" onChange="sumScoreF('m')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g2'; ?>" id="<?php echo 'p'.$j.'g2'; ?>" type="text" onChange="sumScoreF('m')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g3'; ?>" id="<?php echo 'p'.$j.'g3'; ?>" type="text" onChange="sumScoreF('m')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'gtotal'; ?>" id="<?php echo 'p'.$j.'gtotal'; ?>" type="text" />
</td>
</tr>
<?php } ?>
Any help is greatly appreciated. Thanks.

Used PHP to echo the loop variable within the onChange javascript function call:
<table>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
<td>total</td>
</tr>
<?php for($j=1;$j<=3;$j++) { ?>
<tr>
<td>
<input name="<?php echo 'p'.$j.'g1'; ?>" id="<?php echo 'p'.$j.'g1'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g2'; ?>" id="<?php echo 'p'.$j.'g2'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'g3'; ?>" id="<?php echo 'p'.$j.'g3'; ?>" type="text" onChange="sumScoreF('<?php echo 'p'.$j.'g'; ?>')" />
</td>
<td>
<input name="<?php echo 'p'.$j.'gtotal'; ?>" id="<?php echo 'p'.$j.'gtotal'; ?>" type="text" />
</td>
</tr>
<?php } ?>

ajax not returning value

Here is a problem i am having.
Ajax is not willing to return me any values and display it in a message box
Here is my register.php
<?php
//register.php
$username = $_POST['txtusername'];
$response= array();
$response[]= $_POST['txtusername'];
$response[]= $_POST['txtusername'];
echo json_encode($response);
?>
My form is as follows
<div id="divregister">
<div id="display"></div>
<table>
<tr>
<td colspan="3" style='text-align: center;font-weight: bold;'>Register</td>
</tr>
<tr>
<td style='text-align: right;'>First Name</td>
<td class="registerinputfieldscolumn">
<input value= "<?php if(isset($_POST['txtfirstname'])) {echo $_POST['txtfirstname'];} ?>" type="text" name="txtfirstname" id ="txtfirstname" ></td>
<td class="registererrordisplay" id="registererrorfirstname"></td>
</tr>
<tr>
<td style='text-align: right;'>Last Name</td>
<td class="registerinputfieldscolumn">
<input value= "<?php if(isset($_POST['txtlastname'])) echo $_POST['txtlastname']; ?>" type="text" name="txtlastname" id="txtlastname"></td>
<td class="registererrordisplay" id="registererrorlastname"></td>
</tr>
<tr>
<td style='text-align: right;'>E-Mail Address</td>
<td class="registerinputfieldscolumn">
<input value= "<?php if(isset($_POST['txtemail'])) echo $_POST['txtemail']; ?>" type="text" name="txtemail" id="txtemail"></td>
<td class="registererrordisplay" id="registererroremail"></td>
</tr>
<tr>
<td style='text-align: right;'>Username</td>
<td class="registerinputfieldscolumn">
<input value= "<?php if(isset($_POST['txtusername'])) echo $_POST['txtusername']; ?>" type="text" name="txtusername" id ="txtusername"></td>
<td class="registererrordisplay" id="registererrorusername"></td>
</tr>
<tr>
<td style='text-align: right;'>Password</td>
<td class="registererrordisplay"><input type="password" name="txtpassword" id="txtpassword"></td>
<td id="registererrorpassword"></td>
</tr>
<tr>
<td style='text-align: right;'>Confirm</td>
<td class="registerinputfieldscolumn">
<input type="password" name="txtconfirmpassword" id="txtconfirmpassword"></td>
<td></td>
</tr>
<tr>
<td id ="registerdisplay" style='text-align: right;font-size: 12px;color:red;'>dfghjkl</td>
<td style='text-align: right;'>
<input type='button' id ="btnregister" style='width: 60px;height:25px;margin-right:75px;' value="Register"></td>
<td></td>
</tr>
</table>
</div>
Here is the ajax script is as follows.
Am not getting any response in the alert box.
Any help from you guy is greatly appreciated.
<script>
$(document).ready(function(){
$("#btnregister").click(function(){
$.ajax({
type: 'POST',
url: 'register.php',
dataType: 'text',
success: function(data) {alert(data);},
data: {"txtusername": $("#txtusername").val()}
});
});
});
</script>

data: {txtusername: sample}
Where did you define that 'sample' variable? It seems that it doesn't exist so you actually send no value. Then nothing is returned, because there's no data to create response.