Pages

Friday 2 August 2019

Javascript | Window prompt() Method

<!DOCTYPE html>

<html>



<head>

    <title>

        Window prompt() Method

    </title>

</head>



<body style="text-align: center;">

    <h1 style="color:green;">

        GeeksforGeeks

    </h1>

    <h2>

        Window prompt() Method

    </h2>



    <button onclick="geek()">

        Click me!

    </button>

    <p id="g"></p>



    <script>

        function geek() {

            var doc = prompt("Please enter some text",

                "GeeksforGeeks");

            if (doc != null) {

                document.getElementById("g").innerHTML =

                    "Welcome to " + doc;

            }

        }

    </script>

</body>



</html> 
Posted by at No comments:

Enter your name on popup

 box one by one.

Alert Dialog Box

An alert dialog box is mostly used to give a warning message to the users. For example, if one input field requires to enter some text but the user does not provide any input, then as a part of validation, you can use an alert box to give a warning message.
Nonetheless, an alert box can still be used for friendlier messages. Alert box gives only one button "OK" to select and proceed.

Example

 Live Demo
<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function Warn() {
               alert ("This is a warning message!");
               document.write ("This is a warning message!");
            }
         //-->
      </script>     
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "Warn();" />
      </form>     
   </body>
</html>

Output


Confirmation Dialog Box

A confirmation dialog box is mostly used to take user's consent on any option. It displays a dialog box with two buttons: OK and Cancel.
If the user clicks on the OK button, the window method confirm() will return true. If the user clicks on the Cancel button, then confirm() returns false. You can use a confirmation dialog box as follows.

Example

 Live Demo
<html>
   <head>   
      <script type = "text/javascript">
         <!--
            function getConfirmation() {
               var retVal = confirm("Do you want to continue ?");
               if( retVal == true ) {
                  document.write ("User wants to continue!");
                  return true;
               } else {
                  document.write ("User does not want to continue!");
                  return false;
               }
            }
         //-->
      </script>     
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "getConfirmation();" />
      </form>      
   </body>
</html>

Output


Prompt Dialog Box

The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus, it enables you to interact with the user. The user needs to fill in the field and then click OK.
This dialog box is displayed using a method called prompt() which takes two parameters: (i) a label which you want to display in the text box and (ii) a default string to display in the text box.
This dialog box has two buttons: OK and Cancel. If the user clicks the OK button, the window method prompt()will return the entered value from the text box. If the user clicks the Cancel button, the window method prompt() returns null.

Example

The following example shows how to use a prompt dialog box −
 Live Demo
<html>
   <head>     
      <script type = "text/javascript">
         <!--
            function getValue() {
               var retVal = prompt("Enter your name : ", "your name here");
               document.write("You have entered : " + retVal);
            }
         //-->
      </script>      
   </head>
   
   <body>
      <p>Click the following button to see the result: </p>      
      <form>
         <input type = "button" value = "Click Me" onclick = "getValue();" />
      </form>      
   </body>
</html>
Posted by at No comments:

Add

<!DOCTYPE html>
<html>
<head>
<title>sum of 2 number</title>
</head>
<body>
<script type=”text/JavaScript”>
var strx = prompt (“enter first number”,””);
var stry = prompt (“enter second number”,””);
var x = parseInt(strx);
var y = parseInt(stry);
var sum =x+y;
document.write(alert(sum));
</script>
</body>
</html>
:)
Posted by at No comments:

<script>
function GEEKFORGEEKS()                                   
{
    var name = document.forms["RegForm"]["Name"];              
    var email = document.forms["RegForm"]["EMail"];   
    var phone = document.forms["RegForm"]["Telephone"]; 
    var what =  document.forms["RegForm"]["Subject"]; 
    var password = document.forms["RegForm"]["Password"]; 
    var address = document.forms["RegForm"]["Address"]; 
   
    if (name.value == "")                                 
    {
        window.alert("Please enter your name.");
        name.focus();
        return false;
    }
   
    if (address.value == "")                              
    {
        window.alert("Please enter your address.");
        name.focus();
        return false;
    }
       
    if (email.value == "")                                  
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
   
    if (email.value.indexOf("@", 0) < 0)                
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
   
    if (email.value.indexOf(".", 0) < 0)                
    {
        window.alert("Please enter a valid e-mail address.");
        email.focus();
        return false;
    }
   
    if (phone.value == "")                          
    {
        window.alert("Please enter your telephone number.");
        phone.focus();
        return false;
    }
   
    if (password.value == "")                       
    {
        window.alert("Please enter your password");
        password.focus();
        return false;
    }
   
    if (what.selectedIndex < 1)                 
    {
        alert("Please enter your course.");
        what.focus();
        return false;
    }
   
    return true;
}</script>
  
<style>
GEEKFORGEEKS {                                        
    margin-left: 70px;
    font-weight: bold ;
    float: left;
    clear: left;
    width: 100px;
    text-align: left;
    margin-right: 10px;
    font-family:sans-serif,bold, Arial, Helvetica;
    font-size:14px;
}
   
div { 
    box-sizing: border-box;
    width: 100%;
    border: 100px solid black;
    float: left;
    align-content: center;
    align-items: center;
}
   
form {                                        
    margin: 0 auto;
    width: 600px;
}</style></head>
   
<body>
<h1 style="text-align: center"> REGISTRATION FORM </h1>          
<form name="RegForm" action="/submit.php" onsubmit="return GEEKFORGEEKS()" method="post"> 
      
    <p>Name: <input type="text" size=65 name="Name"> </p><br>       
    <p> Address: <input type="text" size=65 name="Address">  </p><br>
    <p>E-mail Address: <input type="text" size=65 name="EMail">  </p><br>
     <p>Password: <input type="text" size=65 name="Password"> </p><br>
    <p>Telephone: <input type="text" size=65 name="Telephone"> </p><br>  
           
    <p>SELECT YOUR COURSE   
        <select type="text" value="" name="Subject">
            <option>BTECH</option>
            <option>BBA</option>
            <option>BCA</option>
            <option>B.COM</option>
            <option>GEEKFORGEEKS</option>
        </select></p><br><br>
    <p>Comments:  <textarea cols="55" name="Comment">  </textarea></p>
    <p><input type="submit" value="send" name="Submit">     
        <input type="reset" value="Reset" name="Reset">  
    </p>         
</form>
</body>
</html>
Posted by at No comments:
Subscribe to: Posts (Atom)