Take User Input in JavaScript Without Prompt Method

Claudio Ctin4 months ago9 mins

Do you want to know how to take a user input value in JavaScript without using the prompt() method?

In JavaScript, can you take and receive user input without using the prompt() method? But how do you achieve this, there are many ways to get the user input value in JS again if you are not comfortable using the prompt method,

So instead of prompt method you can use “Form submission with event listener”. You can create a custom input interface using HTML and a little CSS, then handle the input values, for example.

Syntax:

 <form>
 <label for=“name“>Enter your name:</label>
  <input type=“text“ id=“name“ name=“name“ />
 <button type=“submit“>Submit</button>
  </form>
 

 const form = document.querySelector(“form“);
 form.addEventListener(“submit“, function (event) {
 event.preventDefault();
 const name = document.querySelector(“#name“).value;
 console.log(`Hello, ${name}!`);
 });

To learn more, please follow the steps mentioned below including code examples.

Step 1: Create an HTML Form.

In the first step, were we going to create a simple form using some HTML form’s elements,

If your form is already ready you can skip this step and continue to the second step of adding an “ID” to each element.

For those who don’t create the form, you can use HTML form elements to create input fields that the user can fill in with values and data.

Form files you can create such as “input fields”, “checkboxes”, “buttons”, and etc. It depends on your needs and what works best for your users.

Here is the output of my form.

Example:

 <body>
 <form>
 <label for=“name“>Enter your name:</label>
  <input type=“text“ name=“name“ />
 <button type=“submit“>Submit</button>
  </form>
 </body>
 

In this example, there is only one

tag. Inside this, there’s a tag that contains stuff like fields, , and , each with its own type. That is all.

Step 2: Give “id” to Input Filed.

In this step we were going to add an “ID” to the filed input, with the help of the ID you apply in the input filed we can easily select the input in the JS document.

Example:

As you can see now, I add an “ID” named “Name” to the input entered in the above example,

And I am not adding an “id” to the button because there is only one button so I am not going to add an “id” to the button element, but if you have multiple buttons, it would be a good idea to give each one an “id”.

Otherwise, if you don’t do this, JavaScript will select all the buttons, and the same function will be applied to all of them. This means you have to loop through all the buttons.

Step 3: Select Form to the JavaScript.

Once you done with adding “id” name, Now we going to select the form element in the JavaScript document to invoke the addEventListener function with it.

Example:

const form = document.querySelector(“form“);

In this above example, I have variable const named “form” and with the help of queryselector I select my “form” form HTML document.

Step 4: Apply AddEventener Function in Form.

Add an event listener to the form to detect submission, and optionally include a stopDefault method to prevent form page refreshing.

Example:

form.addEventListener(“submit“, function (event) {
event.preventDefault();});

Step 5: Take the Input Date using Value Property.

Now here we are going to take the user input value with the help of “Value Property”. The value property in JavaScript will give you the current value of an input field in a form.

The “id” you have given for the entered input, now select the id name and store it in variable and then get its current value using “.value”, like “const name = document.querySelector(” #name”).value;”

Example:

const name = document.querySelector(“#name“).value;

Step 6: (optional) Add your value with user date.

This step is completely optional, but you do this if you need to display a message or your text value with the exact user input value then you can do this, for example:

console.log(`Hello, ${name}!`);

Step 7: Save the file and check preview .

Finally all the steps end here, now save all your files and preview it in a new tab using live-server.

If you want a complete code of both HTML, CSS and JavaScript here it is:

<!DOCTYPE html>
<html lang=“en“>
<head>
<meta charset=“UTF-8“ />
<meta http–equiv=“X-UA-Compatible“ content=“IE=edge“ />
<meta name=“viewport“ content=“width=device-width, initial-scale=1.0“ />
<title>Take User Input in javascript without prompt method</title>
<style>
* {
font–family: Arial, Helvetica, sans–serif;
}

form {
display: flex;
flex–direction: column;
align–items: center;
}

label,
input {
margin–bottom: 10px;
}

button {
padding: 10px;
border: none;
background–color: #007bff;
color: #fff;
cursor: pointer;
}
</style>
</head>

<body>
<form>
<label for=“name“>Enter your name:</label>
<input type=“text“ id=“name“ name=“name“ />
<button type=“submit“>Submit</button>
</form>

<script>
const form = document.querySelector(“form“);
form.addEventListener(“submit“, function (event) {
event.preventDefault();
const name = document.querySelector(“#name“).value;
console.log(`Hello, ${name}!`);
});
</script>
</body>
</html>

And that’s it, These are the seven steps that you can use to take user input in JavaScript without using the “prompt method()”.

I hope this post helps you to take user input in Javascript without using a prompt method.

Please follow and like us: