CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 13:44:09

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

EDITION D'UN CHAMP

Information sur la source

Note :
Aucune note

Catégorie :Trucs & Astuces Classé sous :édition, input, ajax, formulaire Niveau :Initié Date de création :04/10/2010 Date de mise à jour :05/10/2010 12:04:53 Vu :2 583

Auteur : macgile

Ecrire un message privé

Commentaire sur cette source (1)

Ajouter un commentaire et/ou une note

Description

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

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

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

Historique

05 octobre 2010 12:04:53 :: autre

Sources du même auteur

JEUX MEMORY

Toutes les sources de macgile

Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator

CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm

SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp

TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator

ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol

Toutes les sources de la catégorie Trucs & Astuces

Sources en rapport avec celle ci

UPLOAD PLUSIEURS FICHIERS FANCYUPLOAD V2 par mnouzahir

UPLOAD EN AJAX + FLASH (FANCY UPLOAD) par Vagners

AJAX : COMPLETER AUTOMATIQUEMENT UN FORMULAIRE (<INPUT TYPE=... par phpajax

AJAX - UN SEUL APPEL DE FONCTIONS POUR FAIRE DES LIENS ET SO... par Gwinyam

SCRIPT KIT "JAVASCRIPT" DE VERIFICATION D'UN FORMULAIRE par raydan

Commentaires et avis

Commentaire de nossoctoruss le 14/11/2010 14:40:32

pas mal

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

formulaire: verrouiller un input [ par MeuSli ] Bonjour,Je cherche a verouiller un input de type text x, si je n'ai rien saisi dans un autre input de type text y.Je sais comment verrouiller l'input. prohiber les guillemets des formulaire [ par kishkaya ] voile je n'y connais rien en javascript, je vous demande pas de me faire ca mais j'arrive vraiment pasj'aimerai afficher une alerte lorsque un seul de valider un formulaire avec un href [ par margin ] Bonjour, J'ai toujours utiliser des "input" "type='submit'" pour valider des formulaires. Mon client me demande de valider les formulaires de son pro copier le contenu d'un input dans un autre [ par christobal ] Bonjour, j'aimerai faire en sorte que le contenu d'un INPUT d'un formulaire se réplique dans un autre INPUT du même formulaire et automatiquement.Dans [DEPLACE]Select avec possibilité d'ajout par formulaire pour gestion disques [ par gandalf76fr ] Bonjour, Je suis débutant malgré moi an Ajax, ma spécialité étant le php/mysql. Suite à une demande je suis en train de travailler sur un script de Recuperer des valeurs d'un formulaire pour creer une requete mysql [ par Ze_lola ] Bonjour a tous! Alors voila j'ai un petit problème concernant ajax:il faut que je recupere des valeurs d'un formulaire et que je les réincjecte dans u Récuperation du Focus sur un Input apres mise a jour du div via Ajax [ par izy ] Bonjour, mon problème est le suivant je bosse actuellement sur une page qui fais des ajoute/suppression/motification dans une base mysql et j'aurais b PopUp ajax lors de l'envoi de formulaire [ par newsmatique ] Bonjour,j'ai un formulaire, qui m'envoi des données en GET sur la page traitement.php, je voudrais que lors de l'envoi de ce formulaire cela m'ouvre u ajax and listbox [ par nvinvinvi ] j'ai un formulaire avec 2 listbox (catégorie/sous catégorie) la listbox sous catégorie est construite en fonction du choix fait dans la première. P formulaire AJAX [ par TomSoyer ] Bonjour à tous.Je suis programmeur débutant et j'aimerais bien faire un formulaire en AJAX avec des radio boutons et quand un clic sur 1 de ces radio

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recheche Web Master pour MAJ de plateformes Musical
Budget : 500€
Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP