How to make a submit button in JavaScript
When creating web applications, there may be instances where user information, such as email or name, needs to be collected. To do this will use forms with submit buttons.
So, the question is, how do we make a button in JavaScript and see to it that information is collected as required?
There are two ways to do this:
Using the JavaScript
addEventListenermethod.Using the
onclickevent that follows a JavaScript function.
In this article, we'll build a simple form that inputs a user's name and email and utilizes the submit button to acquire information. We'll also create a button that provides more information about a course once it's clicked.
Building the form interface in HTML
Let's create a form input that takes the user's name and email and submits the provided data using the submit button.
<div><form id="form"><input id="name" placeholder="enter your name" required><input id="email" placeholder="enter your email" required><button type="submit">Submit Details</button></form></div>
The id will allow access to the input using the DOM, while the required field makes sure that a user fills in the required inputs. It is very important to invoke the required field so as to ensure all form inputs are filled by the users.
The addEventListenermethod
Let's implement the Javascript functionality using the addEventListener method that takes the form id to submit the form inputs.
const form = document.getElementById('form')form.addEventListener('submit', function(event) {event.preventDefault();})
The code above creates a form variable that uses the DOM to grab the form id we specified in the HTML form.
It then uses the .addEventListener method to listen to an event in the submit button. The function with an event parameter invokes the .prevenDefault() auto-submitting method to cancel auto submission of the form.
Now, let's add the full JavaScript code that allows us to access the form inputs using the console.log method.
const form = document.getElementById('form')form.addEventListener('submit', function(event) {event.preventDefault();const yourName = document.getElementById('name').valueconst yourEmail = document.getElementById('email').valueconsole.log(yourName)console.log(yourEmail)})
Here's the executable code to add the button using .addEventListener method:
The code above allows us to access the name and email id inputs using the DOM and subsequently access the inputs using the value method.
The onclickevent
The onclick event invokes a function in HTML whose functionality gets defined by JavaScript code.
<div><p>Welcome to Educative. Click the button below to read our introductory message</p><button onclick="myButton()">Learn More About the Course</button><p id="message"></p></div>
The code above creates an introductory welcome message followed by a button that invokes the onclick event and a function called myButton().
function myButton(){document.getElementById('message').innerHTML = "This course will teach you everthing about how to get started in learning JavaScript. We will then proceed to build your first JS project"}
The same function name used in HTML is used to define the JavaScript function. We then use the DOM to get the message id and set the innerHTML to a message that pops up after the button has been clicked.
Here's the executable code to add the button using onclick event:
