Question

0

124

Views

Trouble with forms using Vanilla JS

So I am learning Dom manipulation and using forms with vanilla Javascript and cannot figure out what I am doing wrong. Right now I just want to be able to click submit and have it console.log the string 'Message Sent' and then reset the form. However when I submit it alters the URL to some weird output and does not console log but instead looks like it refreshes the page but the link still remails altered to "http://localhost:53865/?senderName=&senderEmail=&senderMessage=++++++++++++"

const form = document.querySelector('form')


//? Form Submit Button
const button = document.createElement('button')
button.setAttribute('type','submit')
button.textContent = 'Submit'
button.setAttribute('onClick','submit()');
form.appendChild(button)

function submit(evt) {
    evt.preventDefault();
    console.log('Message Sent!')
    resetForm();
}

function resetForm() {
    nameInput.value = '';
    emailInput.value = '';
    textArea.value= '';
}



document.querySelector('.container').appendChild(form)

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <link rel="stylesheet" href="./index.css">
        <script src = './index.js' defer></script>
     
    </head>
    <body>

        <div class="container">
            <form>
                <input id = 'contact-form' 
                    type="text" 
                    name="senderName" 
                    id = "senderName" 
                    value = "" 
                    placeholder = 'Name' 
                    />
                    <input 
                    type="text" 
                    name="senderEmail" 
                    id = "senderEmail" 
                    value = "" 
                    placeholder = 'Email' 
                    />
                    <textarea 
                    type="text" 
                    name="senderMessage" 
                    id = "senderMessage" 
                    value = "" 
                    placeholder = 'Message' 
                    />
            </form> 

       
        </div>
    </body>
</html>

3 months ago ·

Juan Pablo Isaza

Answer question

Find remote jobs

Loading