Bouton radio avec document.forms.submit

Version imprimable

Bonjour à tous,

J'ai un problème avec mon bouton radio qui ne switch plus quand je sélectionne un autre bouton radio, le bouton radio ne se change pas à l'affichage et reste sur celui cocher par défaut, je voudrais pouvoir changer de bouton radio quand je sélectionne un bouton radio non coché et que celui-ci soit envoyé en paramètre dans l'url. Connaissez-vous une solution en javaScript s'il vous plaît ?

Merci d'avance pour votre aide !
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 <FORM name=form_naissanceACTION='<?php echo $PHP_SELF ?>?choix_naissance=$choix_naissance' method='GET'> <?php for ($i=1;$i<=$nb_soc;$i++) { ?> <input type="radio" id="id_naissance" name="choix_naissance" value="<?php echo $les_naissance[$i]?>" <?php if ($choix_naissance== $les_naissance[$i]) {echo "checked";} ?> onClick="document.forms['form_naissance].submit();"> <?php echo $noms_naissance[$i]?><br> <?php } ?> </form>

05/01/2017, 18h08
danielhagnoul
Il y a beaucoup de choses à dire sur ce code.
- Ce n'est pas du JS. Pour le forum JS, il faut donner le code source de la page web.
- Un ID doit être unique dans la page web <input type="radio" id="id_naissance" ....
- onClick="document.forms['form_naissance].submit();" fait ce qui est demandé, donc la page est rafraîchie et vous ne voyez jamais le changement.
06/01/2017, 18h50
Kilik75

Je suis désolé je pensais être sur le bon forum vu que c'est la fonction "document.forms.submit" qui me pose problème. Connaissez-vous un moyen d'utiliser cette fonction sans rafraichir la page ou en bloquant le rafraichissement de page lors de la soumission ? J'ai besoin que la valeur du vouton radio choisi soit envoyé en url c'est pour ça que j'ai utilisé cette fonction à la base.

Il faut intercepter l'événement "submit" et prendre la valeur des éléments du formulaire au moment de la transaction AJAX.

Il y a beaucoup d'exemples de transactions AJAX dans le forum jQuery, ce qui implique l'utilisation de jQuery.

Il y en a certainement dans ce forum, mais la méthode ancienne était assez pénible et je ne l'ai jamais utilisée.

Ci-dessous un exemple utilisant ma méthode (nécessite Chrome, Firefox ou Edge) :

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="author" content="Daniel Hagnoul">
  <title>Test</title>
  <style>
 
  </style>
  <script>
    'use strict';
 
    document.addEventListener( 'DOMContentLoaded', ev => {
      
   });
    
    window.addEventListener( 'load', ev => {
      
      const kProcessStatus = r => {
        // thenable, pour fetch()
        if ( r.status === 200 || r.status === 0 ){
          return Promise.resolve( r );
        } else {
          return Promise.reject( new Error( r.statusText ) );
        }
      };
      
      document.querySelector( "[name='form_naissance']" ).addEventListener( "submit", ev => {
        ev.preventDefault();
        ev.stopPropagation();
        
        // debug, touche F12
        //console.log( document.querySelector( "[name='choix_naissance']:checked" ).value );
        
        // fetch, voir mon billet :
        // http://www.developpez.net/forums/blogs/285162-danielhagnoul/b1066/fetch-tient-promesses-decouverte-premiers-essais/
        
        fetch( 'test3.php', {
          'method' : 'post',
          'body' : new FormData( ev.target )
        })
        .then( r => kProcessStatus( r ) )
        .then( r => r.text() )
        .then( text => console.log( text ) )
        .catch( er => console.log( er ) );
        
      }, false );
      
    });
  </script>
</head>
<body>
  <main>
 
    <form name="form_naissance">
      <input type="radio" name="choix_naissance" value="1" checked> Naissance 1<br>
      <input type="radio" name="choix_naissance" value="2"> Naissance 2<br>
      <input type="radio" name="choix_naissance" value="3"> Naissance 3<br>
      <input type="submit">
    </form>
 
  </main>
</body>
</html>

Fichier d'essai "test3.php"

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
header( 'Access-Control-Allow-Origin : *' );
header( 'Content-Type: text/html; charset=utf-8' );
 
function test_input( $data ){
  $data = trim( $data );
  $data = stripslashes( $data );
  $data = htmlspecialchars( $data );
  return $data;
}
 
$inputValue = '';
 
if ( $_SERVER[ 'REQUEST_METHOD' ] == 'POST' ){
  $inputValue = test_input( $_POST[ "choix_naissance" ] );
}
 
if ( !preg_match( '/^[\w\'\€\% ]*$/u', $inputValue )) {
  $inputValue = "Échec, caractères interdits !"; 
}
 
echo $inputValue;
?>