Mise à jour à partir d'un champ input type texte

msi79

Messages postés: 500
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 13 avril 2021

- 25 mai 2018 à 23:17
jordane45

Messages postés: 35404
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 15 mai 2022

- 26 mai 2018 à 16:46

Bonjour,
j'aimerais faire des modifications en m'inspirant d'un code qui marche bien mais jusque le ca marche pas .
A partir d'une table j'arrive a bien faire les modifiaction dans une table. Vous m'avez bien aidé ici.
Cette fois je voudrai appliquer cela en utilisant un champ input de type texte.

I.
partie HTML qui fonctionne bien

<td style="background-color:#CC3; text-align:center; font-size:18px;"  contenteditable="true" id="<?php echo $resultat["id_art"]; ?>" name="articleQuant" ><?php echo $resultat["articleQuant"]; ?></td>

partie sa partie javascript

son code PHP

<script> 
$(document).ready(function() 
{  
 $("td").click(function()  
  { 
   if( $(this).attr("contenteditable") == "true") 
   {    
    // le"id" du td doit contenir l'id de la BDD 
    // le "name" doit contenir le nom du champ à modifier 
     
                var contenu_avant = $(this).text(); 
                var id_bdd = $(this).attr("id"); 
                var champ_bdd = $(this).attr("name"); 
    //alert("avant =" + contenu_avant); 
                 
    $(this).blur(function() 
        { 
         var contenu_apres = $(this).text(); 
           //alert("contenu apres = " + contenu_apres); 
         
        if (contenu_avant != contenu_apres) { 
		//alert("contenu apres = " + contenu_apres); 
		  var parametre = {id:id_bdd,champ:champ_bdd,contenu:contenu_apres} ; 
		 // alert(JSON.stringify(parametre)) ; 
		  $.ajax({ 
			url: "invoice_dynamic_table/UpdatedynamiqueTmpArt.php",  
			type: "POST",  
			data: parametre,  
			success: function(html) { 
			 // console.log(html);    
			 // alert(id_bdd); 
			} ,
			error: function(xhr, status, error) {
			  console.log('error ajax');
			  console.log(error);
			  var err = eval("(" + xhr.responseText + ")");
			  alert(err.Message);
			}
		   }); 
		  } 
          
        }); 
     
   };     
             
  }); 
});   

   
</script>

Partie PHP qui fonctionne bien

<?php  
//http://codes-sources.commentcamarche.net/
 include('../functions/bdd.php');
  $id = ($_POST["id"]);  
  $champ=($_POST["champ"]);  
  $contenu=($_POST["contenu"]);  
  $table="tmp_articles";

   try {
    $conn = new PDO("mysql:host=$serveur;dbname=$base", $admin, $mdp);
    // set the PDO error mode to exception
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  echo  $sql = "UPDATE $table SET $champ = '$contenu' WHERE id_art = $id "; 

    // Prepare statement
    $stmt = $conn->prepare($sql);

    // execute the query
    $result = $stmt->execute();
   /* if($result):
       $sqls = "UPDATE $table SET $champ = '$contenu' WHERE id = $id "; 

      // Prepare statement
      $stmts = $conn->prepare($sqls);

      // execute the query
      $stmts->execute();
    endif;*/
    }
catch(PDOException $e)
    {
    echo $sql . "<br>" . $e->getMessage();
    }
  // mysql_close($link); 
  // 
   echo "success"; 
  // fin accès à la base de données 
   
  // début de simulation -> écriture dans le fichier 'simulation.txt' 
  $trace = "id= ".  $id. " champ= ".  $champ . "  contenu= " . $contenu."\n"; 
  $monfichier = fopen("simulation.txt", "a"); 
  fputs($monfichier, $trace); 
  fclo

j'ai essayé avec

<input type="number" style="text-align: center;" name="articleQuant" placeholder='Enter Qty' class="form-control qty" step="0" min="0" value="<?php echo $resultat["articleQuant"];  ?>" contenteditable="true" id="<?php echo $resultat["id_art"]; ?>" />

je pensais que en remplaçant

 $("td").click(function()

par :

 $("input").click(function()

ça allait marcher mais rien

je voudrais de l'aide svp

A voir également:

Fff designation
Html contenteditable placeholder - Meilleures réponses
Ajout/suppression d'un champ input type -> Problème de récupération du tableau $ ✓ - Forum - Javascript / DHTML
Extraire un champs de type text d'une table sql server, language C# ✓ - Forum - C# / .NET
Forcer un champs en type "texte" ✓ - Forum - Visual Basic
Insertion dans champs mysql type text impossible! ✓ - Forum - PHP
Access mise à jour table à partir d'une autre table ✓ - Forum - SQL

1 réponse

Réponse 1 / 1

jordane45

Messages postés: 35404
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 15 mai 2022

356
25 mai 2018 à 23:27

Bonsoir,
Une fois de plus... il faut essayer de lire entre les lignes pour comprendre ta question....
Je vais me hasarder à ça :
Tu souhaites que la maj se fasse lorsque tu quitte le champ text ou au fur et à mesure que tu saisie quelquechose dedans ?

Cas 1
https://www.w3schools.com/tags/ev_onblur.asp

Cas 2
https://www.w3schools.com/tags/ev_onkeyup.asp

Et bien entendu... il faut pouvoir cibler l'input à traiter.
Pour ça, tu peux par exemple utiliser une de ces class

$('.qty').tontrigger....

tontrigger etant à remplacer par l'un des deux choix que je t'ai proposé au dessus.

Bien entendu... si jamais ça ne fonctionnait pas... il faudrait commencer par regarder dans la console de ton navigateur ce qui s'y affiche. et retirer les commentaires des lignes de ton success

success: function(html) { 
  console.log(html);    
  alert(id_bdd); 
} ,

msi79

Messages postés: 500
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 13 avril 2021

1
26 mai 2018 à 00:39

j'ai remplacé

$('.qty').tontrigger....

par :

 $('.qty').myFunction(function()

mais ça donne rien

  <td ><input type="number" style="text-align: center;" name="articleQuant" placeholder='Enter Qty' class="form-control qty" step="0" min="0" value="<?php echo $resultat["articleQuant"];  ?>" contenteditable="true" id="<?php echo $resultat["id_art"]; ?>" onkeyup="myFunction()"/></td>

le console réagit pas

jordane45

Messages postés: 35404
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 15 mai 2022

356
Modifié le 26 mai 2018 à 01:09

.myFunction ??? Tu sors ça d'où ??
Blur ou keyup..... Ce n'est pas compliqué... Il n'y a que ces deux choix dans mon message précédent !!

jordane45

Messages postés: 35404
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 15 mai 2022

356
26 mai 2018 à 01:10

https://www.w3schools.com/jquery/event_keyup.asp

msi79

Messages postés: 500
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 13 avril 2021

1
26 mai 2018 à 01:18

avec

 $("input").keydown(function()

la console réagit mais les id sont pas recupérés

msi79

Messages postés: 500
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 13 avril 2021

1
26 mai 2018 à 01:21

alert("avant =" + contenu_avant);

alert("contenu apres = " + contenu_apres);

retourne rien

msi79

Messages postés: 500
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 13 avril 2021

1
26 mai 2018 à 11:17

le code du INPUT

 <td ><input type="number" style="text-align: center;" name="articleQuant" placeholder='Enter Qty' class="form-control qty" step="0" min="0" value="<?php echo $resultat["articleQuant"];  ?>" contenteditable="true" id="<?php echo $resultat["id_art"]; ?>" /></td>

CODE JS

<script> 
$(document).ready(function() 
{  
 $("input").keydown(function()  
  { 
   if( $(this).attr("contenteditable") == "true") 
   {    
    // le"id" du td doit contenir l'id de la BDD 
    // le "name" doit contenir le nom du champ à modifier 
     
                var contenu_avant = $(this).text(); 
                var id_bdd = $(this).attr("id"); 
                var champ_bdd = $(this).attr("name"); 
	
      alert("avant =" + contenu_avant); 
                 
    $(this).blur(function() 
        { 
         var contenu_apres = $(this).text(); 
           alert("contenu apres = " + contenu_apres); 
         
        if (contenu_avant != contenu_apres) { 
		alert("contenu apres = " + contenu_apres); 
		  var parametre = {id:id_bdd,champ:champ_bdd,contenu:contenu_apres} ; 
		  alert(JSON.stringify(parametre)) ; 
		  $.ajax({ 
			url: "invoice_dynamic_table/UpdatedynamiqueTmpArt.php",  
			type: "POST",  
			data: parametre,  
			success: function(html) { 
			  console.log(html);    
			   alert(id_bdd); 
			} ,
			error: function(xhr, status, error) {
			  console.log('error ajax');
			  console.log(error);
			  var err = eval("(" + xhr.responseText + ")");
			  alert(err.Message);
			}
		   }); 
		  } 
          
        }); 
     
   };     
             
  }); 
});   

   
</script>

msi79

Messages postés: 500
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 13 avril 2021

1
26 mai 2018 à 12:01

Quand je fais CTR + U ou inspecter ca m'envoie sur une autre page qui n'affiche rien.
dc j'ai compié le code :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
    <title>Invoice Dynamic Table - Bootsnipp.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        
    </style>
    <script src="//code.jquery.com/jquery-1.12.4.js" ></script>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <?php include('invoice_dynamic_table_js.php'); ?>
    
    <script>
function popupCenter(url, title, w, h, t) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+t+', left='+left);
} 
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script> 
$(document).ready(function() 
{  
 $("input").keydown(function()  
  { 
   if( $(this).attr("contenteditable") == "true") 
   {    
    // le"id" du td doit contenir l'id de la BDD 
    // le "name" doit contenir le nom du champ à modifier 
     
                var contenu_avant = $(this).text(); 
                var id_bdd = $(this).attr("id"); 
                var champ_bdd = $(this).attr("name"); 
	
      alert("avant =" + contenu_avant); 
                 
    $(this).blur(function() 
        { 
         var contenu_apres = $(this).text(); 
           alert("contenu apres = " + contenu_apres); 
         
        if (contenu_avant != contenu_apres) { 
		alert("contenu apres = " + contenu_apres); 
		  var parametre = {id:id_bdd,champ:champ_bdd,contenu:contenu_apres} ; 
		  alert(JSON.stringify(parametre)) ; 
		  $.ajax({ 
			url: "invoice_dynamic_table/UpdatedynamiqueTmpArt.php",  
			type: "POST",  
			data: parametre,  
			success: function(html) { 
			  console.log(html);    
			   alert(id_bdd); 
			} ,
			error: function(xhr, status, error) {
			  console.log('error ajax');
			  console.log(error);
			  var err = eval("(" + xhr.responseText + ")");
			  alert(err.Message);
			}
		   }); 
		  } 
          
        }); 
     
   };     
             
  }); 
});   

   
</script> 
</head>
<body>
<div class="container">



  <div class="row clearfix">
    <div class="col-md-12">
      <form  id="form" class="form-horizontal form-label-left" method="post" action="">
      <div class="row clearfix" style="margin-top:20px">
    
      <?php include('total_table.php') ?>

      </div>
      <table class="table table-bordered table-hover" id="tab_logic" width="50%">
        <thead>
          <tr style="font-size: 28px; font-weight: bold;">
            <th class="text-center" width="2%"> # </th>
             <th class="text-center" width="2%"> </th>
            <th class="text-center" width="25%"> Designation </th>
            <th class="text-center" width="5%">Réf</th>
            <th class="text-center" width="5%"> Qte </th>
            <th class="text-center" width="5%"> </th>
            <th class="text-center" width="5%"> Prix </th>
            <th class="text-right" width="10%"> Total </th>
          </tr>
        </thead>
        <tbody>
        <?php
		  $rang = 0;
			foreach($resultats AS $resultat): 
		  $rang++;
		?>
          <tr id='addr0'>
            <td align="center"><?= $rang;  ?></td>
            <td align="center"><a href="supprimer/suppr_tmp_article_i3.php?id=<?= $resultat["id_art"];  ?>&clef=<?= $_GET['clef'];  ?>">
          <span class="glyphicon glyphicon-trash"></span>
        </a></td>
            <td><input type="text" name='product[]'  placeholder='Enter Product Name' class="form-control" value="<?= $resultat["articleVendu"];  ?>"/></td>
            <td><input type="text" name='ref[]'  placeholder='Enter Réference' class="form-control" value="<?= $resultat["id_prod"];  ?>/<?= $resultat["articleRef"];  ?>"/></td>
            
            
             
  <td ><input type="number" style="text-align: center;" name="articleQuant" placeholder='Enter Qty' class="form-control qty" step="0" min="0" value="<?php echo $resultat["articleQuant"];  ?>" contenteditable="true" id="<?php echo $resultat["id_art"]; ?>" /></td>
         
              <!--  
            <td style="background-color:#CC3; text-align:center; font-size:18px;"  contenteditable="true" id="<?php echo $resultat["id_art"]; ?>" name="articleQuant" ><?php echo $resultat["articleQuant"]; ?></td>
        
           -->   
            <td align="center"><a onclick="popupCenter('invoice_dynamic_table/modifQte.php?id_art=<?php echo $resultat["id_art"]; ?>', 'myPop1',600,500,100);" href="javascript:void(0);"><span class="glyphicon glyphicon-list-alt"></span></a></td>
            <td><input type="number" name='price[]' placeholder='Enter Unit Price' class="form-control price text-center" step="0.00" min="0" value="<?php echo $resultat["articlePU"];  ?>"/></td>
            <td><input type="number" name='total[]' placeholder='0.00' class="form-control total text-right" value="<?php echo  number_format($resultat["articlePU"] * $resultat["articleQuant"], 0, ',', '. ');  ?>" readonly style="font-weight: bold; font-size: 28px;" /></td>
          </tr>
       <?php
			endforeach;
		?>
          <tr id='addr1'></tr>
        </tbody>
      </table>
    </div>
  </div>

  
     </form>
    </div>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    var i=1;
    $("#add_row").click(function(){b=i-1;
      	$('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);
      	$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      	i++; 
  	});
    $("#delete_row").click(function(){
    	if(i>1){
		$("#addr"+(i-1)).html('');
		i--;
		}
		calc();
	});
	
	$('#tab_logic tbody').on('keyup change',function(){
		calc();
	});
	$('#tax').on('keyup change',function(){
		calc_total();
	});
	

});

function calc()
{
	$('#tab_logic tbody tr').each(function(i, element) {
		var html = $(this).html();
		if(html!='')
		{
			var qty = $(this).find('.qty').val();
			var price = $(this).find('.price').val();
			$(this).find('.total').val(qty*price);
			
			calc_total();
		}
    });
}

function calc_total()
{
	total=0;
	$('.total').each(function() {
        total += parseInt($(this).val());
    });
	$('#sub_total').val(total.toFixed(2));
	tax_sum=total/100*$('#tax').val();
	$('#tax_amount').val(tax_sum.toFixed(2));
	$('#total_amount').val((total-tax_sum).toFixed(2));
}
</script>
</body>
</html>

msi79

Messages postés: 500
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 13 avril 2021

1
26 mai 2018 à 16:25

enfin j'ai pu recuperer le code source


 
<!DOCTYPE html>
<html>
<head>
    <title>FACTURA - CAISSE ET GESTION DE STOCK</title>
    <meta charset="utf8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="DJIGUIYA SIGNATURE SARL a �t� cr�e pour r�pondre aux besoins de l�Afrique en mati�re de contribution � l�am�lioration de la s�curit� routi�re et de la fluidit� du trafic mais aussi � la r�alisation d�am�nagements urbains et routiers durables." />
    <link rel="icon" type="image/png" href="images/icon.gif" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
    <script src="js/login.js"></script>

</head>
<body >

<div id='content' >



<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans titre</title>
<script type="text/javascript"> 
function focus() 
  { 
  document.getElementById('text1').focus() 
  } 
</script>
  <style>
    h1{
      text-align: center;
    }
    #modalCheck{
      display: none;
    }
    .modalLayer{
      display: none;
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }
    #modalCheck:checked + .modalLayer, #modalContent:target{
      display: block;
    }
    .popup_block{
      background: #fff;
      padding: 20px;
      border: 20px solid #ddd;
      position: relative;
      margin: 10% auto;
      width: 70%;
      box-shadow: 0px 0px 20px #000;
      border-radius: 10px;
      z-index: 1000000000000
    }
    img.btn_close {
      float: right;
      margin: -55px -55px 0 0;
      cursor: pointer;
    }
    .button{
      cursor: pointer;
      color: blue;
      text-decoration: underline;
    }
	 
  </style>
   <style type="text/css">
        @import url("https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/css/bootstrap-select.min.css");
		.largeur{
		width:600px; font-size:36px;
		}
    </style>
    <script>
