customize prompt box size

[cat5ive]

Hi,

Can anyone please show me how to customize the size of the prompt box? The default one is way too big for the input value, date.

prompt("Due date for invoices past due will be changed to ",dftvalue);

Thanks in advance

 

[dkdude]

As far as I know - you can't. You'd have to make your own.

 

[cat5ive]

Hi,

I found this code from some website. I tested, it worked fine. But when I add this code into my asp page. It did not work. Problem is when I click submit button, the prompt screen came up but disappear right away. Can someone please help?
** note : function 'myfunction' is not complete yet. I just want to test the prompt box first.
Thanks in advance

<style type="text/css">
		input.prompt {border:1 solid transparent; background-color:#99ccff;width:70;font-family:arial;font-size:12; color:black;} 
		td.titlebar { background-color:#2b765F; color:#0000D2; font-weight:bold;font-family:arial; font-size:12;} 
		table.promptbox {border:1 solid #ccccff; background-color:#FFFFE6; color:black;padding-left:2;padding-right:2;padding-bottom:2;font-family:arial; font-size:12;} 
		input.promptbox {border:1 solid #0000FF; background-color:white;width:100%;font-family:arial;font-size:12; color:black; }
	</style>
	
	<script language='javascript'>
		
		var response = null 
			function prompt2(dftvalue, 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 = 'absolute' 
          			promptbox.top = 100 
					promptbox.left = 200 
					promptbox.width = 300 
					promptbox.border = 'outset 1 #bbbbbb' 
					document.getElementById('prompt').innerHTML = "<table cellspacing='0' cellpadding='0' border='0' width='100%'><tr valign='middle'><td width='22' height='22' style='text-indent:2;' class='titlebar'></td><td class='titlebar'>" + prompttitle + "</td></tr></table>" 
					document.getElementById('prompt').innerHTML = document.getElementById('prompt').innerHTML + "<table cellspacing='0' cellpadding='0' border='0' width='100%' class='promptbox'><tr><td>" + message + "</td></tr><tr><td><input type='text' value='" + dftvalue + "' id='promptbox' onblur='this.focus()' 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='" + sendto + "(document.getElementById(\"promptbox\").value); document.getElementsByTagName(\"body\")[0].removeChild(document.getElementById(\"prompt\"))'> <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>" 
					document.getElementById("promptbox").focus() 
				} 

		function myfunction(value) { 
			if(value.length<=0)
				return false;
			
		} 

	</script>

	<script language='javascript'>
	
		<!--

		function callPrompt(){
		
		    var newduedate = "08/25/06";
			
			prompt2(newduedate, 'Apply Due Date','Due date for invoices past due will be changed to', 'myfunction');
		}

		//-->
	</script>

Here is my submit statement

<td><input type="image" name="submit" value="f1" src="images/btn_submit_tracking.gif" border="0" onclick="callPrompt()"></td>

 

[tsuji]

[1] You have to rename the name---one name or another but not "submit"---of the submit button.
[tt]<td><input type="image" name="[red]x[/red]submit" value="f1" src="images/btn_submit_tracking.gif" border="0" onclick="callPrompt()"></td>[/tt]

[2] You use image as submit control. If the coordinate is not essential to you, you can do this.
[2.1]
[tt]<td><input type="image" name="[red]x[/red]submit" value="f1" src="images/btn_submit_tracking.gif" border="0" onclick="callPrompt()[red];return false;[/red]"></td>[/tt]
[2.2]
[tt] function prompt2(dftvalue, 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 = 'absolute'
promptbox.top = 100
promptbox.left = 200
promptbox.width = 300
promptbox.border = 'outset 1 #bbbbbb'
document.getElementById('prompt').innerHTML = "<table cellspacing='0' cellpadding='0' border='0' width='100%'><tr valign='middle'><td width='22' height='22' style='text-indent:2;' class='titlebar'></td><td class='titlebar'>" + prompttitle + "</td></tr></table>"
document.getElementById('prompt').innerHTML = document.getElementById('prompt').innerHTML + "<table cellspacing='0' cellpadding='0' border='0' width='100%' class='promptbox'><tr><td>" + message + "</td></tr><tr><td><input type='text' value='" + dftvalue + "' id='promptbox' onblur='this.focus()' 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='" + sendto + "(document.getElementById(\"promptbox\").value); [red]document.forms[0].submit();[/red]'> <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>"
document.getElementById("promptbox").focus()
}
[/tt]
Here, I use document.forms[0].submit() replacing the ...removeChild() statement in the "OK" button onclick handler. Make sure it is the "first" form, else modify it accordingly. (Generalization to use form name itself need more changes that I won't bother dealing with at this stage.)

[3] If you need the coordinates for the server-side, you can store the coordinate on two additional hidden boxes before submitting.

 

[cat5ive]

Hi,

The prompt box's working now. Thank you for your help.
I have few more (very basic) questions.
1. How do I assign value back to my variable "newduedate", after user click ok? "newduedate" is a default value that I display in the prompt box. User may change this value.

function callPrompt(){
		
	[COLOR= red]	    var newduedate = '<%=newduedate%>'; [/color]
			
			prompt2(newduedate, 'Apply Due Date','Due date for invoices past due will be changed to', 'myfunction');
		}

2. You mention about "coordinate", if you don't mind, can you please explain to me what's it mean?

Thanks you again.

 

[cat5ive]

Everything is working fine now. Thank you tsuji and dkdude for the responses.

tsuji, If you don't mind, I still don't know what coordinate mean.

Thanks.

 

[tsuji]

>I still don't know what coordinate mean

If you use input type="image" (which is itself a submit control) to submit a form, apart from the form field data being transmitted back to server, the relative "coordinates (x,y)" where the mouse click within the image control will also be sent back to the server.

http://msdn.microsoft.com/library/d...uthor/dhtml/reference/objects/input_image.asp

(Read the small print in the "remarks".)

Hence there is a difference using image type and submit type to submit a form. In the revised script to make use of the custom prompt, that data will be abandoned. If that pieces of info are irrelevant, which probably are in your case, you can safely do it that way.

 

[cat5ive]

Hi tsuji,

Thank you very much for the info. I have another problem , hope you can help. I only want to pop up the prompt box when I want the user to change a data. Below code is how I control to not let it pop up, by checking if there is any new due date. Problem is when I click submit button and there is no newduedate, notthing happen, the form did not get submit.
If there's a newduedate then everything work fine. I get a prompt box and the form get submit after I click ok on the prompt box.

function callPrompt(){
		
		    var newduedate = '<%=newduedate%>';
	[COLOR=red]         if (newduedate != '') [/color]
			{
			   prompt2(newduedate, 'Apply Due Date','Due date for invoices past due will be changed to. (use mm/dd/yy format)', 'getvalue');
[COLOR=red]			}  [/color]
			
		}

So now I temporary use if else statement on the submit button, like below. It works fine but I don't think it's the right way (is it?). Is there any alternative?

<% if (newduedate = "") then %>   
                            <td><input type="image" name="submit" value="f1" src="images/btn_submit_tracking.gif" border="0" >
			<% else %>
                    		<td><input type="image" name="xsubmit" value="f1" src="images/btn_submit_tracking.gif" border="0" onclick="callPrompt();return false;"></td>
         <% end if %>

Thanks

 

[Aron2]

The ASP is fine, but if you want to use javascript:

function callPrompt(){
        
            var newduedate = '<%=newduedate%>';
             if (newduedate != '')
            {
               prompt2(newduedate, 'Apply Due Date','Due date for invoices past due will be changed to. (use mm/dd/yy format)', 'getvalue');
            }  
            else
            {
               document.forms[0].submit();
            } 
        }

 

[cat5ive]

Thank you so much, every one, for the help.