Vider des champs

**baggie** · 15/11/2010, 08h59

Bonjour,

un petit problème que je n'arrive pas à résoudre malgré mes différentes tentatives.

Je souhaiterai vider mes champs une fois que l'on a cliqué sur le bouton "ajouter" d'une ligne.

Mes champs à vider (dont deux datepicker) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
<input type="text" id="datepicker1" />
<select id="heuredebut"></select>
<input type="text" id="datepicker2" />
<select id="heurefin"></select>
<button type="button" id="ajout"><img src="..." /></button>

Voici donc en gros ce que j'ai. Et quand on clic sur le bouton d'ajout, je lance un appel ajax. Et il faudrait que les champs se vident à ce moment là.

J'ai testé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
// 1ere tentative
var vide = "";
$("#datepicker1").val(vide);
$("#heuredebut").val('08:00');
$("#datepicker2").val(vide);
$("#heurefin").val('08:00');
 
// 2eme tentative
$("#datepicker1").attr('value','');
$("#heuredebut").attr('value','08:00');
$("#datepicker2").attr('value','');
$("#heurefin").attr('value','08:00');

Mais rien à faire, aucun champ ne se vide ou prend la valeur donnée.
Si vous pouviez m'aider

**scourjean** · 15/11/2010, 09h36

Ceci devrait pouvoir t'aider :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
		<script>
		$(document).ready(function(){
			$("#ajout").click(function(){
				$("#datepicker1").attr('value','');
				$("#heuredebut").attr('value','08:00');
				$("#datepicker2").attr('value','');
				$("#heurefin").attr('value','08:00');
			});
		});
		</script>
	</head>
	<body>
		<form method="POST" action="#">
			<input type="text" id="datepicker1" value="" />
			<select id="heuredebut">
				<option value="08:00">08:00</option>
				<option value="09:00">09:00</option>
				<option value="10:00">10:00</option>
			</select>
			<input type="text" id="datepicker2" value="" />
			<select id="heurefin">
				<option value="08:00">08:00</option>
				<option value="09:00">09:00</option>
				<option value="10:00">10:00</option>
			</select>
			<input type="image" id="ajout" src="..." />
		</form>
	</body>
</html>

**baggie** · 15/11/2010, 11h22

J'ai modifié mon code avec ce que tu as proposé, malheureusement ça ne fonctionne pas comme je souhaite.

Au lieu de vider mes champs, ça ferme complètement le popup (enfin la dialog jquery) que j'avais ouverte.

**scourjean** · 15/11/2010, 11h38

Au lieu de :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form method="POST" action="#">

Essaye :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form id="form1" method="POST" action="#">

Et ajoute ceci dans ton JS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("#form1").submit(function(){
	return false;
});

**Atomya Rise** · 15/11/2010, 12h25

Je te conseil de faire un alert dans ta fonction click() afin de voir ce qu'il renvoie... et si elle est bien appelé lorsque tu clique sur ton bouton.