function popupCenter(url, title, w, h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
} 
</script>
</head>

<body style="background-color:#FFF">

<div class="row">
 <div class="col-md-2" style="color:#CC6; font-size:40px; font-weight:bold; font-style:italic; padding-left:120px">
  <a href="index.php?page=ACCUEIL" class="btn btn-default btn-lg">
          <span class="glyphicon glyphicon-circle-arrow-left"></span> RETOUR
        </a>
 </div>
  <div class="col-md-2" style="color:#CC6; font-size:40px; font-weight:bold; font-style:italic; padding-left:120px">
<a href="index.php?page=ACCUEIL&nv=1" class="btn btn-info btn-lg">
          <span class="glyphicon glyphicon-refresh"></span> NOUVEAU
        </a>

 </div>

     <div >

   
    <div class="modalLayer" id="modalContent" style="z-index: 1000000000000">
      <div class="popup_block">
        <a href="#noWhere"><img alt="Fermer" title="Fermer la fenêtre" class="btn_close" src="menu/modalbox2/close_pop.png"></a>
      
        <h2 style="color: red; font-weight: bold;">LISTE DES FACTURES EN COURS</h2>
                        <table width="100%" border="0">
                      <tr>
                        <td width="10%"><span class="badge">1</span></td>
                        <td width="30%">2018-05-26 09:56:30</td>
                        <td width="30%">ace01ATU</td>
                        <td width="15%"><a href="index.php?page=NOUVEAU&clef_att=ace01ATU">ouvrir»</a></td>
                        <td width="15%"><a href="supprimer/suppr_att.php?clef=ace01ATU"><img src="images/corbeille.png" width="20" height="20" /></a></td>
                      </tr>
                    </table>
                            
      </div>
    </div>
  </div>   <div class="col-md-2" style="color:#CC6; font-size:40px; font-weight:bold; font-style:italic; padding-left:120px">

    <a href="#modalContent"   class="btn btn-danger">En Attente <span class="badge">1</span></a> 


 </div>
 
  <div class="col-md-2" style="color:#CC6; font-size:40px; font-weight:bold; font-style:italic; padding-left:120px">
   <span style="color:#900">FACTURA</span>
 </div>

 <div class="col-md-2" style="color:#CC6; font-size:40px; font-weight:bold; font-style:italic; padding-left:120px">
   
