...

View Full Version : javascript dialog box to pass value to corresponding textbox



Jodarecode
08-13-2008, 10:34 PM
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>

shyam
08-14-2008, 05:33 AM
pass it as a parameter to the callPrompt() function


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";
}

<!--
function callPrompt(which){

prompt2('btn1p.gif', 'My Prompt','Please enter your information', 'myfunction', which);
prompt();
}
//-->

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>"
}

and in the html


input1 <input type="text" name="input" id="input1" size ="30" onClick="callPrompt('input1');"><br><br>
input2 <input type="text" name="input" id="input2" size ="30" onClick="callPrompt('input2');"><br><br>
input3 <input type="text" name="input" id="input3" size ="30" onClick="callPrompt('input3');"><br>

Jodarecode
08-14-2008, 06:09 AM
Thanks, I'll give it a try tomorrow!

Jodarecode
08-14-2008, 10:05 PM
Ok, It works perfectly!

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?

Jodarecode
08-25-2008, 07:53 PM
I created a sample document below to show whats being done. I included most everything corrisponding to the original document. I hope this helps more to understand how its put together. Originally I thought I could figure it out with what we had before but I forgot each row must be individualized.

This is what I got so far:

<html>
<head>

<script type="text/javascript">

function test(which){
var theRow=document.getElementById(which).parentNode.parentNode.rowIndex+1;
var val=document.getElementById('prompt').getElementsByTagName('input');
for(var i=0; i<val.length-3; i++) {
document.getElementById('textbox' +(i+1)+'[' +theRow+']').value=val[i].value;
}
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";
}

<!--
function callPrompt(which){

prompt2('btn1p.gif', 'My Prompt','Please enter your information', 'myfunction', which);
prompt();
}
//-->

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 = "<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("textbox1a").focus()
}

function myfunction(value) {

if(value.length<=0)
return false;
else
document.getElementById('output').innerHTML="<b>"+value+"</b>";
}
</script>

<script type="text/javascript">

var a = 'a';
var RADIO_NAME = 'totallyrad';
var TABLE_NAME = 'tblSample';
var ROW_BASE = 1;
var hasLoaded = false;

window.onload=fillInRows;

function fillInRows()
{
hasLoaded = true;
addRowToTable();
addRowToTable();
}

function myRowObject(one, two, three, four)
{
this.one = one;
this.two = two;
this.three = three;
this.four = four;
}


function insertRowToTable()
{
if (hasLoaded) {
var tbl = document.getElementById(TABLE_NAME);
var rowToInsertAt = tbl.tBodies[0].rows.length;
for (var i=0; i<tbl.tBodies[0].rows.length; i++) {
if (tbl.tBodies[0].rows[i].myRow && tbl.tBodies[0].rows[i].myRow.four.getAttribute('type') == 'radio' && tbl.tBodies[0].rows[i].myRow.four.checked) {
rowToInsertAt = i;
break;
}
}
addRowToTable(rowToInsertAt);
reorderRows(tbl, rowToInsertAt);
}
}

function addRowToTable(num)
{
if (hasLoaded) {
var tbl = document.getElementById(TABLE_NAME);
var nextRow = tbl.tBodies[0].rows.length;
var iteration = nextRow + ROW_BASE;
if (num == null) {
num = nextRow;
} else {
iteration = num + ROW_BASE;
}

var row = tbl.tBodies[0].insertRow(num);

row.className = 'classy' + (iteration % 2);

var cell0 = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cell0.appendChild(textNode);

var cell1 = row.insertCell(1);
var txtInp1 = document.createElement('input');
txtInp1.setAttribute('type', 'text');
txtInp1.setAttribute('name', 'textbox1[' + iteration + ']');
txtInp1.setAttribute('size', '40');
txtInp1.setAttribute('value', iteration);
txtInp1.setAttribute("onClick", "callPrompt(this.id);");
cell1.appendChild(txtInp1);

var cell1a = row.insertCell(2);
var txtInp2 = document.createElement('input');
txtInp2.type = 'text';
txtInp2.value = '';
txtInp2.setAttribute('name', 'textbox2[' + iteration + ']');
txtInp2.size = 40;
cell1a.appendChild(txtInp2);

var cell1b = row.insertCell(3);
var txtInp3 = document.createElement('input');
txtInp3.type = 'text';
txtInp3.value = '';
txtInp3.setAttribute('name', 'textbox3[' + iteration + ']');
txtInp3.size = 40;
cell1b.appendChild(txtInp3);

var cell2 = row.insertCell(4);
var btnEl = document.createElement('input');
btnEl.setAttribute('type', 'button');
btnEl.setAttribute('value', 'Delete');
btnEl.onclick = function () {deleteCurrentRow(this)};
cell2.appendChild(btnEl);

var cell3 = row.insertCell(5);
var cbEl = document.createElement('input');
cbEl.setAttribute('type', 'checkbox');
cell3.appendChild(cbEl);

var cell4 = row.insertCell(6);
var raEl;
try {
raEl = document.createElement('<input type="radio" name="' + RADIO_NAME + '" value="' + iteration + '">');
var failIfNotIE = raEl.name.length;
} catch(ex) {
raEl = document.createElement('input');
raEl.setAttribute('type', 'radio');
raEl.setAttribute('name', RADIO_NAME);
raEl.setAttribute('value', iteration);
}
cell4.appendChild(raEl);

row.myRow = new myRowObject(textNode, txtInp1, txtInp2, cbEl, raEl);
}
}

function deleteChecked()
{
if (hasLoaded) {
var checkedObjArray = new Array();
var cCount = 0;

var tbl = document.getElementById(TABLE_NAME);
for (var i=0; i<tbl.tBodies[0].rows.length; i++) {
if (tbl.tBodies[0].rows[i].myRow && tbl.tBodies[0].rows[i].myRow.three.getAttribute('type') == 'checkbox' && tbl.tBodies[0].rows[i].myRow.three.checked) {
checkedObjArray[cCount] = tbl.tBodies[0].rows[i];
cCount++;
}
}
if (checkedObjArray.length > 0) {
var rIndex = checkedObjArray[0].sectionRowIndex;
deleteRows(checkedObjArray);
reorderRows(tbl, rIndex);
}
}
}

function deleteCurrentRow(obj)
{
if (hasLoaded) {
var delRow = obj.parentNode.parentNode;
var tbl = delRow.parentNode.parentNode;
var rIndex = delRow.sectionRowIndex;
var rowArray = new Array(delRow);
deleteRows(rowArray);
reorderRows(tbl, rIndex);
}
}

function editCurrentRow(obj)
{
if (hasLoaded) {
var editRow = obj.parentNode.parentNode;
var tbl = editRow.parentNode.parentNode;
var rIndex = editRow.sectionRowIndex;
var rowArray = new Array(editRow);
callPrompt(rowArray);
}
}

function reorderRows(tbl, startingIndex)
{
if (hasLoaded) {
if (tbl.tBodies[0].rows[startingIndex]) {
var count = startingIndex + ROW_BASE;
for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++) {

tbl.tBodies[0].rows[i].myRow.one.data = count;

tbl.tBodies[0].rows[i].myRow.two.name = a + count;

var tempVal = tbl.tBodies[0].rows[i].myRow.two.value.split(' ');
tbl.tBodies[0].rows[i].myRow.two.value = count + ' was' + tempVal[0];

tbl.tBodies[0].rows[i].myRow.four.value = count;

tbl.tBodies[0].rows[i].className = 'classy' + (count % 2);

count++;
}
}
}
}

function deleteRows(rowObjArray)
{
if (hasLoaded) {
for (var i=0; i<rowObjArray.length; i++) {
var rIndex = rowObjArray[i].sectionRowIndex;
rowObjArray[i].parentNode.deleteRow(rIndex);
}
}
}

function openInNewWindow(frm)
{
var aWindow = window.open('', 'TableAddRow2NewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');

frm.target = 'TableAddRow2NewWindow';

frm.submit();
}

</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>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Insert [I]" onclick="insertRowToTable();" />
<input type="button" value="Delete [D]" onclick="deleteChecked();" />
<input type="button" value="Submit" onclick="openInNewWindow(this.form);" />
</p>
<table border="0" cellspacing="0" id="tblSample">
<thead>
<tr>
<th colspan="5">Sample table</th>
</tr>
<tr>
<th>Row[#]</th><th>textbox1</th><th>textbox2</th><th>textbox3</th><th>Delete</th><th>D</th><th>I</th>
</tr>
</thead>
<tbody></tbody>
</table>

</form>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum