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

Question

Posez votre question Signaler

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

msi79

Messages postés: 496
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 8 novembre 2019

- 25 mai 2018 à 23:17 - Dernière réponse : jordane45

Messages postés: 27059
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 14 décembre 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

A voir également:

Fff designation
Input type - Meilleures réponses
Bootsnipp form - 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épondre Posez votre question

jordane45 · Answer 1 · 2018-05-25T23:27:13+0200

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 27059
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 14 décembre 2019

318 25 mai 2018 à 23:27

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: 496
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 8 novembre 2019

- 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>

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 27059
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 14 décembre 2019

318 - 26 mai 2018 à 11:46

Peux tu me montrer le code html de ton input ? (pour ça tu affiches ta pages dans ton navigateur, puis tu fais "afficher la source" ( ou via le raccourci clavier CTRL + U ))

Et peux tu remplacer ton JS par ça et me dire ce que ça t'affiche dans la console

$(document).ready(function() 
{  
  $("input").keydown(function()  { 
    if( $(this).attr("contenteditable") == "true") {    
      var id_bdd = $(this).attr("id"); 
      var champ_bdd = $(this).attr("name"); 
      var contenu_apres = $(this).val();
      var parametre = {id:id_bdd,champ:champ_bdd,contenu:contenu_apres} ; 
      console.log(parametre);  
      $.ajax({ 
        url: "invoice_dynamic_table/UpdatedynamiqueTmpArt.php",  
        type: "POST",  
        data: parametre,  
        success: function(html) { 
          console.log(html);    
        } ,
        error: function(xhr, status, error) {
          console.log('error ajax');
          console.log(error);
          var err = eval("(" + xhr.responseText + ")");
          alert(err.Message);
        }
      }); 
    } 
  });       
});

Signaler Commenter la réponse de msi79

msi79

Messages postés: 496
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 8 novembre 2019

- 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>

Signaler Commenter la réponse de msi79

msi79

Messages postés: 496
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 8 novembre 2019

- 26 mai 2018 à 12:04

alert("avant =" + contenu_avant);

et apres retourne tjrs rien

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 27059
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 14 décembre 2019

318 - 26 mai 2018 à 14:23

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: 496
Date d'inscription: lundi 24 août 2009
Statut: Membre
Dernière intervention: 8 novembre 2019

- 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>

Signaler Commenter la réponse de jordane45

jordane45

Messages postés: 27059
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 14 décembre 2019

318 - 26 mai 2018 à 16:46

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

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

Votre réponse