Popup window on button click

Question

Sarah Lee 0 Light Poster

17 Years Ago

Hi

In my application, i would like to use the popup window concept.
When the user clciks a button, a popup window should appear, with a textbox to enter a value.
on closing the popup window, the user entered value should get saved into a table

I am using asp.net 2.0

Can anyone please tel, what all are the things to be noted for this?

thanks

asp.net

8 Contributors
12 Replies
5K Views
1 Year Discussion Span
Latest Post 15 Years Ago Latest Post by anthonyqkiernan

All 12 Replies

M_K_Higa 2 Junior Poster

17 Years Ago

Since you are capturing user action via popup, you will most likely use client side scripting to get the user input. Once you get the user input, you can set it to some control in your form which will get sent to your server when the form is submitted.

Here’s an expmple…

<form id="form1" runat="server">
<div>
  <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="HiddenField1.value = prompt('Enter your feedback','');" />
  <asp:HiddenField ID="HiddenField1" runat="server" />
  <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>

This code handles the user input on the server side. (In this case, it simply displays it in a label, but at this point you get to decide what to do with it.)

protected void Page_Load(object sender, EventArgs e) {
  if(IsPostBack) {
    Label1.Text = HiddenField1.Value;
  }
}

The button has a client script calling the prompt function. The value returned by the prompt function is set to the value of the hidden field, which gets submitted to the server. NOTE: In production code, you have to validate the user input.

aravindkishore 0 Light Poster

17 Years Ago

I think session concept works for ur problem

M_K_Higa 2 Junior Poster

17 Years Ago

Ok. Instead of using window.open , you can use the window.showModalDialog method.

The info gathering is still done on the client side, so there's not much asp.net stuff going on here. Just set the returned value to a field that can be returned to the server and you should be able to do your asp.net stuff as usual.

On a related note, you may run into problems with popup blockers so make sure you test very well.

Anyway, here some sample code...

parent.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Parent Page</title>
<script type="text/javascript">
  function DoOnclick() {
    var RetVal="Test: The child.html page will change this value...";
    alert(RetVal); 
    RetVal = window.showModalDialog("child.html","","dialogHeight: 150px; dialogWidth: 300px;");
    alert(RetVal); 
  }
</script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <input id="Button1" type="button" value="Open Child..." onclick="DoOnclick();" />
    </div>
  </form>
</body>
</html>

child.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Child Page</title>
<script type="text/javascript">
  function DoOnclick(arg) {
    if(arg.value == "Enter a value...") {
      alert("Do some kind of validation...");
      return false; // Make sure the user changes the value
    } else {
      window.returnValue = arg.value;
    }
    window.close();
  }
</script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <strong>This is the modal box...</strong><br />
      <input id="Text1" type="text" value="Enter a value..." /><br />
      <input id="Button1" type="button" value="Return a value..." onclick="DoOnclick(Text1);" />
    </div>
  </form>
</body>
</html>

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Sarah Lee 0 Light Poster · Answer 1 · 2007-02-22T18:59:07+00:00

Thanks for the reply.
Actually i am trying in following way , but struck with this

Suppose if i want to do like this.

parent.aspx
<asp:button id="button1" onclick="openwindow()" ruant="server/>
<script>
function openwindow()
{
window.open("popup.aspx", "mywindow",""...)
}
</script>

popup.aspx
<asp:textbox...>
<asp:button onclcik="adduser"...>
<asp:button onclick="close"..>

The user enters value in textbox of popup.aspx
How can i catch that value in parent.aspx method,( i want to get the value through server side) where i set
dim name as string=" " ----------------> text entered in popup window textbox

Thanks

narkhedeuday 0 Newbie Poster · Answer 2 · 2007-02-22T22:35:32+00:00

narkhedeuday 0 Newbie Poster

17 Years Ago

g

Sarah Lee 0 Light Poster · Answer 3 · 2007-02-23T00:49:47+00:00

Sarah Lee 0 Light Poster

17 Years Ago

Thanks. just gonna try

bazpaul 0 Newbie Poster · Answer 4 · 2007-03-01T16:59:25+00:00

Hi

This is a nice example and as a beginner has helped my nicely with a project im working on. However im am having a little problem. When i change the dialog box height and width it has no effect on the size of the box!!!

Can anyone suggest what could be going wrong, heres some of my code;

<code>
<script type="text/javascript">
function DoOnclick()
{
var RetVal="";
RetVal = window.showModalDialog("email_prompt.aspx?name=SS_Server_Detail_Report&param1=1026","","dialogHeight: 150x; dialogWidth: 400px; dialogTop: 250px; dialogLeft: 500px; edge: Sunken; resizable: Yes; status: No;");
alert(RetVal);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="Print Report" onclick="DoOnclick();" />

</form>
</body>
</html>
</code>

M_K_Higa 2 Junior Poster · Answer 5 · 2007-03-01T22:37:13+00:00

Looks like a typo -- you have dialogHeiht: 150x; it should be dialogHeiht: 150px; :)

rajbav2000 0 Newbie Poster · Answer 6 · 2008-11-13T17:08:52+00:00

Hi
In my application, i would like to use the popup window concept.
When the user clciks a button, a popup window should appear, with a textbox to enter a value.
on closing the popup window, the user entered value should get saved into a table
I am using asp.net 2.0
Can anyone please tel, what all are the things to be noted for this?
thanks

hi this is rajamani and the coding for pop up window is Response.Write("<script>window.alert('Welcome')</script>");
try this out u will get the pop window only but u wil not get a text box

M_K_Higa 2 Junior Poster · Answer 7 · 2008-11-13T21:31:56+00:00

I'm not sure I understand. Is there a question here?

sandypeter111 0 Newbie Poster · Answer 8 · 2008-11-15T04:07:54+00:00

You need to update your code as follows:

void Page_load(object sender, EventArgs e)
{
Button1.Attributes.Add( "onclick", "popWin();return false;" );
}

Without that additional Javascript statement, the button would still cause a postback.

anthonyqkiernan 0 Newbie Poster · Answer 9 · 2009-01-29T23:21:36+00:00

<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="HiddenField1.value = prompt('Enter your feedback','');" />
  <asp:HiddenField ID="HiddenField1" runat="server" />

This looks precisely what I require. However with the "HiddenField1.value = " bit I don't get any prompt. It works if I remove it.

Any ideas? (I'm using VB, BTW. But, at the moment it's jsut getting the box to open that's the problem.)

Popup window on button click

Recommended Answers Collapse Answers

All 12 Replies

Recommended Answers