how to show confirm box when clicking link (a href tag)?


I want to confirm user before deleting a row from the table so here the anchor tag html code, which i am using

<a href="/Mpa/Orders/DeleteQuote/22" class="btn btn-danger">Delete Quote</a>

Now, how to show confirmation dialog box("Are you sure, you want to delete it?") using javascript -jquery or HTML, before taking the action of delete or calling back end, if user clicks on above anchor tag?

Thanks

 


Asked by:- manish
0
: 277 At:- 9/28/2017 3:29:22 PM
html javascript jQuery confirmation-dialog javascript-events






2 Answers
profileImage Answered by:- Sam

You can call Confirmation box by simply add onclick event handler in a href(anchor ), so your code will be something like this

<a href="/Mpa/Orders/DeleteQuote/22" class="btn btn-danger" onclick="return confirm('Are you sure, you want to delete it?')">Delete Quote</a>

If user clicks on "OK" then only href="url" will be called.

2
At:- 9/29/2017 12:46:22 PM


profileImage Answered by:- vikas_jk

Here is the fiddle link answer's from the facebook group link

By Bogdan Suciu https://jsfiddle.net/nqkco3ov/3/

By Nicholas Rios https://jsfiddle.net/kqzq293s/

both links work as expected, but the second answer(by Nicholas Rios) is preferred so here the code for it

<table>
  <tbody>
    <tr><th>Row1 <a class="delete" href="#">Delete row</a></th></tr>
    <tr><td>Row2 <a class="delete" href="#">Delete row</a></td></tr>
    <tr><td>Row3 <a class="delete" href="#">Delete row</a></td></tr>
  </tbody>
</table>

Javascript:

function addListeners(){
	var links = document.querySelectorAll('.delete');

	for(i = 0; i < links.length; i++){
		var currentLink = links[i];
	  currentLink.addEventListener('click', clickHandler);
	}
}
function clickHandler(e){
	e.preventDefault();
  var elm = e.target;
  var confirmation = confirm('Are you sure you want to delete this row?');
  if(confirmation){
  	elm.parentElement.parentElement.remove();
    return true;
  }else{
  	return false;
  }
}
addListeners();

thanks

1
At:- 9/29/2017 3:35:06 PM
above both answers works well, but i think, @Sam's answer is easy and simple :) 0
By : manish - at :- 10/3/2017 3:19:02 PM





Login/Register to answer
Or
Register directly by posting answer/details

Full Name *

Email *




By posting your answer you agree on privacy policy & terms of use