<a onclick="popupCenter('inerfaces/venteCaissiere.php', 'myPop1',960,600);" href="javascript:void(0);">PIT</a>
 </div>

  <div class="col-md-2" style="text-align:right; font-size:24px; padding-right:140px">
   <span class="glyphicon glyphicon-user" aria-hidden="true"></span> <span style="color:#900">msi79</span>
 </div>
</div>
<div class="row">
 <div class="col-md-9">
       <form id="monformulaire"  name="form1" method="post" action="" >
    <table width="100%" border="0">
      <tr>
        <td width="45%"> </td>
        <td width="55%"> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td style=" padding-left:100px">
                <input type="text" name="code" id="text1"  style="background-color:#850000; color:white; font-size:36px; font-weight:bold; width:500px; border-radius:25px; text-align:center;"  placeholder='Enter Code :  0014525'/>
                </td>
        <td><input type="submit" name="valider"  class="btn btn-danger btn-lg" value="VALIDER LE CODE" /></td>
      </tr>
    </table>
    </form>
 </div>
  <div class="col-md-3">
    <img src="images/orchestra_caisse.png" width="100" height="100" />
  </div>
</div>

<table width="100%" border="0">
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td>
   
    </td>
    <td> </td>
  </tr>
  <tr>
    <td style="padding-left:120px"></td>
    <td> </td>
  </tr>
  <tr>
    <td>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
    <title>Invoice Dynamic Table - Bootsnipp.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        
    </style>
    <script src="//code.jquery.com/jquery-1.12.4.js" ></script>
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
/* <![CDATA[ */
function mensualite()
{
k = document.forms['form'].elements['mtremi'].value;
t = document.forms['form'].elements['sub_total'].value;
n = document.forms['form'].elements['monnai_remi'].value;
r = document.forms['form'].elements['total_amount'].value;
	if(r!=0){
			                j=k-n;
							m=j-r;
							m=Math.floor(m*100)/100;
							if(m>=0){
								    	document.forms['form'].elements['avoir'].value = m;
									}else{
								           document.forms['form'].elements['avoir'].value = 0;
							             }
			}else{
				 if(n!=''){
							j=k-n;
							m=j-t;
							m=Math.floor(m*100)/100;
							if(m>=0){
								    	document.forms['form'].elements['avoir'].value = m;
									}else{
								           document.forms['form'].elements['avoir'].value = 0;
							             }
						  }
							else
							{
							document.forms['form'].elements['avoir'].value = '';
							}
				}
 }
