CODEWITHSUNDEEP
javascripthtmldom-events
Atul Sagar
Atul Sagar

Reputation: 15

I have a table inside a modal with a button on it, on the click on of that button, it calls a function which saves the data to sessionStorage

<div class="modal fade" id="defaultModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body m-3">

                <table class="table table-striped table-bordered">
                    <tbody>
                        <tr>
                            <td>Type of Claim</td>
                            <td id="TypeofClaim" >Data</td>
                        </tr>
                        <tr>
                            <td>Investigation Type</td>
                            <td id="InvestigationType" >Data</td>
                        </tr>
                        <tr>
                            <td>Customer ID</td>
                            <td id="CustomerID" >Data</td>
                        </tr>
                        <tr>
                            <td>Name of LA</td>
                            <td id="NameofLA" >Data</td>
                        </tr>
                        <tr>
                            <td>Date of Birth of LA</td>
                            <td id="DateofBirthofLA" >Data</td>
                        </tr>
                        <tr>
                            <td>Age at Entry</td>
                            <td id="AgeatEntry" >Data</td>
                        </tr>
                        <tr>
                            <td>Date of Commencement</td>
                            <td id="DOC" >Data</td>
                        </tr>
                        <tr>
                            <td>Occupation of LA</td>
                            <td id="OccupationofLA" >Data</td>
                        </tr>
                    </tbody>
                </table>
                <a href="#">    
                <button id="StartInvestigationButton" type="button" onclick="startInvestigation()"  class="btn btn-primary float-right">Start Investigation</button></a>
            </div>
        </div>
    </div>
</div>
<!--end Modal -->

Here's the function:

function startInvestigation(){
    console.log("Investigation Started")
    var caseDetails = new Array();
    caseDetails[0] = document.getElementById("TypeofClaim").value;
    caseDetails[1] = document.getElementById("InvestigationType").value;
    caseDetails[2] = document.getElementById("CustomerID").value;
    caseDetails[3] = document.getElementById("NameofLA").value;
    caseDetails[4] = document.getElementById("DateofBirthofLA").value;
    caseDetails[5] = document.getElementById("AgeatEntry").value;
    caseDetails[6] = document.getElementById("DOC").value;
    caseDetails[7] = document.getElementById("OccupationofLA").value;
    console.log(caseDetails);
}

The console log:

[undefined, undefined, undefined, undefined, undefined, undefined, undefined, undefined]

Note:
I have done this with table, but now the table is inside a modal and I have no idea on how to do it.

Maybe its because the table is inside the modal, that the values of the td cannot be retrieved and is shown as undefined.

Upvotes: 0

Views: 104

Answers (2)

Mangesh
Mangesh

Reputation: 365

function startInvestigation(){
    console.log("Investigation Started")
    var caseDetails = new Array();
    caseDetails[0] = document.getElementById("TypeofClaim").innerText;
    caseDetails[1] = document.getElementById("InvestigationType").innerText;
    caseDetails[2] = document.getElementById("CustomerID").innerText;
    caseDetails[3] = document.getElementById("NameofLA").innerText;
    caseDetails[4] = document.getElementById("DateofBirthofLA").innerText;
    caseDetails[5] = document.getElementById("AgeatEntry").innerText;
    caseDetails[6] = document.getElementById("DOC").innerText;
    caseDetails[7] = document.getElementById("OccupationofLA").innerText;
    console.log(caseDetails);
}

Upvotes: 2

vanowm
vanowm

Reputation: 10221

TD don't have a value (most html element's don't)

What you area looking for is textContent

caseDetails[0] = document.getElementById("TypeofClaim").textContent;

Upvotes: 1

Related Questions