Changer le type d'un input sans changer sa value

onBlur="this.type='submit'"

Sujet résolu

12 décembre 2010 à 19:04:41

Bonjour, j'ai créé une page de cryptage qui consiste en un formulaire et le traitement des données envoyées en PHP. (je vous conseille d'aller voir la page, ce sera plus clair que mes explications)
En voici le code entier :

<?php

if (isset($_POST['pass']) && $_POST['pass'] != "") {
if (strlen($_POST['pass']) >= 3) {
	$pass = $_POST['pass'];
	if (!preg_match("#[^a-zA-Z0-9]#", $pass)) {
		echo '<span style="color:green">
		Votre mot de passe est : </span>' . $pass . '<br />
		<span style="color:green">
		Votre mot de passe crypté est : </span>' . sha1($pass) . '<br /><br />';
	} else {
		echo "<p style='color:red'>Le mot de passe ne peut contenir que des caractères alphanumériques</p>";
	}
} else {
	echo "<p style='color: red'>Le mot de passe est trop petit</p>";
}
}

?>

<form method="post">
<label for="mdp" style="display:block;width:450px;float:left;">Entrez le mot de passe à crypter (entre 3 et 20 caractères)</label><input type="text" onBlur="javascript:this.type='submit'" style="width:200" name="pass" maxlength="20" />
<p style="color:blue">Les caractères acceptés sont : A B C D E F G H I J K L M N O P Q R S T U V W X Y Z a b c d e f g h i j l m n o p q r s t u v w x y z 0 1 2 3 4 5 6 7 8 9</p>
</form>

Le problème est que lorsque l'on clique à côté du champ de saisie, le champ devient un bouton submit, nickel, sauf que la valeur du champ n'est plus le mot écrit par le visiteur mais "envoyer". En gros, si j'entre "Bonjour", le PHP va crypter "Envoyer" et pas "Bonjour".
Comment faire pour que mon champ conserve la valeur entrée par le visiteur tout en changeant de type ?

Au passage, je n'ai pas commenté le code par manque de temps, mais je pense qu'il est compréhensible :-°

LCaba

12 décembre 2010 à 20:27:38

Salut,
Faux croire que la value est réinitialisée quand on change de type, donc sauvegarde la avant le changement :

<input onblur="var v = this.value; this.type = 'submit'; this.value = v;" />

Par contre, j'ai pas regardé le site, mais en général, javascript et cryptage, ça tient pas debout.

Cabinet vétérinaire à Angers

Anonyme

12 décembre 2010 à 21:50:10

Déja, ca marche pas (en ne marchera jamais) avec IE.

Tu devrais créer un submit caché et l'afficher lors du blur de l'autre input

lolown

13 décembre 2010 à 0:31:43

En passant, tu devrais faire une vérification php du nombre de caractères rentrés... car avec Opera, je suis directement allé modifier ton code source afin d'avoir un maxlenght (input) de 100, donc j'ai un peu trafiqué ton système

NoseborN

13 décembre 2010 à 9:19:49

Bonjour,
Désolé mais je n'ai pas vraiment de réponse à t'apporter.
Mais ton problème m'a poussé à faire quelques testes dont vous pouvez voir un aperçu.

Quand on change la valeur d'un champ et qu'on le passe en bouton, la valeur ne suit pas. Mais si on effectue 2 changement on retrouve notre valeur.

Je comprend pas bien ...
Si quelqu'un est capable de nous expliquer cela. =)

xHackerZ

13 décembre 2010 à 18:00:18

Citation : LCaba

Salut,
Faux croire que la value est réinitialisée quand on change de type, donc sauvegarde la avant le changement :
<input onblur="var v = this.value; this.type = 'submit'; this.value = v;" />
Par contre, j'ai pas regardé le site, mais en général, javascript et cryptage, ça tient pas debout.

Effectivement ça fonctionne mais ce n'est pas magnifique...

J'avais pensé à ajouter un <input type="hidden"> lors du onBlur, mais j'ai du mal niveau conception :
- Comment l'ajouter ? J'ai entendu parler de InnerHTML mais je connais pas trop :euh:

- Comment affecter au hidden la valeur inscrite par l'utilisateur ?

Au fait, le javascript c'est juste pour la partie esthétique, le cryptage est en PHP

LCaba

13 décembre 2010 à 21:42:22

Citation : xHackerZ

Effectivement ça fonctionne mais ce n'est pas magnifique...

Tu feras rien de magnifique tant que tu feras du javascript online (= dans les attributs HTML) :-°

Cabinet vétérinaire à Angers

xHackerZ

14 décembre 2010 à 6:47:58

Bon, bah mon sujet est résolu. Merci à tous

Anonyme

14 décembre 2010 à 12:54:06

Et que ça marche pas avec IE, tu t'en fout ? o_O

LCaba

14 décembre 2010 à 16:18:37

Ha oui les changement de type d'input sous IE...

<input onblur="
    var inp = document.createElement( 'input ');
    inp.type = 'submit';
    inp.value = this.value;
    this.parentNode.insertBefore( inp, this );
    this.parentNode.removeChild( this );
" />

Et voilà

Cabinet vétérinaire à Angers

xHackerZ

14 décembre 2010 à 17:39:37

Citation : LCaba

Ha oui les changement de type d'input sous IE...

<input onblur="
    var inp = document.createElement( 'input ');
    inp.type = 'submit';
    inp.value = this.value;
    this.parentNode.insertBefore( inp, this );
    this.parentNode.removeChild( this );
" />

Et voilà

En mettant ce code pour onBlur, le script ne fonctionne plus (en tout cas sous Firefox) o_O

EDIT : Après quelques tests supplémentaires, voici le code source de ma page :

<?php

if (isset($_POST['pass']) && $_POST['pass'] != "") {
if (strlen($_POST['pass']) >= 3 && strlen($_POST['pass']) <= 20) {
	$pass = $_POST['pass'];
	if (!preg_match("#[^a-zA-Z0-9]#", $pass)) {
		echo '<span style="color:green">
		Votre mot de passe est : </span>' . $pass . '<br />
		<span style="color:green">
		Votre mot de passe crypté est : </span>' . sha1($pass) . '<br /><br />';
	} else {
		echo "<p style='color:red'>Le mot de passe ne peut contenir que des caractères alphanumériques</p>";
	}
} else {
	echo "<p style='color: red'>Le mot de passe doit contenir entre 3 et 20 caractères</p>";
}
}

?>

<form method="post">

<input 
type="text" 
onBlur="var v = this.value;
        var input = '<input type=\'hidder\' value=\''+v+'\' name=\'pass\' />';
        this.type = 'submit';
        this.value = 'Crypter';
        document.getElementById("hidden").innerHTML = input;" 
id="mdp" 
style="width:205;
       text-align: center;" 
name="pass" />

<label 
for="mdp" 
style="display:block;
       width:370px;
       float:left;">

Mot de passe à crypter (entre 3 et 20 caractères) >> 

</label>

<span id="hidden"></span>

<p 
style="color:blue">

Les caractères acceptés sont : 
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 
a b c d e f g h i j k l m n o p q r s t u v w x y z 
0 1 2 3 4 5 6 7 8 9

</p>

</form>

Et ce code ne fonctionne pas (onBlur)
Une explication à ce léger problème ?

LCaba

14 décembre 2010 à 19:57:14

Faut virer l'espace après input dans la première ligne :

<input onblur="
    var inp = document.createElement( 'input' );
    inp.type = 'submit';
    inp.value = this.value;
    this.parentNode.insertBefore( inp, this );
    this.parentNode.removeChild( this );
" />

Cabinet vétérinaire à Angers

xHackerZ

15 décembre 2010 à 13:18:41

Okay, okay... Mais en mettant ton code à part, pourquoi est-ce que mon code ne fonctionne pas ?

LCaba

15 décembre 2010 à 15:50:45

A part ?

Cabinet vétérinaire à Angers

xHackerZ

15 décembre 2010 à 15:54:02

Je voulais dire : En utilisant le code que j'ai donné (PHP, XHTML et JS), où sont les erreurs ? :/

LCaba

15 décembre 2010 à 18:08:10

Ce ne sont pas des erreurs en soit, c'est juste que le navigateur ne sauvegarde pas (enfin j'ai pas testé mais d'après ce que tu dis c'est le cas), l'ancienne valeur lors du changement de type. Autre problème, IE n'accepte pas qu'on touche au type des éléments input. Enfin, tu utilises le préfixe "javascript:", ça n'a aucun intérêt, et c'est moche.

Cabinet vétérinaire à Angers

xHackerZ

16 décembre 2010 à 15:36:27

C'est bon, j'ai débusqué et corrigé les erreurs dans mon code et celui-ci fonctionne.
Pour IE, je vais mettre ton code, LCaba. Merci encore

LCaba

16 décembre 2010 à 17:39:25

En fait j'ai mieux :

<input onblur="
    var inp = document.createElement( 'input' );
    inp.type = 'submit';
    inp.value = this.value;
    this.parentNode.replaceChild( inp, this );
" />

Cabinet vétérinaire à Angers

xHackerZ

17 décembre 2010 à 16:34:55

Okay, je prends note