Pass value from child popup window to parent page window using JavaScript

Introduction: Hello Guys, “Welcome back” Today, i am here with another one new great article. In this article I explained the implementation about how to pass value from one child popup window to another parent page window using JavaScript.

When the child popup window is opened using the JavaScript window.open function, the reference object of the parent window is obtained from  JavaScript  window.opener  instance.

The instanceof the  JavaScript window.opener  will be used as  reference and access their elements of the parent page by using  JavaScript.

 Code for Parent Page

On the HTML Parent Page I will use HTML TextBox and a Button controls. To the TextBox I will be assigned ReadOnly attribute. To the Button I will be assigned an OnClick event handler. When user will be click on the Button, the SelectName  JavaScript gets called which will open the Popup window using the window.open function.

<table border="0" cellpadding="0" cellspacing="0">

    <tr>

        <td>

            Name:&nbsp;

        </td>

        <td>

            <input type="text" id="txtName" readonly="readonly" />

        </td>

        <td>

            <input type="button" value="Select Name" onclick="SelectName()" />

        </td>

    </tr>

</table>

<script type="text/javascript">

    var popup;

    function SelectName() {

        popup = window.open("Popup.htm", "Popup", "width=300,height=100");

        popup.focus();

        return false

    }

</script>

 

 

Code for Popup Child Window Page

On the HTML page of the Child Popup Window I will consists HTML the controls that will be a  DropDownList and a Button. The HTML DropDownList will be used to choose the name of the person. The Button has been assigned with an OnClick event handler. When the Button is clicked, the SetName  JavaScriptt gets called.

Inside the SetName  JavaScript function, the reference of the parent window txtName TextBox is obtained from window.opener instance using document.getElementById method of JavaScript.

Finally, the DropDownList selected value is set into the TextBox value property.

 <select name="ddlNames" id="ddlNames">

    <option value="Mudassar Khan">Mudassar Khan</option>

    <option value="John Hammond">John Hammond</option>

    <option value="Mike Stanley">Mike Stanley</option>

</select>

<br />

<br />

<input type="button" value="Select" onclick="SetName();" />

<script type="text/javascript">

    function SetName() {

        if (window.opener != null && !window.opener.closed) {

            var txtName = window.opener.document.getElementById("txtName");

            txtName.value = document.getElementById("ddlNames").value;

        }

        window.close();

    }

</script>

 

Conclusion: In above code, I explained the implementation about how to pass value from one child popup window to another parent page window using  JavaScript. This code is very helpful for every developer. Bye bye and take care of yourself Developers. We will come back shortly with the new article.

 

Regards

Programming HUB

 

Server Side Yes No Confirmation Box using JavaScript in Asp.Net

Introduction: Hello Guys, “Welcome back” Today, i am here with another one new great article. In this article I explained the implementation that how we can build a server side Yes/No confirmation box by using JavaScript in ASP.Net in C#. The JavaScript confirm function allows PostBack when OK will be clicked by the user but does nothing when Cancel will be clicked by the user and on too much conditions we need to do Server-Side operations on both OK and Cancel with click events in ASP.Net using C#.

 

Code for HTML Page

I will be use the following HTML controls to build a server side Yes/No confirmation box.

Button – For displaying the confirmation box.

The Button has been assigned with an OnClick and JavaScript OnClientClick event handlers.

<asp:Button ID="btnConfirm" runat="server" Text="Raise Confirm" OnClientClick="Confirm()" OnClick="OnConfirm" />

 

 

Displaying Confirmation Box using JavaScript

When the Button will be clicked by the user then Confirm JavaScript function will be called.

Inside the Confirm JavaScript function, a dynamic HTML INPUT HiddenField element is created using JavaScript. Then, JavaScript confirm function will be called and it will be response (Yes or No) is set into the Hidden Field.

Finally, the HiddenField element is added to the Form and the PostBack is occurred which triggers the OnClick event.

<script type="text/javascript">

    function Confirm() {

        var confirm_value = document.createElement("INPUT");

        confirm_value.type = "hidden";

        confirm_value.name = "confirm_value";

        if (confirm("Do you want to save data?")) {

            confirm_value.value = "Yes";

         }else {

            confirm_value.value = "No";

        }

        document.forms[0].appendChild(confirm_value);

    }

</script>

 

Displaying Message based on the User input in Server-Side

