Help! Javascript

Résolu

arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention -
arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention - 11 juin 2010 à 12:59

Bonjour,
J'aurai besoin de vos lumière en javascript.
Je voudrai faire en sorte qu'en cliquant sur un lien, celui-ci soit remplacer par un formulaire (composé d'un select et un input submit) sans avoir à recharger la page.
J'ai bien essayé de faire un recherche mais pas facile de cibler ça via un moteur de recherche.
Je n'ai personnellement aucune connaissance en Javascript.
Merci donc à ceux qui auront l'amabilité de m'aider sur ce point.

A voir également:

Help! Javascript
Telecharger javascript - Télécharger - Langages
Afficher un tableau javascript en html ✓ - Forum Javascript
A javascript error occurred in the main process - Forum Windows
A javaScript error occurred in the main process - Forum Handicap / Accessibilté
Javascript est activé mais ne fonctionne pas ✓ - Forum Réseaux sociaux

6 réponses

Réponse 1 / 6

arsenal_fc Messages postés 125 Date d'inscription Statut Membre Dernière intervention 9

Salut arthezius,

<a href="#">Lien</a>
<div id="formulaire">
   <form method="post" action="connexion.php">
	<label>Nom D'utilisateur</label><br/><br/>
	<input type="text" name="utilisateur" class="info" /><br/><br/>
	<label>Mot De Passe ( oublié ?)</label><br/><br/>
	<input type="password" name="pass" /><br/><br/>
	<input type="submit" value="Envoyer" />
   </form>
</div>

Maintenant avec du css Vous devez positionner votre div et mettre un display:none pour qu'on le ne voitpas que lorsque le lien est clické.
maintenant vous devez importer jQuery https://jquery.com/
apres :

<script type="text/javascript">
$(document).ready(function(){
    $('a').click(function(){
		$('#formulaire').toggle();
	});
});
</script>

C'est tout

Réponse 2 / 6

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

Utiliser jQuery rien que pour afficher/masquer un élément sans effet, c'est un peu ... lourd.

Ajoute un ID sur le lien : id="show_hide".
Et le JS :

<script type="text/javascript">
window.onload = function() {
    document.getElementById('show_hide').onclick = function() {
        this.style.display = (this.style.display == 'none') ? 'block' : 'none';
    };
};
</script>

Réponse 3 / 6

arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention 475

Je vais taché d'être plus précis.
Imaginons un lien:

<a>valeur</a>

Je voudrai un javascript qui me remplace ce lien par

<form method="post" action="page.php">
<select name="">
	<option value="a">A</option>
	<option value="b">B</option>
	<option value="c">C</option>
	<option value="d">D</option>
</select>
<input type="submit" name="valid" value="Valider" />
</form>

Ce code sera utiliser dans une application web.
Le but étant en fait de modifier une valeur sans avoir à recharger la page.
La valeur à changer étant le texte qui est sur le lien qui pourra être modifier via le select en l'une des valeurs proposé.
Dans cette exemple, je cherche à remplacer "valeur" par A, B, C ou D (proposé dans le select).
L'idéal aurai même été de faire le tout sans aucun rechargement de page (en ajax par exemple). Mais au pire, si je dois la recharger à la validation du formulaire, ça m'ira très bien aussi.
J'espère avoir été un peu plus clair.
Merci.

Réponse 4 / 6

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

Je t'ai codé un exemple.
Il n'y a plus qu'à y mettre la partie AJAX, mais là, je dois y aller.
Je suppose que tu modifies les données dans ta base de données, et qu'il y a un ID pour chaque entrée, alors j'ai prévu le coup. Il faudra faire un echo en PHP pour afficher l'ID dans le onclick du lien. Ainsi, tu pourras récupérer l'ID pour l'utiliser avec AJAX.
J'ai également prévu le coup pour ceux chez qui AJAX ne fonctionne pas : tu pourras gérer l'envoie du formulaire normalement avec "cible-formulaire.php" ($_POST['id'] contiendra l'id).

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

Posez votre question

Réponse 5 / 6

arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention 475

J'ai testé en brut ce que tu m'as donné comme code et ça fonctionne comme je le veux.
Merci bien pour ton aide.
Reste plus qu'a mettre à jours la base de donnée avec la partie Ajax du script.
L'exemple que j'ai fais était simpliste mais c'est en fait pour faire un changement de statu d'un membre depuis son espace membre.

Réponse 6 / 6

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

Dans ce cas tu n'as pas besoin d'indiquer l'ID, je suppose que tu le stockes dans les variables de session.

Voilà ce que que ça donne avec AJAX :
http://paste.pocoo.org/show/zOE4dRclKRoNi2Qn9Jpl/

updateStatus.php doit ressembler à ça :

<?php
session_start();
$allowed_status = array('online','busy','away','offline');

if(isset($_POST['newStatus']) && isset($_SESSION['id'])) {
	if(in_array($_POST['newStatus'], $allowed_status)) {
		// Opération MySQL
		// Si tout est OK, on affiche "ok"
		echo 'ok';
	} else
		echo 'erreur';
} else
	echo 'erreur';
?>

À toi d'utiliser $_POST['newStatus'] et $_SESSION['id'] pour mettre à jour la table.

arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention 475

Ce que tu m'as fait fonctionne.
J'ai toutefois changé deux choses.
La première:

<p><a href="#" onclick="modifier(this); return false;">Modifier mon statut</a></p>

Devient:

<?php
echo'<p><a href="#" onclick="modifier(this); return false;">'.$data['statu'].'</a></p>';
?>

On clique sur le statu et on peut le modifier.
J'ai complété le fichier updateStatus.php et la mise à jours se fait bien. J'ai contrôlé via phpmyadmin.
Toutefois, ton script réaffichait "Modifier mon statut".
J'ai donc voulu modifier (la deuxième chose) en changeant:

nouveauLien.innerHTML = 'Modifier mon statut';

par

nouveauLien.innerHTML = '<?php echo $data['statu'];?>';

Le statut est bien affiché mais c'est l'ancien qui est affiché.
Cela vient du fait que la page n'étant pas rechargé, la valeur $data['statu'] n'est pas réactualisé non plus. Le statut n'est donc pas changé juste après la validation, du moins à l'affichage.
Peux tu m'aider à changer ça?
Merci beaucoup pour ton aide.

avion-f16 Messages postés 19252 Date d'inscription Statut Contributeur Dernière intervention 4 507

Tu peux utiliser la variable « valeur » :

nouveauLien.innerHTML = valeur;

arthezius Messages postés 3538 Date d'inscription Statut Membre Dernière intervention 475

Merci beaucoup, ça fonctionne maintenant parfaitement comme je le voulais.

Discussions similaires

java script error in the main process

Javascript Arrondi à 2 chiffres après la virgule

javascript:void(0);

Faire un echo dans un script JS

Problème bandeau publicitaire ''Accepter les cookies'' sur le site de la Fnac

Votre réponse

Discussions similaires