javascript dialog box to pass value to corresponding textbox

Discussion in 'JavaScript' started by jodarecode, Aug 13, 2008.

0
  1. #1
    Basically, You 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.

    Example:
    I click on textbox "input1".....dialog appears,
    I enter "Hello World!".....Then click "Ok",
    textbox "input1" is filled in with "Hello World!"

    I click on textbox "input2".....dialog appears,
    I enter "Hello World again!".....Then click "Ok",
    textbox "input2" is filled in with "Hello World again!"

    I click on textbox "input3".....dialog appears,
    I enter "and again Hello World!".....Then click "Ok",
    textbox "input3" is filled in with "and again Hello World!"
    And so on.....

    Here's the code I have so far:
    <html>
<head>

<script type="text/javascript">
function test(){  
        abc = document.getElementById('promptbox').value;
        document.forms['form0'].elements['input1'].value = abc; 
        return true;
} 

function prompt() {
	el = document.getElementById("prompt");
	el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

		<!--
		function callPrompt(){

			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();"><br><br>
input2 <input type="text" name="input" id="input2" size ="30" onClick="callPrompt();"><br><br>
input3 <input type="text" name="input" id="input3" size ="30" onClick="callPrompt();"><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>
    Code (markup):
     
    jodarecode, Aug 13, 2008 IP
  2. rkquest

    rkquest Well-Known Member

    Messages:
    828
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    140
    #2
    Try this...

    
<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>
    Code (markup):
     
    rkquest, Aug 13, 2008 IP