Discussion :

[djelectro95]

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

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

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

[SpaceFrog]

Code :

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

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

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 ...

[djelectro95]

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

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

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

[NoSmoking]

Bonjour,

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>