How can I prompt the user for two input values, like username and password, in one prompt window?

Jayesh Nazre

With the "prompt" JavaScript function you cannot do that. But, you can create your own prompt dialog box, using the showModalDialog() function available in IE only. You can use the following code for creating the modal dialog box:


<html>
<title>Prompt</title>
<head>
<script language=javascript>
function test1() {
  window.returnValue = document.frm_prompt.txt_UN.value + 
    ";" + document.frm_prompt.txt_PW.value;
  self.close();
}

function test2() {
  window.returnValue = "";
  self.close();
}

</script>
</head>
<body bgcolor=silver>
>BR<
<form id=frm_prompt name=id_prompt>
Username :<input type=text id=txt_UN name=txt_UN>
>BR<
Password :<input type=password id=txt_PW name=txt_PW>
>BR<
>center<
<input type=button value=OK onclick=test1()>
<input type=button value=CANCEL onclick=test2()>
>/center<
</form>
</body>
</html>
I have named the above HTML as modal2.html. The following code shows how to call the modal2.html file:

<html>
<head>
<script language=javascript>
function test() {
var retvalue;
retvalue = window.showModalDialog("modal2.html","", 
  "dialogHeight=8;dialogWidth=15;center=1;status=0;resizable=0;help=0");
alert (retvalue);
}
</script>
</head>
<body>


<form name=frm_test id=frm_test>

<input type=button value=Click onclick=test()>
</form>


</body>
</html>
In the modal2.html I concat the Username and Password with ";" as the delimiter. When the user clicks OK in the modal.html the username concatenated with password is returned. When the user clicks CANCEL in the modal.html a blank string is returned. In the calling form I have simply kept an alert to show what is returned. You can use this returned value to do further processing in the calling HTML.

See also How can I create an alert dialog with buttons other than OK and Cancel?

0 Comments  (click to add your comment)
Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

About | Sitemap | Contact