PROBLEME JAVASCRIPT HTML

zaytiox
Les bases HTML/CSS
Javascript

Bonjour,
Je me permets de vous soliciter car je suis totablement bloqué... Je réalise un site internet et pour cela j'ai utilisé une page de contact. Le mail est envoyé via emailjs. Mon code marche très bien cependant quand dans mon body en HTML je mets une balise "form", BOUM, plus rien.... Ceci m'embête car cela m'handicape dans mon CSS... Voici les bouts de codes concernés:

Partie HTML (simplifiée):

<body>
            <form action="contact.html">
                <h1>Contactez nous</h1>
                <input type="text" id="name" placeholder="Nom" />
                <input type="text" id="prenom" placeholder="Prenom" />
                <input  type="email" id="email" placeholder="Email" /> 
                <input  type="text" id="phone" placeholder="Numéro" /> 
                <textarea id ="message" placeholder="Votre message"></textarea>
                <button onclick="sendMail()">Envoyer votre message</button>
            </form>
        </body>

Partie JAVASCRIPT

function sendMail(params) {
    var tempParams={
        from_name: document.getElementById("name").value,
        from_email: document.getElementById("email").value,
        message: document.getElementById("message").value,
        from_prenom: document.getElementById("prenom").value,
        from_phone: document.getElementById("phone").value,
     };

     emailjs.send('gmail', 'template_hgtviep',tempParams)
     .then(function(res){
        alert("succes" + res.status);
     })
}

Je cherche à pouvoir remettre la balise form dans mon code afin d'appliquer mon magnifique style CSS. Comme dit, le code marche très bien sans la balise form mais ceci m'embête vraiment. Je suis encore un novice, il se peut que l'erreur soitr absurde mais je ne la voit pas depuis des heures. Est-ce une mauvaise définition de ma balise form ?

Je vous remercie pour l'attention accordée !

7 réponses

zaytiox
Auteur

UPDATE: J'ai finalement trouvé une solution ! J'ai encadré la partie "form" avec une balise div, mais j'ai du exclure le bouton de la form, c'est toujours mieux que rien. Y'a t-il moyen d'inclure mon boutton au sein de ma partie form ? Voici le code :

    <body>
        <div>
            <form action="contact.html">
                <h1>Contactez nous</h1>
                <div class="Nom">
                    <label for="name">Nom</label>
                    <i class="fa-solid fa-user"></i>
                    <input type="text" id="name" placeholder="Nom" />
                </div>
                <div class="Prenom">
                    <label for="prenom">Prénom</label>
                    <i class="fa-solid fa-user"></i>
                    <input type="text" id="prenom" placeholder="Prenom" />
                </div>
                <div class="Email">
                    <label for="email">Votre adresse mail</label>
                    <i class="fa-solid fa-at"></i>
                    <input  type="email" id="email" placeholder="Email" /> 
                </div>
                <div class="Phone">
                    <label for="phone">Votre numéro de téléphone</label>
                    <i class="fa-solid fa-phone"></i>
                    <input  type="text" id="phone" placeholder="Numéro" /> 
                </div>
                <div class="Message">
                    <label for="message">Message</label>
                    <textarea id ="message" placeholder="Votre message"></textarea>
                </div>
            </form>
        </div>
        <div>
            <button onclick="sendMail()">Envoyer votre message</button>
        </div>
    </body>
Arzou

Hello !
Pourquoi tu ne mets pas un input type submit pour ton bouton ?

zaytiox
Auteur

Salut !
Si je mets le type submit je peux toujours combiner le onclick ? Car j'ai obligatoirement besoin du onclick afin de lancer ma fonction java

Arzou

Yep, normalement aucun souci

quenti77

Par contre c'est un button type submit et non un input type submit (petite subtilité :) )

Arzou

Input ou button type submit, c'est pareil. Enfin .. pour envoyer une fonction js, les deux marchent ;)

zaytiox
Auteur

Merci beaucoup à vous deux, j'ai pu finaliser mon code grâce à vous, je vous en suis vraiment reconnaissant !