How to Transfer Value from Bootstrap Popup Textbox to Parent page textbox in asp.net?

Question

Here, When I Click On "+" Button. then Jquery Popup Opens and Then in TextBox txtTotalCarat and txtTTotalAmount Gets Value from calculating from back end code. When I Click On Submit Button. Click Event is Firing and in Debug mode I can see That Value is Transferring to Main Page Textbox txtInvoiceCarats and txtInvoiceAmount. But The Problem here is After Finishing Click Event Popup Is not getting Close and Values not Showing In Main Page Textbox txtInvoiceCarats and txtInvoiceAmount. Please Help Me To Solve This Problem.

<script type = "text/javascript">
function ShowTotal() {
$.ajax({
    type: "POST",
    url: "Admin/AddSales.aspx/GetTotal",
    data: '{TCarats: "' + $("#<%=txtTotalCarats.ClientID%>")[0].value + '", TAmount: "' + $("#<%=txtTTotalAmount.ClientID%>")[1].value + '"}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: OnSuccess,
    failure: function(response) {
        alert(response.d);
        }
    });
}
function OnSuccess(response) {
    alert(response.d);
}
</script>
<asp:UpdatePanel ID="updSales" runat="server" UpdateMode="Conditional" 
ChildrenAsTriggers="true">
<ContentTemplate>
    <div class=" form-horizontal">
<hr />
    <table align="center" style="width:100%;">
    <tr>
       <td align="center" style="width:33.33%;">
       <div class="form-group">
           <div class="col-lg-12">
               <asp:TextBox ID="txtInvoiceCarats" CssClass="form-control" runat="server" style="width:80%; display:inline-block;" placeholder="Invoice Carats"></asp:TextBox>
               <asp:Button ID="btnAddCaratDetails" runat="server" Text="+" CssClass="btn btn-success" OnClick="btnAddCaratDetails_Click" />
           </div>
       </div>
       </td>
    <td align="center">
    <div class="form-group">
        <div class="col-lg-12">
        <asp:TextBox ID="txtInvoiceAmount" CssClass="form-control" runat="server" style = "width:90%;" placeholder="Invoice Amount"></asp:TextBox>
        </div>
    </div>
    </td>
</tr>
</table>
</div>
</ContentTemplate>
</asp:UpdatePanel>
**//Below Code for PopUp On The Same Page**
<asp:UpdatePanel ID="updSalesDetails" runat="server" 
UpdateMode="Conditional" ChildrenAsTriggers="True">
    <ContentTemplate>
    <div class="form-horizontal">
        <table align="center" style="width:100%;">
        <tr>
            <td align="center">
                <div id="editModal" class="modal fade" data-backdrop="" style="top:15%;left:0%;margin:-50px 0 0 -1000px; " tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content" style="width:1600px;">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h3 id="editModalLabel">Add Sales Details</h3>
                            </div>
                        <div class="modal-body">
                        <asp:UpdatePanel runat="server">
                            <ContentTemplate>
                            <table style="width:100%;">
                                <tr>
                                    <td style = "width:2%;" align="center">
                                    <div class="form-group">
                                        <div class="col-lg-12">
                                            <asp:TextBox ID="txtTotalCarats" CssClass="form-control" runat="server" Font-Bold="true" style = "width:95%; background-color:lightgreen;" Enabled="false" placeholder="Total Carats"></asp:TextBox>
                                        </div>
                                     </div>
                                     </td>
                                     <td>
                                     <div>
                                         <div class="col-lg-12">
                                             <asp:TextBox ID="txtTTotalAmount" CssClass="form-control" runat="server" Font-Bold="true" style = "width:90%; background-color:lightgreen;" Enabled="false" placeholder="Grand Amount"></asp:TextBox>
                                         </div>
                                     </div>
                                     </td>
                                </tr>
                                </table>
                             <div class="modal-footer">
                                <asp:Button ID="btnSubmit" runat="server" Text="Submit" CssClass="btn btn-success" UseSubmitBehavior="false" data-dismiss="modal" OnClientClick="ShowTotal()" />
                                <asp:Button ID="btnReset" runat="server" Text="Reset" CssClass="btn btn-warning" OnClick="btnReset_Click" />
                                <button class="btn btn-danger" data-dismiss="modal" aria-hidden="true">Close</button>
                            </div>
                            </ContentTemplate>
                            <Triggers>
                                <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="Click" />
                                <asp:AsyncPostBackTrigger ControlID="btnReset" EventName="Click" /> 
                            </Triggers>
                            </asp:UpdatePanel>
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>
</ContentTemplate>
</asp:UpdatePanel>

Code Behind

[System.Web.Services.WebMethod]
public void GetTotal(string TCarats,string TAmount)
{
   txtInvoiceCarats.Text = TCarats.ToString();
   txtInvoiceAmount.Text = TAmount.ToString();
}

could please add the code for `DoCustomPost()` and its relevant `c#` code as well. — vikscool, Feb 18 '19 at 05:41
if the closing of the `bootstrap-modal` is the main concern you can add `UseSubmitBehavior=false` attribute along with a data attribute `data-dismiss="modal"` to the 'Submit' button to make it work and more is explained in this [thread](https://stackoverflow.com/a/18771387/2417602). — vikscool, Feb 18 '19 at 05:51
What about Transferring Values From Popup Modal to Main Page TextBox? — Pinakin, Feb 18 '19 at 05:59
On your `btnReset` button add this code on `onClientClick="return false;"` as your button is hitting a `postback` event which is causing the page to reload and hence closing the `popup`. So, when you add `return false` it will stop the execution of any further code. As the hierarchy of calling goes from `onClientClick()` -- > `OnClick()`. — vikscool, Feb 18 '19 at 06:09
Reset Problem is Resolved, I have Took Div Footer Part in inner Update Panel. Now it is working Fine. Now I just Need to Transfer Value from PopUp Modal Textbox to Main Page TextBox. I have tried with C# code . protected void btnSubmit_Click(object sender, EventArgs e) { txtInvoiceCarats.Text = txtTotalCarats.Text; txtInvoiceAmount.Text = txtTTotalAmount.Text;} But This Click Event Fires but it is not transfering value in main page. main page textbox remains empty. — Pinakin, Feb 18 '19 at 06:13
For your data transfer try to use something like a [`WebMethods`](https://learn.microsoft.com/en-us/aspnet/web-forms/overview/older-versions-getting-started/aspnet-ajax/understanding-asp-net-ajax-web-services) which can be accessed via an `ajax` call and on their `success/error` of that method you can decide either to pass the values to the main page or not. And calling of `WebMethods`can be found [here](https://www.aspsnippets.com/Articles/Calling-ASPNet-WebMethod-using-jQuery-AJAX.aspx). — vikscool, Feb 18 '19 at 06:16
Could you please update the question with your web method and JS code — vikscool, Feb 18 '19 at 07:39
just do your calculation in the `WebMethod` and return the result(*if needed*) form it. Then on the Success of the `ajax` call you can set the values to what you want as: `$("#<%=txtInvoiceCarats.ClientID %>").val($("#<%=txtTotalCarats.ClientID%>").val());` and so-on for other properties to be mapped. — vikscool, Feb 18 '19 at 09:16
And your `WebMethod` have to be **Static** so change the signature of the method to `public static void GetTotal(string TCarats,string TAmount)`. — vikscool, Feb 18 '19 at 09:23

How to Transfer Value from Bootstrap Popup Textbox to Parent page textbox in asp.net?

0 Answers0