Nov 20, 2022

# Solution 1 :

Loop through the `divs` variable & alert html using:

``````\$(this).parent().parent().html() // input < td < tr.html()
``````
``````let buttonsdiv;

function maintest() {
constructTable();
getDOMButtons();
}

function constructTable() {
table = \$('<table>');
let row;
let cell1;
let cell2;

table.attr({
"id": "testTable"
});

row = \$('<tr>');
table.append(row);

for (i = 0; i < 3; i++) {
row = \$('<tr>');
table.append(row);

cell1 = \$('<td>').html("cell" +i);
row.append(cell1);

cell2 = \$('<td>');
row.append(cell2);

input = \$('<input>').attr({
"type": "date",
"id": "input" + i
});
cell2.append(input);
}

\$("#mainDiv").append(table);
}

function getDOMButtons() {

buttonsdiv = \$("<div></div>").attr({
"id": "buttonsdiv"
});
\$("<button>Save</button>").attr({
"value": "Save",
"id": "saveButton"
})
.appendTo(buttonsdiv).click(function() {
parseDOM();
});

\$("#mainDiv").append(buttonsdiv);
}

function parseDOM() {
let divs = \$('input[type="date"]').filter((i,el) => el.value != "");;
divs.each(function (){
});
})
}``````
``````table {
display: unset !important;
border-collapse: collapse;
}

td,
th {
border: 1px solid black;
}``````
``````<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mainDiv"></div>
</body>``````

# Solution 2 :

If you just want to get the values of all filled date fields then this may work for you. otherwise provide some more clarification

``````let buttonsdiv;

function maintest() {
constructTable();
getDOMButtons();
}

function constructTable() {
table = \$('<table>');
let row;
let cell1;
let cell2;

table.attr({
"id": "testTable"
});

row = \$('<tr>');
table.append(row);

for (i = 0; i < 3; i++) {
row = \$('<tr>');
table.append(row);

cell1 = \$('<td>').html("cell" +i);
row.append(cell1);

cell2 = \$('<td>');
row.append(cell2);

input = \$('<input>').attr({
"type": "date",
"id": "input" + i
});
cell2.append(input);
}

\$("#mainDiv").append(table);
}

function getDOMButtons() {

buttonsdiv = \$("<div></div>").attr({
"id": "buttonsdiv"
});
\$("<button>Save</button>").attr({
"value": "Save",
"id": "saveButton"
})
.appendTo(buttonsdiv).click(function() {
parseDOM();
});

\$("#mainDiv").append(buttonsdiv);
}

function parseDOM() {
//let divs = \$('input[type="date"]').filter((i,el) => el.value != "");;
\$('input[type="date"]').filter((i,el) => el.value != "").each(function(){
});
})
}``````
``````table {
display: unset !important;
border-collapse: collapse;
}

td,
th {
border: 1px solid black;
}``````
``````<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mainDiv"></div>
</body>``````

# Problem :

I want to access all the input tags that have `type="date"` and value of date set.

My requirement is I want to select all the input elements that have a value of date set, Input element within and , I want to access the whole that has date value set. When I click on “save” button

In the code, I just managed to display a number of input elements that have date value set. Instead, when input elements of row1 and row3 have been set value of date, I want to retrieve the whole of row1 and row3

How do I achieve this using jQuery?

``````let buttonsdiv;

function maintest() {
constructTable();
getDOMButtons();
}

function constructTable() {
table = \$('<table>');
let row;
let cell1;
let cell2;

table.attr({
"id": "testTable"
});

row = \$('<tr>');
table.append(row);

for (i = 0; i < 3; i++) {
row = \$('<tr>');
table.append(row);

cell1 = \$('<td>').html("cell" +i);
row.append(cell1);

cell2 = \$('<td>');
row.append(cell2);

input = \$('<input>').attr({
"type": "date",
"id": "input" + i
});
cell2.append(input);
}

\$("#mainDiv").append(table);
}

function getDOMButtons() {

buttonsdiv = \$("<div></div>").attr({
"id": "buttonsdiv"
});
\$("<button>Save</button>").attr({
"value": "Save",
"id": "saveButton"
})
.appendTo(buttonsdiv).click(function() {
parseDOM();
});

\$("#mainDiv").append(buttonsdiv);
}

function parseDOM() {
let divs = \$('input[type="date"]').filter((i,el) => el.value != "");;
})
}``````
``````table {
display: unset !important;
border-collapse: collapse;
}

td,
th {
border: 1px solid black;
}``````
``````<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mainDiv"></div>
</body>``````

### Comment posted by karansys

It would be fine If I alert html of whole row which date value set

### Comment posted by karansys

Hi I want to retrieve the whole row, for ex: If I choose date for row1 then when I click on save button . I want to the display the html of whole row ( cell0 and returndatevalue)

### Comment posted by Harsimranjit Singh

\$(‘input[type=”date”]’).filter((i,el) => el.value != “”).each(function(){ alert(\$(this).parent(‘td’).html()); // this will give you whole input tag });

### Comment posted by karansys

Thanks I can retrieve the

but I want whole

, which is parent of td

### Comment posted by karansys

Hi Harsimranjit Singh \$(this).parents(“tr”).html(); this works , thnaks