/* ]]> */
</script>

<script type="text/javascript">
/* <![CDATA[ */
function mensualites()
{
k = document.forms['form'].elements['mtremi'].value;
t = document.forms['form'].elements['sub_total'].value;
x = document.forms['form'].elements['monnai'].value;
r = document.forms['form'].elements['total_amount'].value;
if(r!=''){
	    x=k-r;
		x=Math.floor(x*100)/100;
		document.forms['form'].elements['monnai'].value = x;
	}else
if(t!='')
{
x=k-t;
x=Math.floor(x*100)/100;
document.forms['form'].elements['monnai'].value = x;
}
else
{
document.forms['form'].elements['monnai'].value = '';
}
}
/* ]]> */
</script>
<!-- **********************************                      ********************************** --><!-- ****************************************CALCUL DE POURCENTAGE********************************** -->
<!-- **********************************                      ********************************** -->
<script type="text/javascript">
/* <![CDATA[ */
function mensualitees()
{

e = document.forms['form'].elements['sub_total'].value;
f = document.forms['form'].elements['remise'].value;//testresutat
if(f!='')
{
g=e*f/100;
z=e-g;
h=Math.floor(z*100)/100;
document.forms['form'].elements['total_amount'].value = h;

}
else
{
document.forms['form'].elements['total_amount'].value = '';
}
}
/* ]]> */
</script>
<script language="javascript">
function ouvre_popup(page) {
window.open(page,"nom_popup","menubar=no, status=no, scrollbars=yes,  width=2480, height=3508");
}
</SCRIPT>    
    <script>
function popupCenter(url, title, w, h, t) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+t+', left='+left);
} 
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script> 
$(document).ready(function() 
{  
 $("input").keydown(function()  
  { 
   if( $(this).attr("contenteditable") == "true") 
   {    
    // le"id" du td doit contenir l'id de la BDD 
    // le "name" doit contenir le nom du champ à modifier 
     
                var contenu_avant = $(this).text(); 
                var id_bdd = $(this).attr("id"); 
                var champ_bdd = $(this).attr("name"); 
	
      alert("avant =" + contenu_avant); 
                 
    $(this).blur(function() 
        { 
         var contenu_apres = $(this).text(); 
           alert("contenu apres = " + contenu_apres); 
         
        if (contenu_avant != contenu_apres) { 
		alert("contenu apres = " + contenu_apres); 
		  var parametre = {id:id_bdd,champ:champ_bdd,contenu:contenu_apres} ; 
		  alert(JSON.stringify(parametre)) ; 
		  $.ajax({ 
			url: "invoice_dynamic_table/UpdatedynamiqueTmpArt.php",  
			type: "POST",  
			data: parametre,  
			success: function(html) { 
			  console.log(html);    
			   alert(id_bdd); 
			} ,
			error: function(xhr, status, error) {
			  console.log('error ajax');
			  console.log(error);
			  var err = eval("(" + xhr.responseText + ")");
			  alert(err.Message);
			}
		   }); 
		  } 
          
        }); 
     
   };     
             
  }); 
});   

   
</script> 
</head>
<body>
<div class="container">



  <div class="row clearfix">
    <div class="col-md-12">
      <form  id="form" class="form-horizontal form-label-left" method="post" action="">
      <div class="row clearfix" style="margin-top:20px">
    
      <div class="row">
 <div class="col-md-6">
    <table class="table table-bordered table-hover" id="tab_logic_total">
  <tbody>
    <tr>
      <th class="text-center">Total</th>
      <td class="text-center"><input type="number" name='sub_total' placeholder='0.00' class="form-control" id="sub_total" value="" readonly/ style="font-size:36px; color:#900; font-weight:bold"></td>
    </tr>
    <tr>
      <th class="text-center">Remise</th>
      <td class="text-center"><div class="input-group mb-2 mb-sm-0">
        <input type="number" class="form-control" id="tax" placeholder="0" name="remise">
        <div class="input-group-addon">%</div>
      </div></td>
    </tr>
    <tr>
      <th class="text-center">Montant Remise</th>
      <td class="text-center"><input type="number" name='tax_amount' id="tax_amount" placeholder='0.00' class="form-control" readonly/></td>
    </tr>
    <tr>
      <th class="text-center">Total TTC</th>
      <td class="text-center"><input type="number" name='total_amount' id="total_amount" placeholder='0.00' class="form-control" readonly  value="" style="font-size:36px; color:#900; font-weight:bold"/></td>
    </tr>
  </tbody>
