[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1188
  • Last Modified:

Changing the confirmation button caption in javascript

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
jazzIIIlove
Asked:
jazzIIIlove
  • 6
  • 6
4 Solutions
 
hieloCommented:
>>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
 
jazzIIIloveAuthor Commented:
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
 
jazzIIIloveAuthor Commented:
thanks hielo...
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
hieloCommented:
>>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
 
hieloCommented:
http://trentrichardson.com/Impromptu/index.php

If you are confused about how to specify the custom labels, look at example 9.
0
 
jazzIIIloveAuthor Commented:
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
 
jazzIIIloveAuthor Commented:
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
 
hieloCommented:
>>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
 
jazzIIIloveAuthor Commented:
<<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
 
jazzIIIloveAuthor Commented:
well...hielo is the MVP in this site...
0
 
hieloCommented:
>>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
 
hieloCommented:
you are welcome
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

  • 6
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now