Selecteur pour attribuer un onclick

Version imprimable

Bonjour à tous,

Je débute cette année avec le javascript dans la création d'un site web et notre professeur pour un exercice, il nous a demandé de créer un formulaire avec un bouton qui enverra le formulaire, il ne doit pas y avoir de input pour l'envoyer et le bouton doit être à l'extérieur du formulaire.
Donc j'ai créé un formulaire pas de soucis de ce côté là, mais lorsque j'essaie la commande pour le onclick, rien ne fonctionne. Vu que je débute j'ai décidé de me renseigner sur le net mais tout le monde met le bouton onclick à l'intérieur du formulaire donc je n'ai pas trop trouvé de réponse. Est-ce que vous pouvez m'aider ? Le code ci-dessous.

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
    <div class="modal-body">
        <form method="POST" action="http://localhost/monsite/home/register" name="inscriptionForm" id="inscriptionForm">
            <div class="row">
                <div class="col-sm-4">Nom</div>
                <div class="col-sm-8"><input class="form-control" type="text" name="lastname" /></div>
            </div>
            <div class="row">
                <div class="col-sm-4">Prénom</div>
                <div class="col-sm-8"><input class="form-control" type="text" name="firstname" /></div>
            </div>
            <div class="row">
                <div class="col-sm-4">Email</div>
                <div class="col-sm-8"><input class="form-control" type="text" name="email" /></div>
            </div>
            <div class="row">
                <div class="col-sm-4">Mot de passe</div>
                <div class="col-sm-8"><input class="form-control" type="password" name="password" /></div>
            </div>
            <div class="row">
                <div class="col-sm-4">Confirmation mot de passe</div>
                <div class="col-sm-8"><input class="form-control" type="password" name="password2" /></div>
            </div>
            <!--<input type="submit" value="submit">-->
        </form>
        <button type="button" class="btn">Inscription</button>
    </div>

Code:

1
2
3
4
5
    <script>
        function sendForm(){
            document.getElementById(".btn").submit();
        }
    </script>

29/09/2022, 15h58
SpaceFrog

Code:

document.getElementById(".btn").submit();

:aie::aie:

il n'y a pas d'id ".btn'

il y a une class "btn"

il faut choisir quel type de selection par id => getElementById ou par class => getElementsByClassName

ou querySelector ...

Je te remercie pour ta réponse, j'ai bien corrigé la class en id et j'ai créé un var car j'avais oublié de faire ça et ça fonctionne très bien. Je mets mon code pour aider ceux qui auront peut être le même soucis.

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
    <div class="modal-body">
        <form method="POST" action="http://localhost/nebulous/home/register" name="inscriptionForm" id="inscriptionForm">
            <div class="row">
                <div class="col-sm-4">Nom</div>
                <div class="col-sm-8"><input class="form-control" type="text" name="lastname" /></div>
            </div>
            <div class="row">
                <div class="col-sm-4">Prénom</div>
                <div class="col-sm-8"><input class="form-control" type="text" name="firstname" /></div>
            </div>
            <div class="row">
                <div class="col-sm-4">Email</div>
                <div class="col-sm-8"><input class="form-control" type="text" name="email" /></div>
            </div>
            <div class="row">
                <div class="col-sm-4">Mot de passe</div>
                <div class="col-sm-8"><input class="form-control" type="password" name="password" /></div>
            </div>
            <div class="row">
                <div class="col-sm-4">Confirmation mot de passe</div>
                <div class="col-sm-8"><input class="form-control" type="password" name="password2" /></div>
            </div>
            <!--<input type="submit" value="submit">-->
        </form>
        <button type="button" id="btn">Inscription</button>
    </div>

Code:

1
2
3
4
5
6
    <script>
        var formId = document.getElementById("inscriptionForm");
        document.getElementById("btn").addEventListener("click", function(){
            formId.submit();
        });
    </script>

29/09/2022, 17h03
NoSmoking

Bonjour,

Citation:

Vu que je débute j'ai décidé de me renseigner sur le net mais tout le monde met le bouton onclick à l'intérieur du formulaire donc je n'ai pas trop trouvé de réponse.

il existe l'attribut form pour les <button> qui fait que tu n'as pas besoin de JavaScript.

↪ voir L'attribut form des <button>