Incompatibilité entre JS et ChoiceType

Version imprimable

Bonjour,

Je crée une barre de recherche dans mon projet avec un champ 'isActif' de type boolean

Dans le Form:

Code:

1
2
3
4
5
6
7
8
9
10
11
public function buildForm(FormBuilderInterface $builder, array $options)
{
       $builder->add('isActif',ChoiceType::class, [
                    'label' => 'Actif ?',
                    'required'   => false,
                    'choices'  => [
                        'Actif' => 1,
                        'Inactif' => 0,
                    ]
            ]);
}

Dans mon Twig,

Code:

<button onclick="myFunction()">Effacer</button>

Code:

1
2
3
function myFunction() {
    document.getElementById('isActif').value="";
}

Mon controlle:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class UsersController extends AbstractController
{
    public function index( Request $request)
    {
        $search = new UsersSearch();
        $form = $this->createForm(UsersSearchType::class, $search);
        $form->handleRequest($request);
 
        $repository = $this->getDoctrine()->getRepository(Users::class);
        if($form->isSubmitted() &&$form->isValid()) {
            $users =$repository->findAllVisibleQuery($search);
       }
       return $this->render('admin/users/index.html.twig', [
            'users' => $users,
            'form'=> $form->createView(),
        ] );
    }
}

Le problème, quand je choisie par exemple 'Actif' et puis je clique le bouton Effacer, ce champ n'a pas été effacé, au contraire, il a ajouté selected="selected" dans <option value="1">Actif</option>, j'ai essayé de modifier myFunction() en utilisant selectedIndex = 0, remove(selectedIndex) etc, rien a changé.

Je pense que ça vient de ChoiceType, en fait, isActif est un type de boolean qu'il correspondant Entity Users ($actifuser), il y a des solutions pour mettre les valeurs de choices à partir des valeur de $actifuser ?

Merci par avance

09/02/2022, 16h42
merou19

Bonjour,

En tentant un code de ce genre dans le JS :

Code:

document.getElementsByName('isActif')[0].value = null;

Qu'est ce que ça donne ?

Ou plutôt, vu qu'il y a 2 choix :

Code:

1
2
3
4
function myFunction() {
                document.getElementsByName('isActif')[0].value = null;
                document.getElementsByName('isActif')[1].value = null;
            }

Bonjour,

Merci merou19, j'ai crée cette barre de recherche par FormBuilderInterface, donc dans Twig, la première <option> est automatiquement ajouté. J'ai testé plusieurs méthodes dans myFunction(), il y a que alert() qui fonctionne, les autres n'ont pas marché.
Dans cette barre de recherche, il y a aussi les autres champs de type TextType ou EntityType, j'ai utilisé le même façon de remettre les valeurs à vide dans myFunction() et ça marche correctement.

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
<select id='isActif' name='xx' class='form-control'>
    <option value></option>
     <option value="1">Actif</option>
     <option value="0">Inactif</option>
</select>
...
<button>Recherche</button>
<button onclik='myFunction()'>Effacer</button>
 
...
 
{% block javascripts %}
    <script>
        function myFunction(){
            document.getElementById('isActif').value="";
            //document.getElementById('isActif').selectedIndex = '0';
            //document.getElementById('isActif').options[0].selected = true;
           console.log(document.getElementById('isActif'));
           console.log(document.getElementById('autrechamp'));
           alert('log');
            
        }
    </script>
{% endblock %}

16/02/2022, 15h39
amelie_koo

Bonjour,

J'ai enfin réglé ce problème, j'ai utilisé JQuery au lieu de JS, et ça marche.
Mais je ne comprends pas pourquoi JS ne peut pas remettre la valeur null pour cette case. Si quelqu'un le savoir, faites-moi savoir. Merci !