Multi textbox in dialog to fill in the html textboxes

Jodarecode

08-15-2008, 11:05 PM

Ok, this is what I have:

<html>
<head>

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

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



var response = null

function prompt2(promptpicture, prompttitle, message, sendto, which) {
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(\"" + which + "\");'> <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, each textbox is 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>

</form>

</body>
</html>
This works great for one textbox in the dialog!

now, what if I had more text boxes in the dialog box:

dialog box
textbox1
textbox2
textbox3
[ok] [cancel]

and wanted to take the information entered in each one once [ok] is pressed to fill in the coorisponding textboxes:

textbox1,2,3 if this.id fills in: textbox1a, textbox1b, textbox1c

textbox1,2,3 if this.id fills in: textbox2a, textbox2b, textbox2c

textbox1,2,3 if this.id fills in: textbox3a, textbox3b, textbox3c

Is this possible?

ninnypants

08-16-2008, 12:55 AM

Yeah it's possible you'll need to create an array of the id's and loop through it or loop through the form elements

function runCall(formname){
els = document.formname.elements;
for( i = 0; i<els.length; i++ ){
if(els.type == 'text'){
callPrompt(els[i].id);
}
}
}

This should work as long as you don't have to pass the id for the coresponding element

Jodarecode

08-18-2008, 05:04 PM

Ok, I see what you mean but I dont see how it answers my question.

I'll try explaining a different way.

There are three textboxes lets say in the html.

textbox1 is the main one.....textbox2, & textbox3 is readonly.

once textbox1 is clicked on....a dialog appears with three textboxes.

there's textbox1a, textbox1b, & textbox1c

fill in all three textboxes and press [Ok]

when [Ok] is pressed....
info from textbox1a fills in textbox1

info from textbox1b fills in readonly textbox2

info from textbox1c fills in readonly textbox3

Keep in mind there will be more textboxes per line...
1st line will be textboxes 1 thru 3, dialog fills only this line if textbox1 was clicked
2nd line will be textboxes 4 thru 6, dialog fills only this line if textbox4 was clicked
3rd line will be textboxes 7 thru 9, dialog fills only this line if textbox7 was clicked
and so on.....

textboxes 1, 4, & 7 are the onclick="callprompt(this.id)"
the rest are readonly.

Here's my revised code:
<html>
<head>

<script type="text/javascript">
function test(which){
abc = document.getElementById('textbox1a').value;
document.getElementById(which).value = abc;
var p = document.getElementById('prompt');
p.parentNode.removeChild(p);
return true;
}

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



var response = null

function prompt2(promptpicture, prompttitle, message, sendto, which) {
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='textbox1a' id='textbox1a' onblur='this.focus()' class='promptbox'><br><input type='text' name='textbox1b' id='textbox1b'><br><input type='text' name='textbox1c' id='textbox1c'><br><input type='hidden' id='promptbox' name='promptbox' class='promptbox'></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(\"" + which + "\");'> <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>

<p align="center">
Line1: textbox1 <input type="text" name="textbox1" id="textbox1" size ="30" onClick="callPrompt(this.id);">
textbox2 <input type="text" name="textbox2" id="textbox2" size ="30" readonly>
textbox3 <input type="text" name="textbox3" id="textbox3" size ="30" readonly><br>

Line2: textbox4 <input type="text" name="textbox4" id="textbox4" size ="30" onClick="callPrompt(this.id);">
textbox5 <input type="text" name="textbox5" id="textbox5" size ="30" readonly>
textbox6 <input type="text" name="textbox6" id="textbox6" size ="30" readonly><br>

Line3: textbox7 <input type="text" name="textbox7" id="textbox7" size ="30" onClick="callPrompt(this.id);">
textbox8 <input type="text" name="textbox8" id="textbox8" size ="30" readonly>
textbox9 <input type="text" name="textbox9" id="textbox9" size ="30" readonly><br>
And so on.....<br><br></p>

</form>

</body>
</html>

ninnypants

08-19-2008, 12:41 AM

All you would have to do is make an array of your main text boxes and once the user clicked ok it would loop through them all you would have to do is replace 'els[]' with the id's eg:

els = ['text1','text2','text3','text4']
function runCall(){
for( i = 0; i<els.length; i++ ){
if(els.type == 'text'){
callPrompt(document.getElementById(els[i]).id);
}
}
}

That would loop through all the main elements and run you callPrompt() function on each of them.