JavaScript Prompt Multiple Input
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Ashish
In this tutorial we will show you the solution of JavaScript prompt multiple input, sometimes in some specific or say rare cases we have to get value from user in the alert or say from prompt.
So, in this article we are going to understand how to show multiple input fields with help of JavaScript inside prompt. Let us see the below code.
Step By Step Guide On JavaScript Prompt Multiple Input :-
As, one thing to note here that there are many ways with help of which you can show input fields using prompt.
The prompt() method displays or shows a dialog box that prompts the user for input. Let us understand this article with help of codes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>convert object to array using JavaScript</title>
</head>
<body>
<button onclick="myFunction()">Click me once</button>
<p id="demo"></p>
<script>
function myFunction() {
let color = prompt("Please enter your favorite color here", "Black");
if (color != null) {
document.getElementById("demo").innerHTML =
"WOW " + color + "! your choice is too good !!";
}
}
</script></body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Here, then we create a body tag. All the content which we want to show on browser’s screen or display is always written inside this codes.
- Here, inside body we create a button and after that we create an empty paragraph. On click on button a function runs that is myfunction().
- Here, after body we use script tag, script tag is a paired tag and it must have a closing tag. All the codes of our JavaScript goes under these tags.
- Now, here we create our function or say define it. Using prompt, we create a prompt box and set default value.
- In this if the color is filled then it will shows the message like wow black your choice is too good. But if you not fill any value then it directly shows the message. We hope that you understand the codes properly.
- Here, using this method we are able to create multiple inputs instead of one. Here, just you have to write the line of prompt again as much as inputs you want and have to customize if condition.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
At last in conclusion, here we can say that with the help of this article we are able to understand how to prompt multiple inputs using JavaScript.
I hope this tutorial on JavaScript prompt multiple input helps you and the steps and method mentioned above are easy to follow and implement.
About Ashish
