Solved

Changing the confirmation button caption in javascript

Posted on 2008-10-29
12
1,165 Views
Last Modified: 2010-05-18
Hi there;

I want to change the caption of confirmation button's caption from OK to Yes, from Cancel to No...

Is it possible? or any other function to do this job in Javascript?

Best regards...


<html>

<head>

<title>Cancelling events in onclick</title>

</head>

<body>

<a href="http://www.bilkent.edu.tr" onclick="return confirm('Load Bilkent home page?');">Bilkent</a>

</body>

</html>

Open in new window

0
Comment
Question by:jazzIIIlove
  • 6
  • 6
12 Comments
 
LVL 82

Assisted Solution

by:hielo
hielo earned 500 total points
ID: 22836114
>>I want to change the caption of confirmation button's caption from OK to Yes, from Cancel to No...
We all do!

>>Is it possible?
No, but there are alternatives... Let look for them
0
 
LVL 12

Author Comment

by:jazzIIIlove
ID: 22836154
in fact, i can change the caption with VBScript but i just want to know if there is such a function or thing in Javasript...
0
 
LVL 12

Author Comment

by:jazzIIIlove
ID: 22836159
thanks hielo...
0
 
LVL 82

Accepted Solution

by:
hielo earned 500 total points
ID: 22836208
>>in fact, i can change the caption with VBScript
Yes, known fact, but that's IE only. Not with javascript:

Well I found what I was looking for, except it's not a confirm - its an alert:
http://slayeroffice.com/code/custom_alert/

But I have seen that in jQuery. I'll have to search more...
0
 
LVL 82

Assisted Solution

by:hielo
hielo earned 500 total points
ID: 22836309
http://trentrichardson.com/Impromptu/index.php

If you are confused about how to specify the custom labels, look at example 9.
0
 
LVL 12

Author Comment

by:jazzIIIlove
ID: 22836383
for the slayer office...I am doing stg wrong but what..snippet attached...

for the other link: I am on it..

Best regards...
<html>
 

<head>

<title>Cancelling events in onclick</title>

<script>

var ALERT_TITLE = "Oops!";

var ALERT_BUTTON_TEXT = "Yes";
 

// over-ride the alert method only if this a newer browser.

// Older browser will see standard alerts

if(document.getElementById) {

    window.alert = function(txt) {

        createCustomAlert(txt);

    }

}
 

function createCustomAlert(txt1) {

    // shortcut reference to the document object

    d = document;
 

    // if the modalContainer object already exists in the DOM, bail out.

    if(d.getElementById("modalContainer")) return;
 

    // create the modalContainer div as a child of the BODY element

    mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));

    mObj.id = "modalContainer";

     // make sure its as tall as it needs to be to overlay all the content on the page

    mObj.style.height = document.documentElement.scrollHeight + "px";
 

    // create the DIV that will be the alert 

    alertObj = mObj.appendChild(d.createElement("div"));

    alertObj.id = "alertBox";

    // MSIE doesnt treat position:fixed correctly, so this compensates for positioning the alert

    if(d.all && !window.opera) alertObj.style.top = document.documentElement.scrollTop + "px";

    // center the alert box

    alertObj.style.left = (d.documentElement.scrollWidth - alertObj.offsetWidth)/2 + "px";
 

    // create an H1 element as the title bar

    h1 = alertObj.appendChild(d.createElement("h1"));

    h1.appendChild(d.createTextNode(ALERT_TITLE));
 

    // create a paragraph element to contain the txt argument

    msg = alertObj.appendChild(d.createElement("p"));

    msg.appendChild(d.createTextNode(txt1));    
 

    // create an anchor element to use as the confirmation button.

    btn = alertObj.appendChild(d.createElement("a"));

    btn.id = "closeBtn";

    btn.appendChild(d.createTextNode(ALERT_BUTTON_TEXT));

    btn.href = "#";

    // set up the onclick event to remove the alert when the anchor is clicked

    btn.onclick = function() { removeCustomAlert();return false; }
 

    

}
 

// removes the custom alert from the DOM

function removeCustomAlert() {

    document.getElementsByTagName("body")[0].removeChild(document.getElementById("modalContainer"));

}
 

</script>
 

</head>

<body>

<!--<a href="http://www.bilkent.edu.tr" onclick="return confirm('Load Bilkent home page?');">Bilkent</a>-->
 
 

<a href="http://www.bilkent.edu.tr" onclick="createCustomAlert('Yes');">Bilkent</a>
 

</body>

</html>

Open in new window

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 12

Author Comment

by:jazzIIIlove
ID: 22836487
for the jQuery Impromptu:

I am very confused...I download it and it resides in the same hierarchy with my html file...But i think i editted the code wrong (i guess very wrong, don't laugh at me:)

Best regards...
<html>

<head>

<script language="javascript" src="jquery-impromptu.1.5.js">
 

var txt = 'Load Bilkent home page?<br />

      <input type="text" id="alertName" 

      name="myname" value="name here" />';
 
 

function mycallbackform(v,m){

      $.prompt(v +' ' + m.children('#alertName').val());

}
 

$.prompt(txt,{

      callback: mycallbackform,

      buttons: { Hey: 'Hello', Bye: 'Good Bye' }

});
 

</script>

</head>

<body>

<a href="http://www.bilkent.edu.tr" onclick="mycallbackform('Yes','No');">Bilkent</a>
 

</body>

</html>

Open in new window

0
 
LVL 82

Assisted Solution

by:hielo
hielo earned 500 total points
ID: 22836607
>>for the slayer office...I am doing stg wrong but what..snippet attached...
1. an alert() never returns false. So putting it on the onclick of a link will always cause it to navigate to the link
2. that customization of that alert box depends on the css that you find/see in the source code of that page. So you should really be looking at the source code.
0
 
LVL 12

Author Comment

by:jazzIIIlove
ID: 22836676
<<1. an alert() never returns false. So putting it on the onclick of a link will always cause it to navigate <<to the link

you are absolutely right...

for second, ok, i will be looking...

Best regards...Thanks for your effort...

0
 
LVL 12

Author Closing Comment

by:jazzIIIlove
ID: 31511450
well...hielo is the MVP in this site...
0
 
LVL 82

Expert Comment

by:hielo
ID: 22836761
>>for the jQuery Impromptu:...
Well, you have
>><script language="javascript" src="jquery-impromptu.1.5.js">

but that plugin does NOT include the jQuery library. You still need to link to the jQuery library. You also needs the accompanying css.

Lastly, when you import a javacript file, you cannot have code in between the script tags:
CORRECT: <script src="somefile.js"></script>

INCORRECT: <script src="somefile.js"> var x=3; ....</script>

Open in new window

0
 
LVL 82

Expert Comment

by:hielo
ID: 22836764
you are welcome
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

28 Experts available now in Live!

Get 1:1 Help Now