1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML
Sujet Précédent Sujet Suivant

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

msi79 Messages postés 505 Date d'inscription lundi 24 août 2009 Statut Membre Dernière intervention 5 février 2023 - 25 mai 2018 à 23:17
jordane45 Messages postés 37279 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 28 mars 2023 - 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:         
            

    



    


            
            

                                    
1 réponse

                            

                


            

        
        
        

                        Réponse 1 / 1
        


        
                    

                

        

                    

        
    

        
    

 
        

                

            
            jordane45
     
    
                    Messages postés
            
                    
    37279 
            
                            Date d'inscription
            mercredi 22 octobre 2003
                            Statut
            Modérateur
                            Dernière intervention
            28 mars 2023
            

            
            341
     

                    

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





 

                
                

    
        

    
            
        0
        
        
    

            



    

        
        
    


        

                            

                        


    

        
        
    

                    

                        

                    

                

                                    
            
            

                


    

                    

    
        

    


    
    

                

            
            msi79
     
    
                    Messages postés
            
                    
    505 
            
                            Date d'inscription
            lundi 24 août 2009
                            Statut
            Membre
                            Dernière intervention
             5 février 2023
            

            
            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
    




    
      
    
        
        0
        
    
    

            



    

        
        
    



            

                    



        

                

                                    
            
            

                


    

                    

    
        

        
    


    
    

                

            
            jordane45
     
    
                    Messages postés
            
                    
    37279 
            
                            Date d'inscription
            mercredi 22 octobre 2003
                            Statut
            Modérateur
                            Dernière intervention
            28 mars 2023
            

            
            341
     



    

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




    
      
    
        
        0
        
    
    

            



    

        
        
    



            

                    



        

                

                                    
            
            

                


    

                    

    
        

        
    


    
    

                

            
            jordane45
     
    
                    Messages postés
            
                    
    37279 
            
                            Date d'inscription
            mercredi 22 octobre 2003
                            Statut
            Modérateur
                            Dernière intervention
            28 mars 2023
            

            
            341
     



    

    26 mai 2018 à 01:10

    






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




    
      
    
        
        0
        
    
    

            



    

        
        
    



            

                    



        

                

                                    
            
            

                


    

                    

    
        

    


    
    

                

            
            msi79
     
    
                    Messages postés
            
                    
    505 
            
                            Date d'inscription
            lundi 24 août 2009
                            Statut
            Membre
                            Dernière intervention
             5 février 2023
            

            
            1
     



    

    26 mai 2018 à 01:18

    






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


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




    
      
    
        
        0
        
    
    

            



    

        
        
    



            

                    



        

                

                                    
            
            

                


    

                    

    
        

    


    
    

                

            
            msi79
     
    
                    Messages postés
            
                    
    505 
            
                            Date d'inscription
            lundi 24 août 2009
                            Statut
            Membre
                            Dernière intervention
             5 février 2023
            

            
            1
     



    

    26 mai 2018 à 01:21

    






    
alert("avant =" + contenu_avant); 




et 

alert("contenu apres = " + contenu_apres); 




retourne rien
    




    
      
    
        
        0
        
    
    

            



    

        
        
    



            

                    



            

            
    

        

        

    

        

            
        

    

    

    

        

        
    

        

        
        
    

        
    


    

    



    






                        

                    

                


                

    


    







    

        Rejoignez-nous