When the Raise Confirm button will be clicked by the user, then value of the HiddenField is fetched using Request.Form collection.

Finally, based on the HiddenFiled value an appropriate message is displayed in JavaScript Alert Message Box using RegisterStartupScript method.

Code for C# Page

protected void OnConfirm(object sender, EventArgs e)

{

    string confirmValue = Request.Form["confirm_value"];

    if (confirmValue  == "Yes")

    {

        ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('You clicked YES!')", true);

    }

    else

    {

        ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('You clicked NO!')", true);

    }

}

 

 

Conclusion: In above code, I have been explained implementation about implementation that how we can build a server side Yes/No confirmation box by using JavaScript in ASP.Net in C#. This code is very helpful for every developer. Bye bye and take care of yourself Developers. We will come back shortly with the new article.

 

Regards

Programming HUB

Running Total in GridView using jQuery in ASP.Net

Introduction: Hello Guys, “Welcome back” Today, I am here with another one new great article. In this article I explained how to calculate Row Total and Grand Total in GridView using jQuery in ASP.Net by using C#.

Code for HTML Page

On the HTML page I place the controls GridView with the ID named grid_view_things  to display data.In the gridview there will be two BoundField columns and two TemplateField columns. The TemplateField columns consist of an ItemTemplate.

One ItemTemplate consists of a TextBox and another ItemTemplate consists of a Label. There will be a label for displaying Grand Total.

<asp:GridView ID="grid_view_things" runat="server" AutoGenerateColumns="false">

    <Columns>

        <asp:BoundField DataField="Item" HeaderText="Item" />

        <asp:BoundField DataField="Price" HeaderText="Price" ItemStyle-CssClass="price" />

        <asp:TemplateField HeaderText="Quantity">

            <ItemTemplate>

                <asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox>

            </ItemTemplate>

        </asp:TemplateField>

        <asp:TemplateField HeaderText="Total">

            <ItemTemplate>

                <asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>

            </ItemTemplate>

        </asp:TemplateField>

    </Columns>

</asp:GridView>

<br />

Grand Total:

<asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>

Calculating Row Total and Grand Total using jQuery

On the  HTML page I will be inherited below mentioned jQuery file.

1. jquery.min.js

 

Inside the jQuery document ready event handler, all the quantity TextBoxes set with the value zero and assigned to an onchange and an onkeyup event handlers.

In the onchange and onkeyup event handlers of the Gridview, a check will be  performed if the value is not a number then, it is set to 0.

Then, it multiplies with the Price column value to get Row Total which is displayed in the Label control.

Next, a FOR EACH loop is executed over Total Label control and the Grand Total is calculated.

Finally, the Grand Total is set in Label control.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script type="text/javascript">

    $(function () {

        $("[id*= txtQuantity]").val("0");

        $("body").on("change keyup", "[id*= txtQuantity]", function () {

            //Check whether Quantity value is valid Float number.

            var  quantity = parseFloat($.trim($(this).val()));

            if (isNaN(quantity)) {

                quantity = 0;

            }

 

            //Update the Quantity TextBox.

            $(this).val(quantity);

 

            //Calculate and update Row Total.

            var row = $(this).closest("tr");

            $("[id*= lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val()));

 

            //Calculate and update Grand Total.

            var grandTotal = 0;

            $("[id*= lblTotal]").each(function () {

                grandTotal = grandTotal + parseFloat ($(this).html());

            });

            $("[id*= lblGrandTotal]").html(grandTotal.toString());

        });

    });

</script>

 

Namespaces

You need to import the following namespace.

C#

using System.Data;

 

Binding the GridView

Inside the Page_Load event handler, the Gridview is populated with dynamic DataTable.

 

C#

protected void Page_Load(object sender, EventArgs e)

{

    DataTable dt = new DataTable();

    dt.Columns.AddRange(new DataColumn[2] {

                        new DataColumn("Item"),

                        new DataColumn("Price") });

    dt.Rows.Add("Biscuits", 100);

    dt.Rows.Add("Cake", 450);

    dt.Rows.Add("Sweet Corn", 133.5);

    gvProducts.DataSource = dt;

    gvProducts.DataBind();

}

 

Conclusion: In above code, I have been explained about how to calculate Row Total and Grand Total in GridView using jQuery in ASP.Net by using C#. This code is very helpful for every developer. Bye and take care of you Developers. We will come back shortly with the new article.

Thanks and Regards

Programming Hub