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 4 of 4
  1. #1
    New Coder
    Join Date
    Oct 2007
    Location
    Washington
    Posts
    86
    Thanks
    3
    Thanked 2 Times in 2 Posts

    Multi textbox in dialog to fill in the html textboxes

    Ok, this is what I have:

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

  • #2
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    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
    Code:
    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

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

  • #4
    Regular Coder ninnypants's Avatar
    Join Date
    Apr 2008
    Location
    Utah
    Posts
    504
    Thanks
    10
    Thanked 47 Times in 47 Posts
    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:
    Code:
    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.


  •  

    Posting Permissions

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