</table>
 </div>
 
 <div class="col-md-6">
   <table class="table table-bordered table-hover">
  <tbody>
    <tr>
      <th class="text-center">Montant Reçu</th>
      <td class="text-center"><input type="text" name="mtremi" id="mtremi" style="background-color:#FFF;font-size:25px; font-weight:bold; text-align:right"    onkeyup="mensualites();" class="form-control"/></td>
    </tr>
    <tr>
      <th class="text-center">Monnai</th>
      <td class="text-center"><input type="text" name="monnai" id="monnai" style="background-color:#9F3;font-size:25px; font-weight:bold;text-align:right" class="form-control" /></td>
    </tr>
    <tr>
      <th class="text-center">Montant Rendu</th>
      <td class="text-center"><input type="text" name="monnai_remi" id="monnai_remi" onkeyup="mensualite();" style="background-color:#FFF;font-size:25px; font-weight:bold; text-align:right" class="form-control"/></td>
    </tr>
   <!--
    <tr>
      <th class="text-center">Avoir</th>
      <td class="text-center"><input type="text" name="avoir"  id="avoir" style="background-color:#FFF;font-size:25px; font-weight:bold; text-align:right" class="form-control" /></td>
    </tr>
    -->
    <tr>
      <th class="text-center">Date</th>
      <td class="text-center"><input type="text" name="date_vente"  id="date_vente" style="background-color:#FFF;font-size:16px; font-weight:bold;  text-align:center" value="26/05/2018"  class="form-control"/></td>
    </tr>
    <tr>
      <th class="text-center"><a href="supprimer/suppr_tmp_article_i3.php?id=&clef=ab0T2Uk8&st=1" class="btn btn-danger btn-lg"> <span class="glyphicon glyphicon-trash"></span> Annuler Vente </a></th>
      <td class="text-center"><input  type="submit" name="submit" class="btn btn-success btn-lg"  value="EMETTRE TICKET"></td>
    </tr>
  </tbody>
</table>
 </div>
</div>












      </div>
      <table class="table table-bordered table-hover" id="tab_logic" width="50%">
        <thead>
          <tr style="font-size: 28px; font-weight: bold;">
            <th class="text-center" width="2%"> # </th>
             <th class="text-center" width="2%"> </th>
            <th class="text-center" width="25%"> Designation </th>
            <th class="text-center" width="5%">Réf</th>
            <th class="text-center" width="5%"> Qte </th>
            <th class="text-center" width="5%"> </th>
            <th class="text-center" width="5%"> Prix </th>
            <th class="text-right" width="10%"> Total </th>
          </tr>
        </thead>
        <tbody>
                  <tr id='addr1'></tr>
        </tbody>
      </table>
    </div>
  </div>

  
     </form>
    </div>
  </div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    var i=1;
    $("#add_row").click(function(){b=i-1;
      	$('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);
      	$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      	i++; 
  	});
    $("#delete_row").click(function(){
    	if(i>1){
		$("#addr"+(i-1)).html('');
		i--;
		}
		calc();
	});
	
	$('#tab_logic tbody').on('keyup change',function(){
		calc();
	});
	$('#tax').on('keyup change',function(){
		calc_total();
	});
	

});

function calc()
{
	$('#tab_logic tbody tr').each(function(i, element) {
		var html = $(this).html();
		if(html!='')
		{
			var qty = $(this).find('.qty').val();
			var price = $(this).find('.price').val();
			$(this).find('.total').val(qty*price);
			
			calc_total();
		}
    });
}

function calc_total()
{
	total=0;
	$('.total').each(function() {
        total += parseInt($(this).val());
    });
	$('#sub_total').val(total.toFixed(2));
	tax_sum=total/100*$('#tax').val();
	$('#tax_amount').val(tax_sum.toFixed(2));
	$('#total_amount').val((total-tax_sum).toFixed(2));
}
</script>
</body>
</html>
</td>
    <td></td>
  </tr>
</table>
<script type="text/javascript"> document.monforrmuilaire.search.focus(); </script>

<script type="text/javascript">
      window.onload=function(){
     // $('.selectpicker').selectpicker();


/*      // scrollYou
      $('.scrollMe .dropdown-menu').scrollyou();

      prettyPrint();
      };*/
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/bootstrap-select.min.js">
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.11.2/js/i18n/defaults-fr_FR.min.js"></script>

<script type="text/javascript">
$(function() {
	"use strict";
	var self = null;
	
	var Website = {};
	Website.Components = {};
	
	
	Website.Components.FormImage = {
	    init : function(){
	        self.initSelectHandler();
	        self.initAddAlbumHandler();
	    },
	    initSelectHandler : function (){
	        $('#choose-album').on('changed.bs.select', function (e, clickedIndex, newValue, oldValue) {
                  // do something...
                  console.log(e)
                  console.log(clickedIndex)
                  console.log(newValue)
                  console.log(oldValue)
            });
	    },
	    initAddAlbumHandler : function(){
	        $('#add-album-valid-button').click(function(){
	           	$('#choose-album').append($('<option>', {
                    value: 'D',
                    text: $('#album-title').val()
                })); 
	        });
	    }
	};
	self = Website.Components.FormImage; 
	
	Website.Components.FormImage.init();
});
}
</script>
</body>
</html>


 
</div>
 <p> </p>
</body>
</html>
</body>
</html>

Votre réponse