1
Expand|Select|Wrap|Line Numbers
- <html>
- <head>
- <script type="text/javascript">
- var element;
- function test(){
- abc = document.getElementById('promptbox').value;
- document.forms['form0'].elements[element].value = abc;
- return true;
- }
- function prompt() {
- el = document.getElementById("prompt");
- el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
- }
- <!--
- function callPrompt(elementID){
- element = elementID;
- prompt2('btn1p.gif', 'My Prompt','Please enter your information', 'myfunction');
- prompt();
- }
- //-->
- var response = null
- function prompt2(promptpicture, prompttitle, message, sendto) {
- promptbox = document.createElement('div');
- promptbox.setAttribute ('id' , 'prompt')
- document.getElementsByTagName('body')[0].appendChild(promptbox)
- promptbox = eval("document.getElementById('prompt').style")
- promptbox.position = 'fixed'
- promptbox.top = '150px'
- promptbox.left = 0
- promptbox.border = 'outset 1 #bbbbbb'
- document.getElementById('prompt').innerHTML = document.getElementById('prompt').innerHTML + "<table cellspacing='0' cellpadding='5' border='5' width='400px' height='400px' class='promptbox' align='center' bgcolor='#ededed'><tr><td align='center'><table><tr><td><br>" + message + "</td></tr><tr><td align='center'><input type='text' value='' name='promptbox' id='promptbox' onblur='this.focus()' class='promptbox' align='center'></td></tr><tr><td align='right'><br><input type='button' class='prompt' value='OK' onMouseOver='this.style.border=\"1 outset #dddddd\"' onMouseOut='this.style.border=\"1 solid transparent\"' onClick='prompt();test();'> <input type='button' class='prompt' value='Cancel' onMouseOver='this.style.border=\"1 outset transparent\"' onMouseOut='this.style.border=\"1 solid transparent\"' onClick='" + sendto + "(\"\"); document.getElementsByTagName(\"body\")[0].removeChild(document.getElementById(\"prompt\"))'></td></tr></table></td></tr></table>"
- document.getElementById("promptbox").focus()
- }
- function myfunction(value) {
- if(value.length<=0)
- return false;
- else
- document.getElementById('output').innerHTML="<b>"+value+"</b>";
- }
- </script>
- <style type="text/css">
- #prompt {
- visibility: hidden;
- position: absolute;
- left: 0px;
- top: 0px;
- width:100%;
- height:100%;
- text-align:center;
- z-index: 100;
- }
- #prompt div {
- width:300px;
- margin: 100px auto;
- background-color: #fff;
- border:1px solid #000;
- padding:15px;
- text-align:center;
- }
- body {
- height:100%;
- margin:0;
- padding:0;
- }
- </style>
- </head>
- <body>
- <form name="form0"><br><br><br><br>
- <table align="center" width="500"><tr><td>
- Click on a textbox and dialog will appear, The issue is I want each textbox individualized so when the dialog info is entered, its inputted into the correct textbox. I need the dialog to recognize which textbox was clicked thru iteration as there may be hundreds of textboxes.
- </td></tr></table>
- <p align="center">
- input1 <input type="text" name="input" id="input1" size ="30" onClick="callPrompt(this.id);"><br><br>
- input2 <input type="text" name="input" id="input2" size ="30" onClick="callPrompt(this.id);"><br><br>
- input3 <input type="text" name="input" id="input3" size ="30" onClick="callPrompt(this.id);"><br>
- And so on.....<br><br></p>
- <table align="center" width="500"><tr><td align="left">
- Example:<br>
- I click on textbox "input1".....dialog appears,<br>
- I enter "Hello World!".....Then click "Ok",<br>
- textbox "input1" is filled in with "Hello World!"<br>
- <br>
- I click on textbox "input2".....dialog appears,<br>
- I enter "Hello World again!".....Then click "Ok",<br>
- textbox "input2" is filled in with "Hello World again!"<br>
- <br>
- I click on textbox "input3".....dialog appears,<br>
- I enter "and again Hello World!".....Then click "Ok",<br>
- textbox "input3" is filled in with "and again Hello World!"<br>
- And so on.....
- </td></tr></table>
- </form>
- </body>
- </html>
