Posez votre question Signaler

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

Messages postés
486
Date d'inscription
lundi 24 août 2009
Dernière intervention
15 mars 2019
 - - Dernière réponse : jordane45
Messages postés
25048
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
26 mars 2019
 - 26 mai 2018 à 16:46
Javascript / DHTML Posez votre question Signaler
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            


                            
                    Afficher la suite 
                
                                

                        

                    

    


            


        

            
Votre réponse

                

    

                

                Répondre au sujet
            

        

                

            

            
    

                    
1 réponse

        
        

    
    

            

            
    
    

    


                    Signaler
            
                Commenter la réponse de jordane45
        
        

                

    

    


                    

                
            

                
        
        
            

                                        
Messages postés

                        
25048

                                        
Date d'inscription

                    
mercredi 22 octobre 2003

                                    
Statut

                    
Modérateur
                    
Dernière intervention

                    
26 mars 2019

                            

        
    
                365
                        
                    
                
            

    


    

        

        
        
0

        
Merci

                    

                
            

            

        


    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); 
} ,





 
    

            

        
    

        
        
        
        
        

    


        

                    
Afficher les 13 commentaires        

                

        

                

                

        

                

                

        

                

                

        

                

                

        

                

                

        

                

                

        

                

                

        

                

                

        

        
        
        
        

            
                


                    Signaler
                            Commenter la réponse de msi79
                        

                

    


    

        
                

            

    

                
                
        msi79
        
            

                                        
Messages postés

                        
486

                                        
Date d'inscription

                    
lundi 24 août 2009

                                    
Dernière intervention

                    
15 mars 2019

                            

        
    
            -
                
    

    
    
    
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>

    

            

            


                

                

        

        
        
        
        

            
                


                    Signaler
                            Commenter la réponse de msi79
                        

                

    


    

        
                

            

    

                
                
        msi79
        
            

                                        
Messages postés

                        
486

                                        
Date d'inscription

                    
lundi 24 août 2009

                                    
Dernière intervention

                    
15 mars 2019

                            

        
    
            -
                
    

    
    
    
alert("avant =" + contenu_avant);
 et apres retourne tjrs rien    

            

            


                

                

        

        
        
        
        

            
                


                    Signaler
                            Commenter la réponse de jordane45
                        

                

    


    

        
                

                    

                
            

                        
                
        jordane45
        
            

                                        
Messages postés

                        
25048

                                        
Date d'inscription

                    
mercredi 22 octobre 2003

                                    
Statut

                    
Modérateur
                    
Dernière intervention

                    
26 mars 2019

                            

        
    
                365
                -
                
    

    
    
    
Quand je fais CTR + U ou inspecter ca m'envoie sur une autre page qui n'affiche rien.

dc j'ai compié le code 


Tu fais CTRL + U  ... dans ton navigateur internet lorsque tu affiches la page....hein ???

Par ce que... je veux voir le code source "généré" et non celui qui contient ton php !

Et puis.. je t'ai donné un code... pourquoi ne l'as tu pas mis sur ta page ???    

            

            


                

                

        

        
        
        
        

            
                


                    Signaler
                            Commenter la réponse de msi79
                        

                

    


    

        
                

            

    

                
                
        msi79
        
            

                                        
Messages postés

                        
486

                                        
Date d'inscription

                    
lundi 24 août 2009

                                    
Dernière intervention

                    
15 mars 2019

                            

        
    
            -
                
    

    
    
    
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>
    

            

            


                

                

        

        
        
                    
            
        

            
                


                    Signaler
                            Commenter la réponse de jordane45
                        

                

    


    

        
                

                    

                
            

                        
                
        jordane45
        
            

                                        
Messages postés

                        
25048

                                        
Date d'inscription

                    
mercredi 22 octobre 2003

                                    
Statut

                    
Modérateur
                    
Dernière intervention

                    
26 mars 2019

                            

        
    
                365
                -
                
    

    
    
    
Je dois être aveugle.. je ne vois pas ton champ articleQuant    

            

            


            

            

                

                        

                

                    

                        Commenter la réponse de jordane45
                        
                    

                

                
            


        

                    

                

        

    
    
    
    

                    

            
Votre réponse

                

    

                

                Répondre au sujet
            

        

            
        
            Posez votre question        

        










    

                
S'inscrire maintenant

        
Vous n'êtes pas encore membre ? 

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

    

    

        

            

                

                
Les membres obtiennent plus de réponses que les utilisateurs anonymes.

            

        
                                        
        

            

                

                
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

            

        

        

            

            
Le fait d'être membre vous permet d'avoir des options supplémentaires.