High-Tech Santé Médecine Droit-Finances

Réalisation

vidéo numérique

Rechercher : dans
Par :

[javascript] Modifier Info Formulaire

Dernière réponse le 2 avr 2009 à 12:03:04 Maillon, le 27 mar 2009 à 17:01:18 
 Signaler ce message aux modérateurs

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,

Configuration: Windows XP
Firefox 2.0.0.20

Meilleures réponses pour « [javascript] Modifier Info Formulaire » dans :
Javascript - Modifier la hauteur (height) d'un élément HTML Voir Pour modifier la hauteur d'un élément HTML en javascript, il suffit d'utiliser sa propriété de style "height". Pour cela vous pouvez y faire référence de la manière suivante : Si vous souhaitez connaître la hauteur (height) d'un bloc HTML, il...
Modifier formulaire contact Outlook 2007 Voir
[JavaScript]Envoyer formulaire au chargement (Résolu) Voir
[Firefox] Personnaliser les pages web avec Greasemonkey VoirC'est quoi, GreaseMonkey ? Exemple 1 Exemple 2 XPath Fonctions utilitaires removeElement() removeAttributeOfElement() setAttributeOfElement() injectCSS() Exemple 3 Liens C'est quoi, GreaseMonkey ? GreaseMonkey est une extension...
Javascript - Date de dernière modification de la page VoirIl est possible, en langage Javascript, d'afficher la date de dernière modification de la page Web grâce à la propriété lastModified de l'objet document :
Javascript - Effacer un champ de formulaire lors du clic (focus) Voir
Javascript - Les chaînes de caractères VoirQu'est-ce qu'une chaîne de caractère Une chaîne de caractère est, comme son nom l'indique, une suite de caractères. On la représente par la suite de caractères encadrée par des guillemets simples (') ou doubles ("), sachant que les deux types de...
Javascript - Les variables VoirLe concept de variable Une variable est un objet repéré par son nom, pouvant contenir des données, qui pourront être modifiées lors de l'exécution du programme. En Javascript, les noms de variables peuvent être aussi long que l'on désire,...
Javascript - l'objet Array VoirLes particularités de l'objet Array L'objet Array est un objet du noyau Javascript permettant de créer et de manipuler des tableaux. Voici la syntaxe à utiliser pour créer une variable tableau : var x = new Array(element1[, element2, ...]); Si...
Posez votre question Répondre

1

Ozareff, le 28 mar 2009 à 11:39:44

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épondre à Ozareff

2

Maillon, le 30 mar 2009 à 08:38:22

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épondre à Maillon

3

Maillon, le 30 mar 2009 à 14:09:35

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épondre à Maillon

4

Maillon, le 1 avr 2009 à 13:50:54

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,

   
Répondre à Maillon

5

 Maillon, le 2 avr 2009 à 12:03:04

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,

   
Répondre à Maillon
Posez votre question Répondre
Ils ont besoin de votre aide
Collection CommentÇaMarche.net