...

View Full Version : how to customize javascripts alerts ?



graziano
11-10-2004, 10:47 AM
Hello I have the below code (using js) which creates 2 radio modules
plus 1 button Continue .

* transfer domain
* register domain

Continue

If the client clicks on "transfer domain" and then click on Continue (only in this situation) a javascript alert ask the client aksing if he's the owner of the domain or no . If he clicks yes the script executes the webform .
If he clicks "cancel" button , the scripts redirect him to http://www.notransfer.com .

Well , the script works great , however I would customize the button
which appears in the js alert window .

Exactly I wish to replace Yes button with "Yes I am the owner , transfer it"
and the "cancel" with "No I am not the owner".I would also assign a title to the js alert window.

How to do that ?

Thank you !
Graziano




<html>
<head>
<title>Transfer or Register</title>
</head>

<body>

<script>
<!--

function ownercheck(bValue)
{
var _textForDisplay;

_textForDisplay = "You have selected to transfer a domain name." +
"To confirm that you are the legal owner of this domain name " +
"please click OK. If you are not the legal owner, " +
"please click Cancel and search for a new domain.";

if(bValue)
{
if(document.formtransfer.domainSearchTransferOption.checked)
{
var _answer = window.confirm(_textForDisplay);
if(_answer)
document.formtransfer.submit();
else
return;
window.location = 'http://www.notransfer.com';
}
else
{
document.formtransfer.submit();
}
}
else
document.formtransfer.submit();
}
//-->
</script>

<form action="http://www.yestransfer.com" ID="formtransfer" name="formtransfer">

<input type="radio" name="transfer" value="true" ID="transfer" checked>
<strong>New Domain Name</strong> <br>
<input type="radio" name="transfer" value="false" ID="domainSearchTransferOption">
<strong>Transfer an Existing Domain Name<br>
</strong>&nbsp;<input type="submit" value="Invia" name="B1" onclick="JavaScript:ownercheck(true); return false;" >


</form>
</body>
</html>

LynxGrr
11-10-2004, 10:56 AM
O the best of my knowlege... not possible.

With IE you could use openModalWindow(), and load a page into it with your custom buttons etc. Im not sure if theres a netscape alternative.

graziano
11-10-2004, 12:51 PM
is there no alternative with javascripts .

For example yahoo use another kind of alert window

Go to
https://edit.secure.yahoo.com/ec/exp_reg?.intl=us
and click agree without filling fields .

Any way to have a windows like this instead of that javascript microsoft windows alert ?

Thank you

homerUK
11-10-2004, 01:46 PM
that looks like it's a DIV layer - this could be done in both NS (I think?) and IE.

put at the top of your page (just after the body tag)

<div id='error_msg' unselectable='on' style='display:none; position:absolute'></div>

then put a javascript function



function closeError() {
document.all['error_msg'].style.display = "none"; //hide
}

function showError() {
document.all['error_msg'].innerHTML = "<b>there was an error</b>......blah blah<BR><BR><a href='javascript:closeError()'>close</a>";
document.all['error_msg'].style.left = "100px";
document.all['error_msg'].style.top = "100px";
document.all['error_msg'].style.height = "50px";
document.all['error_msg'].style.width = "200px";
document.all['error_msg'].style.padding = "4px";
document.all['error_msg'].style.border = "1px solid black";
document.all['error_msg'].style.background = "#FFFF66";
document.all['error_msg'].style.display = "block"; //show

}


http://www.mattfacer.com/tmp.htm for an example of how it looks

Hope that helps...

homerUK
11-10-2004, 02:22 PM
I've gone a little further now and made it so that the error message will show an HTML page in the DIV layer...

same code as before, but put this for the open error function ...



function showError() {

//document.all['error_msg'].location.href = "error.htm";
document.all['error_msg'].style.left = "100px";
document.all['error_msg'].style.top = "100px";
document.all['error_msg'].style.padding = "0px";
document.all['error_msg'].style.border = "1px solid black";
document.all['error_msg'].style.background = "#FFFF99";
document.all['error_msg'].style.display = "block"; //show
document.getElementById("error_msg").innerHTML = "<a href='javascript:closeError()' style='padding:3px'>Close</a><BR><iFrame src='error.htm' scrolling=no frameborder=0 marginwidth=0 marginheight=0 align=center width='450px' height='110px'></iframe>";
}


