dropdownlist autopostback with javascript confirm

R

robert

I have a dropdownlist with the autopostback set to true. I want the
user to be confirm whether they do indeed want to change the value,
which on post back fires a server side event (selectedindexchanged).

I have tried adding an onchange attribute "return confirm('sure u wanna
change this?';") but it will not postback regardless of the confirm
result and the value in the list does not revert back if cancel
selected.

Is there a solution?
 
B

Brennan Stehling

Since OnChange event is already defined with the DropDownList control,
you need to preserve it and call your action as well.

One way to do that is with the Prototype Javascript framework.

http://joseph.randomnetworks.com/archives/2006/08/01/javascript-events-with-prototype/

But you do ont want attach a second event. You want to wrap the
current even inside a confirm block. To do that you could use
Javascript to take the value of the onclick attribute and change it
with your confirm code.

How are your skills with Javascript and DOM?

Brennan Stehling
http://brennan.offwhite.net/blog/
 
K

Ken Cox [Microsoft MVP]

Hi Robert,

Try the code below?

Ken
Microsoft MVP [ASP.NET]

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

Protected Sub DropDownList1_SelectedIndexChanged _
(ByVal sender As Object, ByVal e As System.EventArgs)
Label1.Text = DropDownList1.SelectedValue.ToString
End Sub

Protected Sub Page_Load _
(ByVal sender As Object, _
ByVal e As System.EventArgs)
DropDownList1.Attributes.Add _
("OnChange", "if (!confirm('Change this?')){return};")
End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Confirm Dropdownlist</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:dropdownlist id="DropDownList1" runat="server"
autopostback="True"
onselectedindexchanged="DropDownList1_SelectedIndexChanged">
<asp:listitem selected="True">Red</asp:listitem>
<asp:listitem>Green</asp:listitem>
<asp:listitem>Blue</asp:listitem>
</asp:dropdownlist><br />
<br />
<asp:label id="Label1" runat="server"></asp:label>&nbsp;</div>
</form>
</body>
</html>
 
B

bruce barker \(sqlwork.com\)

the autopostback is done by calling client script that is attached to the
onchange.only return on false;

if (!confirm('do this')) return;

note: your approach has really bad behavior for keyboard users. if they
select the downdown, and use the arrow keys to select a value, each arrow
press fires your alert.

-- bruce (sqlwork.com)
 
B

Brennan Stehling

Ken,

I did not realize it worked that way. I tried your example and see
that ASP.NET appends the postback code after the Javascript set in the
attribute above so that you can cancel the postback by calling return.

I thought that once the OnChange value was set you could not change it.

Brennan
Hi Robert,

Try the code below?

Ken
Microsoft MVP [ASP.NET]

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

Protected Sub DropDownList1_SelectedIndexChanged _
(ByVal sender As Object, ByVal e As System.EventArgs)
Label1.Text = DropDownList1.SelectedValue.ToString
End Sub

Protected Sub Page_Load _
(ByVal sender As Object, _
ByVal e As System.EventArgs)
DropDownList1.Attributes.Add _
("OnChange", "if (!confirm('Change this?')){return};")
End Sub
</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Confirm Dropdownlist</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:dropdownlist id="DropDownList1" runat="server"
autopostback="True"
onselectedindexchanged="DropDownList1_SelectedIndexChanged">
<asp:listitem selected="True">Red</asp:listitem>
<asp:listitem>Green</asp:listitem>
<asp:listitem>Blue</asp:listitem>
</asp:dropdownlist><br />
<br />
<asp:label id="Label1" runat="server"></asp:label>&nbsp;</div>
</form>
</body>
</html>


I have a dropdownlist with the autopostback set to true. I want the
user to be confirm whether they do indeed want to change the value,
which on post back fires a server side event (selectedindexchanged).

I have tried adding an onchange attribute "return confirm('sure u wanna
change this?';") but it will not postback regardless of the confirm
result and the value in the list does not revert back if cancel
selected.

Is there a solution?
 
R

robert

I like this idea, easlier I got round it by not using autopostback at
all and just submitting the form using document.forms[0].submit().
Crude I know!

Just need to reset the selectedindex back to the original (using
variable) if the user cancels.

Later I'm going to try the atlas control toolkit's confirm control to
see how it works on the dropdownlist with autopostback....

Thanks
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,994
Messages
2,570,222
Members
46,810
Latest member
Kassie0918

Latest Threads

Top