Vider des champs

Version imprimable

Vider des champs

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:

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:

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 :)

Ceci devrait pouvoir t'aider :

Code:

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>

15/11/2010, 11h22
baggie

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.
15/11/2010, 11h38
scourjean
Au lieu de :

Code:

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

Essaye :

Code:

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

Et ajoute ceci dans ton JS :
Code:

1 2 3 $("#form1").submit(function(){ return false; });
15/11/2010, 12h25
Atomya Rise

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.
15/11/2010, 13h08
Bovino

Code:

$("#heuredebut").val('08:00');

Tu n'as pas d'option dans ton select, essayer de lui fixer un value va perturber JavaScript...
15/11/2010, 13h20
baggie

Merci pour l'aide.

Bovino : j'ai bien des <option> à toutes mes listes, je ne les ai pas mises dans mon code ici c'est tout ^^

scourjean : je passe bien dans mon click mais comme tout à l'heure, ma dialog se ferme directement dès que j'ajoute (dû au submit ?) donc je ne peux pas voir si mes champs se vident ou non :?
15/11/2010, 13h35
scourjean

Tu as testé ce que je t'ai dis à 11h38 ? Parce que pour moi ça marche il ne submit pas (ce qui est le soucis de la fermeture de ta popup).
15/11/2010, 14h51
baggie

Oui j'ai bien testé :calim2:
Dès que je mets le submit, même si il doit retourner false, ma fenêtre se ferme complètement.

Je continue à chercher !

EDIT : problème résolu avec .empty() et avec .val('') (mais placé au bon endroit, apparemment ce n'était pas le cas).
02/05/2013, 17h39
medayed1990

faut faire .val('')