Code:
<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>
Comment