then create a page called "error.htm" - this is then loaded in to an iFrame..

you'll need to do some browser sniffing as this wont work in Netscape... you can actually attach a URL to the DIV layer in NS - for once, it's easier to code with NS!!
See here: http://www.faqts.com/knowledge_base/view.phtml/aid/1272/fid/128/lang/en

Here's an example of the scripts above...
www.mattfacer.com/tmp.htm

:)

graziano
11-12-2004, 10:06 AM
I've gone a little further now and made it so that the error message will show an HTML page in the DIV layer...

same code as before, but put this for the open error function ...



function showError() {

//document.all['error_msg'].location.href = "error.htm";
document.all['error_msg'].style.left = "100px";
document.all['error_msg'].style.top = "100px";
document.all['error_msg'].style.padding = "0px";
document.all['error_msg'].style.border = "1px solid black";
document.all['error_msg'].style.background = "#FFFF99";
document.all['error_msg'].style.display = "block"; //show
document.getElementById("error_msg").innerHTML = "<a href='javascript:closeError()' style='padding:3px'>Close</a><BR><iFrame src='error.htm' scrolling=no frameborder=0 marginwidth=0 marginheight=0 align=center width='450px' height='110px'></iframe>";
}


then create a page called "error.htm" - this is then loaded in to an iFrame..

you'll need to do some browser sniffing as this wont work in Netscape... you can actually attach a URL to the DIV layer in NS - for once, it's easier to code with NS!!
See here: http://www.faqts.com/knowledge_base/view.phtml/aid/1272/fid/128/lang/en

Here's an example of the scripts above...
www.mattfacer.com/tmp.htm

:)


GREAT ! Thank you!

graziano
11-12-2004, 05:10 PM
now the problem is , how to use your great idea inside my script above ?

Thank you

homerUK
11-12-2004, 05:28 PM
here's a page with everything working how I think you have it?
I've changed the popup to not show another page now, as the JS wasnt working.... it's similar to yours now...



<html>
<head>
<title>Transfer or Register</title>
</head>

<body>
<div id='error_msg' unselectable='on' style='display:none; position:absolute'></div>
<script>
<!--

function closeError() {
document.all['error_msg'].style.display = "none"; //hide
}

function showError() {

_textForDisplay = "You have selected to transfer a domain name." +
"To confirm that you are the legal owner of this domain name " +
"please click OK. If you are not the legal owner, " +
"please click Cancel and search for a new domain." +
"<BR><BR>" +
"<input type='button' value='Yes, I am the owner' onclick=\"answer('yes')\"><BR><BR>" +
"<input type='button' value='No, I am not the owner' onclick=\"answer('no')\"><BR><BR>";

document.getElementById("error_msg").innerHTML = _textForDisplay;
document.all['error_msg'].style.left = "100px";
document.all['error_msg'].style.top = "100px";
document.all['error_msg'].style.width = "300px";
document.all['error_msg'].style.height = "100px";
document.all['error_msg'].style.padding = "5px";
document.all['error_msg'].style.border = "1px solid black";
document.all['error_msg'].style.background = "#FFFF99";
document.all['error_msg'].style.display = "block"; //show

}

function answer(result) {
switch(result) {
case "yes": //submit the form
document.formtransfer.submit();
break;
case "no": //send them somewhere else?
document.location.href = 'http://www.notransfer.com';
break;
}
}

function ownercheck()
{
if(document.getElementById("domainSearchTransferOption").checked)
{
//popup window
showError();
}
else
document.formtransfer.submit();
}
//-->
</script>

<form ID="formtransfer" name="formtransfer">

<input type="radio" name="transfer" value="true" ID="transfer" checked>
<strong>New Domain Name</strong> <br>
<input type="radio" name="transfer" value="false" ID="domainSearchTransferOption">
<strong>Transfer an Existing Domain Name<br>
</strong>&nbsp;<input type="submit" value="Invia" name="B1" onclick="javascript:ownercheck(); return false;" >


</form>
</body>
</html>


hope that's ok?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum