Edition d'un champ

Commenter

Contenu du snippet

Après l'enregistrement d'un formulaire, est affiché une page résumant les informations saisie, comme par exemple pour un compte utilisateur.

Pour les modifications ont propose en général encore un formulaire avec des champs éditable.

Cette source évite cet allez retour et propose une édition des champs directement dans la page résumant les informations.

Source / Exemple : 


<html>
<head>

<style type="text/css">

.inputEditReadOnly,.inputEdit {
 background-color:transparent;
 margin:0px;
 font-size:1.0em;
 width:98%;
 cursor:default;
}

.inputEditReadOnly {
 border:0px;
 cursor:default;
}

.inputEdit {
 border:1px solid gray;
}
</style>

<script type="text/javascript" language="javascript">

function $(objId)
{
  return document.getElementById(objId)|| null;
}

// PSEUDO FONCTION RETOUR AJAX
function FillContent(objId, objResponse, objOrigine)
{
  switch(objId)
  {
    case "EditionChamp":
    // Colore le champ en vert si reussi(1), sinon rouge(0)
    Tempor      = 800;
    couleur = $(objOrigine).style.color;
    $(objOrigine).style.color = (objResponse == "1")? "green":"red";
    a = setTimeout( "waitColor('"+ objOrigine +"', '"+ couleur +"')", Tempor);
    break;
    default: break;
  }
}

// RESTITUE LA COULEUR DU TEXTE
function waitColor(objId, objColor)
{
  $(objId).style.color = objColor;
}

// MODE EDITION
function editValue(obj)
{
  obj.readOnly = false;
  obj.className = "inputEdit";
}

// MODE READONLY
function saveEdit(obj)
{
  obj.readOnly = true;
  obj.className="inputEditReadOnly";
}

// MISE A JOUR CHAMP (POST nouvelle valeur)
function catchEvent(obj, e)
{
  var ev = window.event? event : e;
  var objSrc = ev.target? ev.target : ev.srcElement;
  var unicode = ev.keyCode? ev.keyCode : ev.charCode;

  // 13 : ENTREE
  if(unicode == 13 && objSrc.readOnly == false)
  {
    objSrc.className = "inputEditReadOnly";
    objSrc.readOnly = true;
    saveChange(objSrc);
  }
}

// SAUVEGARDE EDITION
function saveChange(obj)
{
  if(obj != null)
  {
    var objarray = obj.id.split("-");
    if(objarray.length > 0 )
    {
      // table-nom_champ-id_where-id_value
      // Ex: commande-description-id_commande-15468

      objArg = "&table=" + objarray[0]
      + "&nom_champ="    + objarray[1]
      + "&id_where="     + objarray[2]
      + "&id_value="     + objarray[3]
      + "&value="        + obj.value;
      
      // ENREGISTREMENTS DAND SGBD VIA AJAX

      // SIMLATION RETOUR AJAX
      FillContent("EditionChamp", "1", obj.id)
    }
  }
}
</script>
</head>

<body>
 <br />
 <div>double click sur le texte ci-dessous

   <div style="width:350px;" >
     <input type="text"
     id="commande-description-id_commande-474408"
     class="inputEditReadOnly"
     onblur="this.className='inputEditReadOnly';"
     onchange="saveEdit(this);"
     onkeydown="catchEvent(this, event);"
     ondblclick="editValue(this);"
     value="Modifier ce texte et appuyer sur entrée" readonly />
  </div>
</div>
</body>
</html>

A voir également

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.

Du même auteur (macgile)