如何在主页中保存模式弹出窗口值

Question

I am trying to save the data which is entered in the modal popup to the main page. here is the code for the main page. Company Info

                <div id="AddMoreDetails">
                    <div class="table" runat="server" id="AddMore">
                        <div class="col-md-4">
                            <div class="row">
                                <div class="col-md-12">
                                    <table style="width:200%;">
                                        <tr>
                                            <td>Company Name</td>
                                            <td>Company Address</td>
                                            <td>Contact</td>
                                            <td>Company HO</td>
                                            <td>HO Contact</td>
                                            <td>Email ID</td>

                                        </tr>
                                        <tr>
                                            <td>
                                                <textarea id="TextArea1"></textarea>
                                            </td>
                                            <td>
                                                <textarea id="TextArea2"></textarea>
                                            </td>
                                            <td>
                                                <textarea id="TextArea3"></textarea>
                                            </td>
                                            <td>
                                                <textarea id="TextArea4"></textarea>
                                            </td>
                                            <td>
                                                <textarea id="TextArea5"></textarea>
                                            </td>
                                            <td>
                                                <textarea id="TextArea6"></textarea>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                    <div class="col-md-12" style="text-align: right">
                    <div class="row">
                        <div class="col-md-12">

Here is the code for Modal popup window

<div id="myModalPopup" class="modal fade" role="dialog" data-keyboard="false"> // modal popup window
                        <div class="modal-dialog">
                             <div class="modal-content">
                                <div class="modal-header" style="background-color: orangered; border-top-left-radius: 4px; border-top-right-radius: 4px;">
                                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title">Company Details</h4>
                                </div>
                                <div class="modal-body">
                                    <asp:Panel ID="Panel2" runat="server" class="tab-pane">
                                        <div class="col-sm-12">
                                            <div class="row">
                                                <div class="col-sm-4">
                                                    <asp:Label runat="server" ID="lblNmeComp" Text="Name of Company" AssociatedControlID="txtNmeComp" CssClass="control-label" />
                                                    <asp:TextBox runat="server" ID="txtNmeComp" CssClass="form-control" />
                                                    <br />
                                                </div>
                                                <div class="col-sm-4">
                                                    <asp:Label runat="server" ID="lblAdrComp" Text="Adress of Company" AssociatedControlID="txtAdrComp" CssClass="control-label" />
                                                    <asp:TextBox runat="server" ID="txtAdrComp" CssClass="form-control" />
                                                    <br />
                                                </div>
                                                <div class="col-sm-4">
                                                    <asp:Label runat="server" ID="lblConctComp" Text="Contact Number" AssociatedControlID="txtConctComp" CssClass="control-label" />
                                                    <asp:TextBox runat="server" ID="txtConctComp" CssClass="form-control" />
                                                    <br />
                                                </div>
                                            </div>
                                        </div>

Here is the button code for opening Modal popup window

                            <button id="AddMore_Button" class="btn btn-primary" data-target="myModalPopup">Add More</button>   </div>

Here is the button code for saving data from modal popup window.

<button type="button" runat="server" onclick="savepopupdata()">

To get the values from modal popup window I have written a javascript function.

<script type="text/javascript"> //Java script function
        function savepopupdata()
        {
            document.getElementById.valueOf(txtNmeComp) = document.getElementById.valueOf(TextArea1);
            document.getElementById.valueOf(txtAdrComp) = document.getElementById.valueOf(TextArea2);
            document.getElementById.valueOf(txtConctComp) = document.getElementById.valueOf(TextArea3);

        }
    </script>

But unfortunately it is not saving the data. Any wrong in this code.

Answer 1

We can get input elements values by it attributes only like ID, Class ... try with

document.getElementById("TextArea1").value;

...

Answer 2

if you want to find elements by ids and change their values, then try this code

function savepopupdata() { 
    document.getElementById('txtNmeComp').value = document.getElementById('TextArea1').value;
    document.getElementById('txtAdrComp').value = document.getElementById('TextArea2').value; 
    document.getElementById('txtConctComp').value = document.getElementById('TextArea3').value;
}