Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2007
    Location
    Washington
    Posts
    86
    Thanks
    3
    Thanked 2 Times in 2 Posts

    javascript dialog box to pass value to corresponding textbox

    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:
    Code:
    <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>
    "The one closer to the truth is the one still learning"

  • #2
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    pass it as a parameter to the callPrompt() function

    Code:
    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
    Code:
    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>
    You never have to change anything you got up in the middle of the night to write. -- Saul Bellow

  • Users who have thanked shyam for this post:

    Jodarecode (08-15-2008)

  • #3
    New Coder
    Join Date
    Oct 2007
    Location
    Washington
    Posts
    86
    Thanks
    3
    Thanked 2 Times in 2 Posts
    Thanks, I'll give it a try tomorrow!
    "The one closer to the truth is the one still learning"

  • #4
    New Coder
    Join Date
    Oct 2007
    Location
    Washington
    Posts
    86
    Thanks
    3
    Thanked 2 Times in 2 Posts
    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?
    Last edited by Jodarecode; 08-15-2008 at 10:56 PM.
    "The one closer to the truth is the one still learning"

  • #5
    New Coder
    Join Date
    Oct 2007
    Location
    Washington
    Posts
    86
    Thanks
    3
    Thanked 2 Times in 2 Posts
    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:
    Code:
    <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>
    "The one closer to the truth is the one still learning"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •