function btnSelete_Click() {
var strconfirm = confirm("Are you sure you want to delete?");
if (strconfirm == true) {
return true;
}
}
<asp:Button ID="btnSelect" runat="server" Text="Select" Onclientclick="return btnSelete_Click();" CssClass="cssbutton" />
How to create a yes/no/cancel alert box instead of ok/cancel alert box in Javascript?
In an attempt to solve a similar situation I've come across this example and adapted it. It uses JQUERY UI Dialog as Nikhil D suggested. Here is a look at the code:
HTML:
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<input type="button" id="box" value="Confirm the thing?" />
<div id="dialog-confirm"></div>
JavaScript:
$('#box').click(function buttonAction() {
$("#dialog-confirm").html("Do you want to do the thing?");
// Define the Dialog and its properties.
$("#dialog-confirm").dialog({
resizable: false,
modal: true,
title: "Do the thing?",
height: 250,
width: 400,
buttons: {
"Yes": function() {
$(this).dialog('close');
alert("Yes, do the thing");
},
"No": function() {
$(this).dialog('close');
alert("Nope, don't do the thing");
}
}
});
});
$('#box').click(buttonAction);
I have a few more tweaks I need to do to make this example work for my application. Will update this if I see it fit into the answer.
Hope this helps someone.
You cannot do that with the native confirm() as it is the browser’s method.
You have to create a plugin for a confirm box (or try one created by someone else). And they often look better, too.
Additional Tip: Change your English sentence to something like
Really, Delete this Thing?
You can use jQuery UI Dialog.
These libraries create HTML elements that look and behave like a dialog box, allowing you to put anything you want (including form elements or video) in the dialog.
Built a tiny, confirm-like vanilla js yes / no dialog.
https://www.npmjs.com/package/yesno-dialog
I shall try the solution with jQuery, for sure it should give a nice result. Of course you have to load jQuery ...
What about a pop-up with something like this? Of course this is dependant on the user authorizing pop-ups.
<html>
<head>
<script language="javascript">
var ret;
function returnfunction()
{
alert(ret);
}
</script>
</head>
<body>
<form>
<label id="QuestionToAsk" name="QuestionToAsk">Here is talked.</label><br />
<input type="button" value="Yes" name="yes" onClick="ret=true;returnfunction()" />
<input type="button" value="No" onClick="ret=false;returnfunction()" />
</form>
</body>
</html>
"Confirm" in Javascript stops the whole process until it gets a mouse response on its buttons. If that is what you are looking for, you can refer jquery-ui but if you have nothing running behind your process while receiving the response and you control the flow programatically, take a look at this. You will have to hard-code everything by yourself but you have complete command over customization. https://www.w3schools.com/howto/howto_css_modals.asp
Related
I am trying to make a popup / alert window so that when the page is being loaded, the popup will open. I searched around and found something I like, but I don't know how to get this option working with the ability to not show the popup to the user more than once (with a "Don't show this again" option).
I added this to my header in the script part:
$(document).ready(function(){ alert('hi')});
I know that I need the jQuery script for this, so I added
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
to my HTML page. This is working fine, but I don't know how I could modify my alert in a way for making a checkbox or a button with "Don't show this again".
I also found a solution where the alert was an external popup HTML page, but I want it inside my HTML page. Is there a way to solve my problem over that, or is the way over the alarm better?
Unfortunately, you can't do this through a typical JavaScript alert box. You'll need to build you own modal popup to simulate an alert box. jQuery's plugin jQuery UI has a really nice built-in function for this, and I'll use this in my example.
To give the user the option of not showing a window again, you need to make use of localStorage. You would need to create a condition that checks for whether a localStorage item is set. If it is not, display the modal, if it is, hide the modal:
if (!localStorage.hideAlert) {
$(function() {
$("#dialog").dialog();
});
}
else {
$("#dialog").css("display", "none");
}
In the modal itself, you would have a 'No' button that adds the relevant value to localStorage:
<div id="dialog" title="Show Again?">
<p>Would you like to show this dialog again?</p>
<button name="yes" class="yes">Yes</button>
<button name="no" class="no">No</button>
</div>
$(".yes").on("click", function() {
$("#dialog").dialog("close");
});
$(".no").on("click", function() {
localStorage.setItem('hideAlert', true);
$("#dialog").dialog("close");
});
I've created a working example showcasing this here.
This way, all of your code can reside within a single file, though remember that you'll still need to include the external jQuery UI JavaScript, and optional CSS:
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Hope this helps! :)
In the example below, every popup window has a "Don't Show This Again" button.
Main document:
Code:
<HTML>
<Head>
<Script Language=JavaScript>
var expDate = new Date();
expDate.setTime(expDate.getTime()+365*24*60*60*1000); // one year
function setCookie(isName,isValue,dExpires){
document.cookie = isName+"="+isValue+";expires="+dExpires.toGMTString();
}
function getCookie(isName){
cookieStr = document.cookie;
startSlice = cookieStr.indexOf(isName+"=");
if (startSlice == -1){return false}
endSlice = cookieStr.indexOf(";",startSlice+1)
if (endSlice == -1){endSlice = cookieStr.length}
isData = cookieStr.substring(startSlice,endSlice)
isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return isValue;
}
function initPopups(){
if (!getCookie('pop1'))
{popWin1 = window.open("1/pop1.html","","width=200,height=150,top=50,left=400")}
if (!getCookie('pop2'))
{popWin2 = window.open("1/pop2.html","","width=200,height=150,top=50,left=180")}
}
window.onload=initPopups;
</Script>
</Head>
<Body>
</Body>
The popup files are in a folder named 1
pop1.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop1',0,opener.expDate);self.close()">
</Body>
</HTML>
pop2.html:
Code:
<HTML>
<Body>
<input type=button value="Don't show again" onclick="opener.setCookie('pop2',0,opener.expDate);self.close()">
</Body>
</HTML>
I am trying to make my own dialog box. I want to use jquery for this. For some buttons on my site I need a confirmation dialog (like "Are you sure you want to delete" yes/no). When the dialog is active, the rest of the site should not be clickable.
So, I made this:
<div class="overlay" id="overlay" style="display:none;">
<div class="overlaycontent" id="overlaycontent">
<div id="overlaytext" class="overlaytext ">
<span id="overlaymessage" class="mediumtext bold">Deze klant verwijderen?</span>
<br><br>
<button id="nobutton" class="button1 highbutton hand" onclick="confirmno()">Nee</button>
<button id="yesbutton" class="button2 highbutton hand" onclick="confirmyes()">Ja</button>
</div>
</div>
</div>
ID overlay is over the whole page.
ID overlaycontent creates a white box on top of it.
ID overlaytext centers the message
ID overlaymessage contains the question/message.
ID nobutton is the button to say no :)
ID yesbutton is.. guess what :)
Now, the javascript to display a message:
function confirm(message,nobutton,yesbutton){
$('#overlaymessage').html(message);
$('#nobutton').html(nobutton);
$('#yesbutton').html(yesbutton);
$('#overlay').show();
}
function confirmno(){
$('#overlay').hide();
}
function confirmyes(){
????
}
So far, it works fine (except the yes button of course, please read further on), but for the next step I lack the knowledge. Say that I have a button somewhere to delete a user on my website.
<button class="redbutton" onclick="deleteuser(22)">
The button needs javascript like:
<script language="javascript">
function deleteuser(userid){
confirm('Delete user?','No','Yes');
??????
}
</script>
Now where the question marks are, I want the function to do something based on the fact the user clicked yes or no. How to catch this? I don't have any idea. Please help me out. I don't want to use Jquireui.dialog.
The trouble here is that you can't pause execution in javascript, so you'll need to adjust your confirm function (which you should probably rename, by the way, since JS has a native confirm function). Get rid of the onclick of your yes button, and adjust your confirm function like so:
function confirm(message,nobutton,yesbutton,yesfunction){
$('#overlaymessage').html(message);
$('#nobutton').html(nobutton);
$('#yesbutton').html(yesbutton);
$('#overlay').show();
$('#yesbutton').off("click").click(yesfunction);
}
Then, pass a function into your confirm call:
function deleteuser(userid){
function deleteConfirmed() {
// delete code here
}
confirm('Delete user?','No','Yes',deleteConfirmed);
}
You need to capture the result from your confirm dialogue box e.g.
var x = confirm("Are you sure you are ok?");
if (x) {
alert("Good!");
} else {
alert("Too bad");
}
You can simply do this.
<script language="javascript">
function deleteuser(userid){
if(confirm('Delete user?')) {
//'Ok' is clicked
}
else {
//'Cancel' is clicked
}
}
</script>
I'm extremely new to front end web development, and I was wondering if there is anyway I can have a small text box appear on clicking a link, which disappears when I submit the form. (I want something like what Facebook has currently for the birthday wishes, where you click on the persons name, a small comment box opens up 'on top', and lets u post a wish on the persons wall from the main page itself).
Sorry if this is a stupid question.
The best will be to use a framework like jQuery Dialog UI. The documentation is big and there are a lot of samples available.
For instance, create a div element with your input text and bound his creation to the button you want:
HTML
<div id="dialog">
<input type="text" />
</div>
Open dialog
Javascript
$(function () {
$("#dialog").dialog({ autoOpen: false });
$('a').click(function () {
$("#dialog").dialog('open');
});
});
The other answerer is assuming you're using jQuery. If that's true, I would look at jqModal. It's much slimmer and simpler than jQuery UI
basic example in plain javascript to get you started
<form id="mainForm">
<a id="clickme" href="javascript:;">click me</a>
<input id="submitme" type="submit" />
</form>
<script type="text/javascript">
var mainForm = document.getElementById("mainForm"),
textBox = document.createElement("input");
textBox.id="tmpTextBox";
textBox.type="text";
document.getElementById("clickme").onclick = function () {
mainForm.appendChild(textBox);
}
document.getElementById("submitme").onclick = function () {
mainForm.removeChild(textBox);
}
</script>
I'm making a simple remove link with an onClick event that brings up a confirm dialog. I want to confirm that the user wants to delete an entry. However, it seems that when Cancel is clicked in the dialog, the default action (i.e. the href link) is still taking place, so the entry still gets deleted. Not sure what I'm doing wrong here... Any input would be much appreciated.
EDIT: Actually, the way the code is now, the page doesn't even make the function call... so, no dialog comes up at all. I did have the onClick code as:
onClick="confirm('Delete entry?')"
which did bring up a dialog, but was still going to the link on Cancel.
<%# taglib prefix="c" uri="http://java.sun.com/jstl/core_rt"%>
<%# taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<script type="text/javascript">
function delete() {
return confirm('Delete entry?')
}
</script>
...
<tr>
<c:if test="${userIDRO}">
<td>
<a href="showSkill.htm?row=<c:out value="${skill.employeeSkillId}"/>" />
<img src="images/edit.GIF" ALT="Edit this skill." border="1"/></a>
</td>
<td>
<a href="showSkill.htm?row=<c:out value="${skill.employeeSkillId}&remove=1"/>" onClick="return delete()"/>
<img src="images/remove.GIF" ALT="Remove this skill." border="1"/></a>
</td>
</c:if>
</tr>
There's a typo in your code (the tag a is closed too early).
You can either use:
<img ...>
note the return (confirm): the value returned by scripts in intrinsic evens decides whether the default browser action is run or not; in case you need to run a big piece of code you can of course call another function:
<script type="text/javascript">
function confirm_delete() {
return confirm('are you sure?');
}
</script>
...
<img ...>
(note that delete is a keyword)
For completeness: modern browsers also support DOM events, allowing you to register more than one handler for the same event on each object, access the details of the event, stop the propagation and much more; see DOM Events.
Well, I used to have the same problem and the problem got solved by adding the word "return" before confirm:
onclick="return confirm('Delete entry?')"
I wish this could be heplful for you..
Good Luck!
I use this, works like a charm. No need to have any functions, just inline with your link(s)
onclick="javascript:return confirm('Are you sure you want to delete this comment?')"
I had issue alike (click on button, but after cancel clicked it still removes my object), so made this in such way, hope it helps someone in the future:
$('.deleteObject').click(function () {
var url = this.href;
var confirmText = "Are you sure you want to delete this object?";
if(confirm(confirmText)) {
$.ajax({
type:"POST",
url:url,
success:function () {
// Here goes something...
},
});
}
return false;
});
Using a simple link for an action such as removing a record looks dangerous to me : what if a crawler is trying to index your pages ?
It will ignore any javascript and follow every link, probably not a good thing.
You'd better use a form with method="POST".
And then you will have an event "OnSubmit" to do exactly what you want...
First of all, delete is a reserved word in javascript, I'm surprised this even executes for you (When I test it in Firefox, I get a syntax error)
Secondly, your HTML looks weird - is there a reason you're closing the opening anchor tags with /> instead of just > ?
<img src="images/delete.png" onclick="return confirm_delete('Are you sure?')">
<script type="text/javascript">
function confirm_delete(question) {
if(confirm(question)){
alert("Action to delete");
}else{
return false;
}
}
</script>
If you want to use small inline commands in the onclick tag you could go with something like this.
<button id="" class="delete" onclick="javascript:if(confirm('Are you sure you want to delete this entry?')){jQuery(this).parent().remove(); return false;}" type="button">
Delete
</button>
try this:
OnClientClick='return (confirm("Are you sure you want to delete this comment?"));'
I've had issue with IE7 and returning false before.
Check my answer here to another problem: Javascript not running on IE
How do I make one of those hyperlinks where when you click it, it will display a popup asking "are you sure?"
<INPUT TYPE="Button" NAME="confirm" VALUE="???" onClick="message()">
I already have a message() function working. I just need to know what the input type for a hyperlink would be.
<a href="http://somewhere_else" onclick="return confirm()">
When the user clicks the link, the confirm function will be called. If the confirm function returns false, the link traversal is cancelled, if true is returned, the link is traversed.
try to click, I dare you
with the function
function confirmAction(){
var confirmed = confirm("Are you sure? This will remove this entry forever.");
return confirmed;
}
(you can also return the confirm right away, I separated it for the sake of readability)
Tested in FF, Chrome and IE
As Nahom said, except I would put the javascript:message() call directly in the href part (no need for onclik then).
Note: leaving the JavaScript call in the onClick has a benefit: in the href attribute, you can put a URL to go to if the user doesn't have JavaScript enabled. That way, if they do have JS, your code gets run. If they don't, they go somewhere where they are instructed to enable it (perhaps).
Now, your message routine must not only ask the question, but also use the answer: if positive, it must call submit() on the form to post the form. You can pass this in the call to ease the fetching of the form.
Personally, I would go for a button (input tag as you show) instead of a simple link to do the process: it would use a more familiar paradigm for the users.
[EDIT] Since I prefer to verify answers I give, I wrote a simple test:
<script type="text/javascript" language="JavaScript">
function AskAndSubmit(t)
{
var answer = confirm("Are you sure you want to do this?");
if (answer)
{
t.form.submit();
}
}
</script>
<form action="Tests/Test.html" method="GET" name="subscriberAddForm">
<input type="hidden" name="locationId" value="2721"/>
<input type="text" name="text" value="3.1415926535897732384"/>
<input type="button" name="Confirm" value="Submit this form" onclick="AskAndSubmit(this)"/>
</form>
Yes, the submit just reload the page here... Tested only in FF3.
[EDIT] Followed suggestion in the comments... :-)
???
This answer would be OK only when the click need NOT navigate the user to another page.