Help! Javascript

Résolu/Fermé

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 - 9 juin 2010 à 20:56
arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 - 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
Javascript void 0 c'est quoi ✓ - Forum Réseaux sociaux
Javascript echo ✓ - Forum PHP
Exercice calculatrice en javascript ✓ - Forum Javascript
Retour à la ligne javascript ✓ - Forum Javascript

6 réponses

Réponse 1 / 6

arsenal_fc Messages postés 125 Date d'inscription lundi 16 mars 2009 Statut Membre Dernière intervention 19 juin 2010 9
9 juin 2010 à 21:21

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 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 498
9 juin 2010 à 21:56

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 jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
9 juin 2010 à 22:10

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 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 498
9 juin 2010 à 22:40

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 jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
9 juin 2010 à 23:36

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 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 498
10 juin 2010 à 13:00

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 jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
10 juin 2010 à 22:56

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 19246 Date d'inscription dimanche 17 février 2008 Statut Contributeur Dernière intervention 21 avril 2024 4 498
11 juin 2010 à 12:12

Tu peux utiliser la variable « valeur » :

nouveauLien.innerHTML = valeur;

arthezius Messages postés 3538 Date d'inscription jeudi 15 mai 2008 Statut Membre Dernière intervention 11 septembre 2016 475
11 juin 2010 à 12:59

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

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule

java script error in the main process

afficher un tableau JS en HTML

Nodejs.exe est-ce un virus

[Javascript] Tables de Multiplication

Discussions similaires

Newsletters