11548 sujets

JavaScript, DOM et API Web HTML5

Formulaire dynamique

Bonjour,

Je souhaiterai savoir comment faire un formulaire dynamique de ce type là : http://www.culinaryculture.com partie Sign Up

Je voudrais faire le même effet dynamique, c'est à dire quand on click sur le champs la value disparaît et quand on re-click en dehors du formulaire la value revient automatiquement.

Si quelqu'un pouvait m'aider ça serait super.

Merci beaucoup
Salut,

Voilà ce que j'avais fait avec jquery la dernière fois que j'ai dû faire ça :

	$('#prenom').focus(function(){
		if($('#prenom').val()=='Votre prénom')
		{
			$('#prenom').val('');//si la valeur du champ est celle de base, on la remplace par du vide en entrant
		}
	});
		
	$('#prenom').blur(function(){
		
		if($('#prenom').val()=='')
		{
			$('#prenom').val('Votre prénom');//si la valeur du champ n'a pas changé, on met le texte de base
		}
	});


Par contre il faut le multiplier en fonction du nombre d'éléments, je pense que tu peux le faire en mettant le code pour tous les éléments avec une classe un ou id ou même le type input.
Voilà même ce qu'ils ont fait :

$("#nav form input").each(function() {
				var id = $(this).attr("id");
				var val = $(this).prev().html();
				if(this.value == '') this.value = val;
				$(this).focus(function(){
						if(this.value == val) this.value = '';
				      }).blur(function(){
						if(this.value == '') this.value = val;
				});
			});


Sur chaque élément input du formulaire contenu dans l'élément avec l'id nav, ils mettent une fonction. Cette fonction stocke l'id de l'élément et le contenu de l'input. Puis ils ajoutent des fonctions sur cet élément quand tu cliques dedans et quand tu en ressors (focus et blur).
Ça ne marche pas T.T


$("#contact_form form input").each(function() { 
                var id = $(this).attr("id"); 
                var val = $(this).prev().html(); 
                if(this.value == '') this.value = val; 
                $(this).focus(function(){ 
                        if(this.value == val) this.value = ''; 
                      }).blur(function(){ 
                        if(this.value == '') this.value = val; 
                }); 
            });


et mon formulaire :


<div id="contact_form">
<form action="envoicontact.php" method="post" onsubmit="return Valid(this);" enctype="multipart/form-data">
<table>
<tr>
<td><input type="text" name="name" onclick="this.value = ''" value="<?php echo (CONTACT_NOM) ?>" /></td>
</tr>
<tr>
<td><input type="text" name="number" onclick="this.value = ''" value="<?php echo (CONTACT_NUMBER) ?>" /></td>
</tr>
<tr>
<td><input type="text" name="email" onclick="this.value = ''" value="<?php echo (CONTACT_EMAIL) ?>" /></td>
</tr>
<tr>
<td><textarea name="message" id="InputMessage" onclick="this.value = ''"><?php echo (CONTACT_MESSAGE) ?></textarea></td>
</tr>
<tr>
<td><input type="submit" name="submit" id="button" value="<?php echo (CONTACT_ENVOYER) ?>" /></td>
</tr>
</table>
</form>
</div>

Modifié par Designbutterfly (20 Nov 2009 - 17:15)
Bonjour,

En même temps je sais pas ce que contient val mais c'est surement pas la valeur pas défaut (null ?).

$(document).ready(function(){
	$("#contact_form form input").each(function(){
		var $this = $(this);
		var val = $this.val();

		$this.focus(function(){
			if($this.val() === val)
				$this.val("");
		}).blur(function(){
			if($this.val() === "")
				$this.val(val);
		});
	});
});
Sujet clos
Aller à