[javascript] Modifier Info Formulaire

Résolu

Maillon Messages postés 156 Date d'inscription Statut Membre Dernière intervention -
Maillon Messages postés 156 Date d'inscription Statut Membre Dernière intervention - 2 avril 2009 à 12:03

Bonjour,

Voilà j'ai un tableau en php qui me sort tout plein d'infos qui ressemble à ça :

id | Nom | Prenom | Age | Action
1 | Durand | Leon | 17 | Modifier
2 | Duren | Jules | 15 | Modifier
3 | Dupond | Phil | 19 | Modifier

En fait j'aimerai quand on on clique sur le bouton "Modifier", tout les champs de la ligne deviennent modifiable (c'est-à-dire dans un champ formulaire) et que le bouton "Modifier" devienne "Valider"

Donc si la ligne est en lecture seul alors on à le bouton "Modifier" sur la droite et dès qu'on clique dessus le bouton change et dedans yaurait marquer "Valider". Une fois qu'on clique sur valider la ligne redevient en lecture seule avec le bouton "Modifier".

Est-ce-que quelqu'un saurait faire ce genre de chose ? ou pourrais m'expliquer si c'est possible ou bien une alternative ?

Merci beaucoup.

Cordialement,

Afficher la suite

A voir également:

[javascript] Modifier Info Formulaire
Whatsapp formulaire opposition - Guide
Modifier dns - Guide
Modifier liste déroulante excel - Guide
Crystal disk info - Télécharger - Informations & Diagnostic
Info pc - Guide

5 réponses

Réponse 1 / 5

Ozareff

C'est effectivement tout à fait possible en javascript.
Une solution assez simple consisterait à écrire toutes tes données dans des champs de texte de type input, et à leur ajouter un attribut "readonly" (la lecture seule dont tu parlais) par défaut.
Lors du clic sur le bouton modifier, tu enlèves cet attribut aux champs de la ligne afin qu'ils deviennent modifiables.

Réponse 2 / 5

Maillon Messages postés 156 Date d'inscription Statut Membre Dernière intervention 5

Alors voilà une partie de la solution : (merci à totoAussi)

<html>
<head>
</head>
<body>
<form name='form'>
<table border='1px'>
<tr><td>id</td><td>Nom</td><td>Prénom</td><td>Age</td><td>Action</td></tr>
<tr><td><span id='idSpanId1'>1</span></td><td><span id='idSpanNom1'>Durand</span></td><td><span id='idSpanPrenom1'>Leon</span></td><td><span id='idSpanAge1'>17</span></td><td><span id='idSpanBouton1'><input type='button' id='idBouton1' value='Modifier' onClick='modifier(id);'></span></td></tr>
<tr><td><span id='idSpanId2'>2</span></td><td><span id='idSpanNom2'>Duren</span></td><td><span id='idSpanPrenom2'>Jules</span></td><td><span id='idSpanAge2'>15</span></td><td><span id='idSpanBouton2'><input type='button' id='idBouton2' value='Modifier' onClick='modifier(id);'></span></td></tr>
<tr><td><span id='idSpanId3'>3</span></td><td><span id='idSpanNom3'>Dupond</span></td><td><span id='idSpanPrenom3'>Phil</span></td><td><span id='idSpanAge3'>19</span></td><td><span id='idSpanBouton3'><input type='button' id='idBouton3' value='Modifier' onClick='modifier(id);'></span></td></tr>
</table>
</form>
<script language='javascript'>
function modifier(id)
{objButton=document.getElementById(id);
idNameAndNumber=objButton.id;
model=/\d/;
indexNumero=idNameAndNumber.search(model);
idName=idNameAndNumber.substr(0,indexNumero);
numero=idNameAndNumber.replace(idName,"");
objSpanId=document.getElementById("idSpanId"+numero);
objSpanNom=document.getElementById("idSpanNom"+numero);
objSpanPrenom=document.getElementById("idSpanPrenom"+numero);
objSpanAge=document.getElementById("idSpanAge"+numero);
valeurSpanId=objSpanId.firstChild.nodeValue;
valeurSpanNom=objSpanNom.firstChild.nodeValue;
valeurSpanPrenom=objSpanPrenom.firstChild.nodeValue;
valeurSpanAge=objSpanAge.firstChild.nodeValue;
objSpanId.innerHTML="<input type='text' id='nameId"+numero+"' value=\""+valeurSpanId+"\">";
objSpanNom.innerHTML="<input type='text' id='nameNom"+numero+"' value=\""+valeurSpanNom+"\">";
objSpanPrenom.innerHTML="<input type='text' id='namePrenom"+numero+"' value=\""+valeurSpanPrenom+"\">";
objSpanAge.innerHTML="<input type='text' id='nameAge"+numero+"' value=\""+valeurSpanAge+"\">";
objSpanBoutton=document.getElementById("idSpanBouton"+numero);
objSpanBoutton.innerHTML="<input type='button' id='idBouton"+numero+"' value='Valider' onClick='valider(id);'>";
}
function valider(id)
{objButton=document.getElementById(id);
idNameAndNumber=objButton.id;
model=/\d/;
indexNumero=idNameAndNumber.search(model);
idName=idNameAndNumber.substr(0,indexNumero);
numero=idNameAndNumber.replace(idName,"");
objSpanId=document.getElementById("idSpanId"+numero);
objSpanNom=document.getElementById("idSpanNom"+numero);
objSpanPrenom=document.getElementById("idSpanPrenom"+numero);
objSpanAge=document.getElementById("idSpanAge"+numero);
objSpanId.innerHTML=document.getElementById("nameId"+numero).value;
objSpanNom.innerHTML=document.getElementById("nameNom"+numero).value;
objSpanPrenom.innerHTML=document.getElementById("namePrenom"+numero).value;
objSpanAge.innerHTML=document.getElementById("nameAge"+numero).value;
objSpanBoutton=document.getElementById("idSpanBouton"+numero);
objSpanBoutton.innerHTML="<input type='button' id='idBouton"+numero+"' value='Modifier' onClick='modifier(id);'>";
}
</script>
</body>
</html>

Réponse 3 / 5

Maillon Messages postés 156 Date d'inscription Statut Membre Dernière intervention 5

Par contre comment je peux faire pour que les valeurs que tu modifie soit modifié en base (via un update) (car les infos affichés viennent du base).

J'ai fais mon foreach :

$i = 0;
foreach($aResult as $aRow)
{
$i == $i++;
echo "<tr align='center'>";
echo "<td><span id='idSpanId".$i."'> ".$aRow['id_host']." </span></td>";
echo "<td><a href='/'><span id='idSpanName".$i."'>".$aRow['name_host']."</span></a></td>";
echo "<td><span id='idSpanIP".$i."'> ".$aRow['ip_host']." </span></td>";
echo "<td><span id='idSpanlogin".$i."'> ".$aRow['login_host']." </span></td>";
echo "<td><span id='idSpanpass".$i."'> ".$aRow['pass_host']." </span></td>";
echo "<td><span id='idSpanpass_root".$i."'> ".$aRow['pass_root_host']." </span></td>";
echo "<td><span id='idSpanBouton".$i."'>
<input type='button' id='idBouton".$i."' value='Modifier' onClick='modifier(id);'>
</span></td>";
echo "</tr>";
}

J'espère que vous avez compris :-)

Merci de votre aide.

Cordialement,

Réponse 4 / 5

Maillon Messages postés 156 Date d'inscription Statut Membre Dernière intervention 5

Personne n'aurais une idée ?

Je voudrais juste que quand je clique sur la fonction valider et bien ça update les infos saisie dans la bdd.

Merci de votre aide.

Cordialement,

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 5

Maillon Messages postés 156 Date d'inscription Statut Membre Dernière intervention 5

Bon en fait j'ai fini par trouver : j'ai mis mon foreach dans form et après j'envoie mes infos au php. Et dans ma fonction modifier j'ai mis un submit pour le bouton valider et j'ai supprimer la fonction valider.

Voilà c'est résolu.

Merci encore pour vos idées et votre aide.

Cordialement,

Discussions similaires

Logiciel équivalent à Crystal Disk Info pour Mac.

Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire

Votre réponse

Discussions similaires