Unable to perform the on click event

Question

With reference to the following link http://jsfiddle.net/Xtreu/, I am trying to do same functionality with on click event Delete My Data button with out using any form. I tried in different ways but it does not happened. Can Any one help me how to do the same example with on click event?

HTML:

<form method="post" action="/echo/html/"> <input type="hidden" name="html" value="&lt;p&gt;Your data has been deleted&lt/p&gt;" /> <input type="submit" value="Delete My Data" /> </form> <div id="confirmBox"> <div class="message"></div> <span class="button yes">Yes</span> <span class="button no">No</span> </div>

JavaScript:

function doConfirm(msg, yesFn, noFn) { var confirmBox = $("#confirmBox"); confirmBox.find(".message").text(msg); confirmBox.find(".yes,.no").unbind().click(function () { confirmBox.hide(); }); confirmBox.find(".yes").click(yesFn); confirmBox.find(".no").click(noFn); confirmBox.show(); } $(function () { $("form").submit(function (e) { e.preventDefault(); var form = this; doConfirm("Are you sure?", function yes() { form.submit(); }, function no() { // do nothing }); }); });

I updated your JSFiddle, it's without any form tag -> jsfiddle.net/Xtreu/445 Maybe you have to specify what's going wrong or what's not working in your code, because you want a button without form, but in your example code there is a form? — Eich
– Eich, Commented Apr 11, 2014 at 7:06

Sridhar R · Accepted Answer · 2014-04-11 07:04:23Z

Here the code without using form

Try this example

<div id="msg" style="display:none">Your data has been deleted</div> <input type="button" id="d_btn" value="Delete My Data" /> <div id="confirmBox"> <div class="message"></div> <span class="button yes">Yes</span> <span class="button no">No</span> </div>

script

function doConfirm(msg, yesFn, noFn) { var confirmBox = $("#confirmBox"); confirmBox.find(".message").text(msg); confirmBox.find(".yes,.no").unbind().click(function () { confirmBox.hide(); }); confirmBox.find(".yes").click(yesFn); confirmBox.find(".no").click(noFn); confirmBox.show(); } $(function () { $("#d_btn").click(function (e) { e.preventDefault(); var form = $(this).closest('form'); doConfirm("Are you sure?", function yes() { $('#d_btn').hide() $('#msg').show() }, function no() { // do nothing }); }); });

DEMO

The Dialog box is showing at background. If html page contains the content then on click of button the alert box is not visible. How can we pop it in foreground
Now Onclick of button I am able to see the Dialog. Is it possible that once the Dialog box opens the focus should only be in dialog #confirmBox not html page. Just like alert. i.e; Until user press yes or no he can't perform anything in HTML.

Rakesh Chouhan · Accepted Answer · 2014-04-11 07:00:17Z

try this

your HTML

<form method="post" action="/echo/html/" id="frm"> <input type="hidden" name="html" value="&lt;p&gt;Your data has been deleted&lt/p&gt;" /> <input type="button" id='btnSubmit'value="Delete My Data" /> </form> <div id="confirmBox"> <div class="message"></div> <span class="button yes">Yes</span> <span class="button no">No</span> </div>

your js code:

function doConfirm(msg, yesFn, noFn) { var confirmBox = $("#confirmBox"); confirmBox.find(".message").text(msg); confirmBox.find(".yes,.no").unbind().click(function () { confirmBox.hide(); }); confirmBox.find(".yes").click(yesFn); confirmBox.find(".no").click(noFn); confirmBox.show(); } $(function () { $("#btnSubmit").click(function (e) { e.preventDefault(); var form = this; doConfirm("Are you sure?", function yes() { $('#frm').submit(); //Changed }, function no() { // do nothing }); }); });

In your code the button type was submit so I changed it as normal button and I gave id to your form and submit button.

Collectives™ on Stack Overflow

Unable to perform the on click event

2 Answers 2

4 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Related