Discussion :

[ovdz]

Bonjour,

J'espère que quelqu'un pourra m'aider car je ne n'arrive pas à faire ce que je veux. J'ai essayé pleins de trucs mais en vain.

Voilà mon problème :
J'ai un formulaire avec :
- 2 inputs text où l'utilisateur saisi une 'date de début' et une 'date de fin'
- 2 inputs radio qui ne sont pas cochés par défaut

Voici le code html

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
 
<form action="{$smarty.server.REQUEST_URI}" method="post" class="clearfix">
     <p class="clearfix"><span class="text-right">Période</span>
          <input class="dates" name="agd_date_debut" type="text" id="agd_date_debut" value=""/>
          <input class="dates" name="agd_date_fin" type="text" id="agd_date_fin" value="" />
          <span class="zoneradio" style="margin-left: 6px">
          <input type="radio" name="periode" value="j7" id="j7" {if $periode eq 'j7'}checked="checked"{/if}/>
              <label for="j7">J+7 jours</label>
              </span> <span class="zoneradio">
              <input type="radio" name="periode" value="j31" id="j31"{if $periode eq 'j31'}checked="checked"{/if}/>
              <label for="j31">J+31 jours</label>
              </span>
     </p>
     <input type="submit" class="bouton-filtrer" value="Filtrer les resultats" name="Submit"/>
</form>

Je surveille mes inputs 'date de début' et 'date de fin' et si je clique dans l'un d'eux pour saisir une date alors les 2 boutons 'j7' et 'j31' sont décochés.
Voici le code javascript :

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
 
<script language="JavaScript" type="text/javascript">
var initFormAgenda = function() {	
     if(!$F('agd_date_debut')) $('agd_date_debut').value = 'Date de début';
     if(!$F('agd_date_fin')) $('agd_date_fin').value = 'Date de fin';
 
      $('agd_date_debut').observe('focus',function(e){ 
           $('j7').checked = false;$('j31').checked = false;
           if(!$F('agd_date_debut').match(/^[0-9]{1,2}\/[0-9]{1,2}\/[0-9]{2,4}$/)) $('agd_date_debut').value = '';
      });
 
     $('agd_date_debut').observe('blur',function(e){
          if(!$F('agd_date_debut').match(/^[0-9]{1,2}\/[0-9]{1,2}\/[0-9]{2,4}$/)) $('agd_date_debut').value = 'Date de début'; });
 
     $('agd_date_fin').observe('focus',function(e){
          $('j7').checked = false;$('j31').checked = false;
          if(!$F('agd_date_fin').match(/^[0-9]{1,2}\/[0-9]{1,2}\/[0-9]{2,4}$/)) $('agd_date_fin').value = '';
     });
 
     $('agd_date_fin').observe('blur',function(e){ 
          if(!$F('agd_date_fin').match(/^[0-9]{1,2}\/[0-9]{1,2}\/[0-9]{2,4}$/)) $('agd_date_fin').value = 'Date de fin'; 
     });
 
     $('periode').observe('click', function(e){
          alert(Event.element(e).innerHTML);  
     });
}
document.observe('dom:loaded',initFormAgenda);
</script>

Jusque là tout marche comme il faut.
Par contre, je voudrait observer mais boutons radio et si l'un d'eux est cliqué alors mes 2 inputs text 'date de debut' et 'date de fin' sont remis à zéro.

Quelqu'un a t'il une idée ou une piste ?

Merci d'avance
Isabelle

[gwyohm]

$('periode').observe('click', function(e){
alert(Event.element(e).innerHTML);
});

periode n'est pas un id mais un name, ca ne peut donc pas marcher...

Code :

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

1
2
3
4
5
6
7
8
 
$('j31').observe('click', function(e){
  alert("j31");  
});
 
$('j7').observe('click', function(e){
  alert("j7");  
});