Multi textbox in dialog to fill in the html textboxes

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

0
  1. #1
    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";
}

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

					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>
    Code (markup):
    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?
     
    jodarecode, Aug 15, 2008 IP
  2. jodarecode

    jodarecode Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    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";
}

		<!--
		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='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>
    Code (markup):
     
    jodarecode, Aug 18, 2008 IP
  3. ghprod

    ghprod Active Member

    Messages:
    1,010
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    78
    #3
    Thnx for Info :)
     
    ghprod, Aug 22, 2008 IP
  4. jodarecode

    jodarecode Peon

    Messages:
    16
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    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.

    Can anyone get this to work?

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