Bouton radio avec document.forms.submit

**Kilik75** · 04/01/2017, 18h08

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

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

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>

**danielhagnoul** · 05/01/2017, 18h08

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.

**Kilik75** · 06/01/2017, 18h50

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.

**danielhagnoul** · 06/01/2017, 23h48

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

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

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
<?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;
?>

Bouton radio avec document.forms.submit

JavaScript

Discussions similaires

Partager

Partager