JavaScript AddEventListener does not work properly

Question

I am going to develop a simple bookmark app following a tutorial, using java script as I am a beginner to javascript. I use custom.js file to keep the javascript code separately and link it to the bottom of the code. I use addEventListener to form submission and use console.log to see the output to check its result. But it doesn't give me any error and does not work addEventListener too. As it does not give an error message I am unable to find the issue with my code.IF someone can help me, I highly appreciate your help . Thank You . I have index.html and custom.js files.

 document.getElementById('myform').addEventListener('submit', saveBookmark); //function saveBookmark function saveBookmark(e) { console.log('Works'); e.preventDefault(); } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <main role="main" class="container" id="mainc"> <div class="jumbotron"> <h1 id="titlehead">App</h1> <!-- Form --> <form id="myform"> <!--form field to input name--> <div class="form-group"> <label>Site Name</label> <input type="text" name="sitename" class="form-control" placeholder="Website Name"> </div> <!--form field to input url--> <div class="form-group"> <label>Site URL</label> <input type="text" name="siteurl" class="form-control" placeholder="Website URL"> </div> <input type="button" name="submit" class="btn btn-primary" value="SUBMIT"> </form> <!-- Eof Form --> </div> </main> 

Answer 1

Since you are trying to attach the function to submit event and your button type is button , the event is not firing. Change that to submit :

<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT">

 // Event for form Submission document.getElementById('myform').addEventListener('submit', saveBookmark); //function saveBookmark function saveBookmark(e) { console.log('Works'); e.preventDefault(); } 

 <main role="main" class="container" id="mainc"> <div class="jumbotron"> <h1 id="titlehead">App</h1> <!-- Form --> <form id="myform"> <!--form field to input name--> <div class="form-group"> <label>Site Name</label> <input type="text" name="sitename" class="form-control" placeholder="Website Name"> </div> <!--form field to input url--> <div class="form-group"> <label>Site URL</label> <input type="text" name="siteurl" class="form-control" placeholder="Website URL"> </div> <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"> </form> <!-- Eof Form --> </div> </main> 

Answer 2

Your input type is Button, make type as submit :)

 // Event for form Submission document.getElementById('myform').addEventListener('submit',function saveBookmark(e){ console.log('Works'); e.preventDefault(); }); 

 <main role="main" class="container" id="mainc"> <div class="jumbotron"> <h1 id="titlehead">App</h1> <!-- Form --> <form id="myform"> <!--form field to input name--> <div class="form-group"> <label>Site Name</label> <input type="text" name="sitename" class="form-control" placeholder="Website Name"> </div> <!--form field to input url--> <div class="form-group"> <label>Site URL</label> <input type="text" name="siteurl" class="form-control" placeholder="Website URL"> </div> <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"> </form> <!-- Eof Form --> </div> </main> 

Answer 3

your input type must be type=submit ,

read more here : https://javascript.info/forms-submit

 var ele = document.getElementById('myform'); if(ele.addEventListener){ ele.addEventListener("submit", saveBookmark, false); } //function saveBookmark function saveBookmark(e) { console.log('Works'); e.preventDefault(); } 

 <main role="main" class="container" id="mainc"> <div class="jumbotron"> <h1 id="titlehead">App</h1> <!-- Form --> <form id="myform"> <!--form field to input name--> <div class="form-group"> <label>Site Name</label> <input type="text" name="sitename" class="form-control" placeholder="Website Name"> </div> <!--form field to input url--> <div class="form-group"> <label>Site URL</label> <input type="text" name="siteurl" class="form-control" placeholder="Website URL"> </div> <input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"> </form> <!-- Eof Form --> </div> </main> 

Answer 4

Try this:

// Event for form Submission
document.getElementById('myform').addEventListener('submit', function saveBookmark(e) {
    e.preventDefault();
    console.log('Works');
});