Fetching user input from input field into js table that creates table cells via for loop

I've been attempting to fetch user input value from input fields to later on set it into a summary table that creates cells using javascript but can't seem to get it to work.

Following is my code:

function summonTable(f) {

    var sLoc = f.countryf.value();

    var eLoc = f.countryt.value();

    var sDate = f.sdate.value();

    var eDate = f.edate.value();



    var div = document.getElementById("summary");



    var magicTable = document.getElementById('summaryTable').querySelectorAll('tbody tr'),

        var row = document.createElement('tr');

        var th = document.createElement('th');

        th.textContent = sDate;

        var td = document.createElement('td');

        td.textContent = sLoc;





            //To state which row and column this cell goes to.

            row.appendChild(th);

            div.appendChild(magicTable);

        });

The function summonTable will take in the arguement form f that contains the input fields, I've tried basic textboxes, checkboxes, radios, but all to no avail. The variables sLoc, eLoc are basically texts for countries and sDate, eDate are supposed to be dates.

asked Nov 23 '18 at 16:31

MrRotiJohn

you forgot to append row to the table element--magicTable.appendChild(row);

– Monica Acha
Nov 23 '18 at 16:35

add a comment |

I've been attempting to fetch user input value from input fields to later on set it into a summary table that creates cells using javascript but can't seem to get it to work.

Following is my code:

function summonTable(f) {

    var sLoc = f.countryf.value();

    var eLoc = f.countryt.value();

    var sDate = f.sdate.value();

    var eDate = f.edate.value();



    var div = document.getElementById("summary");



    var magicTable = document.getElementById('summaryTable').querySelectorAll('tbody tr'),

        var row = document.createElement('tr');

        var th = document.createElement('th');

        th.textContent = sDate;

        var td = document.createElement('td');

        td.textContent = sLoc;





            //To state which row and column this cell goes to.

            row.appendChild(th);

            div.appendChild(magicTable);

        });

asked Nov 23 '18 at 16:31

MrRotiJohn

you forgot to append row to the table element--magicTable.appendChild(row);

– Monica Acha
Nov 23 '18 at 16:35

add a comment |

I've been attempting to fetch user input value from input fields to later on set it into a summary table that creates cells using javascript but can't seem to get it to work.

Following is my code:

function summonTable(f) {

    var sLoc = f.countryf.value();

    var eLoc = f.countryt.value();

    var sDate = f.sdate.value();

    var eDate = f.edate.value();



    var div = document.getElementById("summary");



    var magicTable = document.getElementById('summaryTable').querySelectorAll('tbody tr'),

        var row = document.createElement('tr');

        var th = document.createElement('th');

        th.textContent = sDate;

        var td = document.createElement('td');

        td.textContent = sLoc;





            //To state which row and column this cell goes to.

            row.appendChild(th);

            div.appendChild(magicTable);

        });

asked Nov 23 '18 at 16:31

MrRotiJohn

I've been attempting to fetch user input value from input fields to later on set it into a summary table that creates cells using javascript but can't seem to get it to work.

Following is my code:

function summonTable(f) {

    var sLoc = f.countryf.value();

    var eLoc = f.countryt.value();

    var sDate = f.sdate.value();

    var eDate = f.edate.value();



    var div = document.getElementById("summary");



    var magicTable = document.getElementById('summaryTable').querySelectorAll('tbody tr'),

        var row = document.createElement('tr');

        var th = document.createElement('th');

        th.textContent = sDate;

        var td = document.createElement('td');

        td.textContent = sLoc;





            //To state which row and column this cell goes to.

            row.appendChild(th);

            div.appendChild(magicTable);

        });

javascript html

asked Nov 23 '18 at 16:31

MrRotiJohn

asked Nov 23 '18 at 16:31

MrRotiJohn

asked Nov 23 '18 at 16:31

MrRotiJohn

asked Nov 23 '18 at 16:31

MrRotiJohn

asked Nov 23 '18 at 16:31

MrRotiJohn

you forgot to append row to the table element--magicTable.appendChild(row);

– Monica Acha
Nov 23 '18 at 16:35

add a comment |

you forgot to append row to the table element--magicTable.appendChild(row);

– Monica Acha
Nov 23 '18 at 16:35

you forgot to append row to the table element--magicTable.appendChild(row);

– Monica Acha
Nov 23 '18 at 16:35

add a comment |

1 Answer
1

active

oldest

votes

function summonTable(f) {

    var sLoc = f.countryf.value();

    var eLoc = f.countryt.value();

    var sDate = f.sdate.value();

    var eDate = f.edate.value();



    var div = document.getElementById("summary");

// to get the last row of the table

    var magicTable = document.getElementById('summaryTable').querySelectorAll('tbody tr:last-child'),

        var row = document.createElement('tr');

        var th = document.createElement('th');

        th.textContent = sDate;

        var td = document.createElement('td');

        td.textContent = sLoc;





            //To state which row and column this cell goes to.

            row.appendChild(th);

            magicTable.after(row); //To add the row after the last row

            div.appendChild(magicTable);

        });

answered Nov 23 '18 at 17:27

Monica Acha

333110

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53450176%2ffetching-user-input-from-input-field-into-js-table-that-creates-table-cells-via%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

function summonTable(f) {

    var sLoc = f.countryf.value();

    var eLoc = f.countryt.value();

    var sDate = f.sdate.value();

    var eDate = f.edate.value();



    var div = document.getElementById("summary");

// to get the last row of the table

    var magicTable = document.getElementById('summaryTable').querySelectorAll('tbody tr:last-child'),

        var row = document.createElement('tr');

        var th = document.createElement('th');

        th.textContent = sDate;

        var td = document.createElement('td');

        td.textContent = sLoc;





            //To state which row and column this cell goes to.

            row.appendChild(th);

            magicTable.after(row); //To add the row after the last row

            div.appendChild(magicTable);

        });

answered Nov 23 '18 at 17:27

Monica Acha

333110

add a comment |

function summonTable(f) {

    var sLoc = f.countryf.value();

    var eLoc = f.countryt.value();

    var sDate = f.sdate.value();

    var eDate = f.edate.value();



    var div = document.getElementById("summary");

// to get the last row of the table

    var magicTable = document.getElementById('summaryTable').querySelectorAll('tbody tr:last-child'),

        var row = document.createElement('tr');

        var th = document.createElement('th');

        th.textContent = sDate;

        var td = document.createElement('td');

        td.textContent = sLoc;





            //To state which row and column this cell goes to.

            row.appendChild(th);

            magicTable.after(row); //To add the row after the last row

            div.appendChild(magicTable);

        });

answered Nov 23 '18 at 17:27

Monica Acha

333110

add a comment |

function summonTable(f) {

    var sLoc = f.countryf.value();

    var eLoc = f.countryt.value();

    var sDate = f.sdate.value();

    var eDate = f.edate.value();



    var div = document.getElementById("summary");

// to get the last row of the table

    var magicTable = document.getElementById('summaryTable').querySelectorAll('tbody tr:last-child'),

        var row = document.createElement('tr');

        var th = document.createElement('th');

        th.textContent = sDate;

        var td = document.createElement('td');

        td.textContent = sLoc;





            //To state which row and column this cell goes to.

            row.appendChild(th);

            magicTable.after(row); //To add the row after the last row

            div.appendChild(magicTable);

        });

answered Nov 23 '18 at 17:27

Monica Acha

333110

function summonTable(f) {

    var sLoc = f.countryf.value();

    var eLoc = f.countryt.value();

    var sDate = f.sdate.value();

    var eDate = f.edate.value();



    var div = document.getElementById("summary");

// to get the last row of the table

    var magicTable = document.getElementById('summaryTable').querySelectorAll('tbody tr:last-child'),

        var row = document.createElement('tr');

        var th = document.createElement('th');

        th.textContent = sDate;

        var td = document.createElement('td');

        td.textContent = sLoc;





            //To state which row and column this cell goes to.

            row.appendChild(th);

            magicTable.after(row); //To add the row after the last row

            div.appendChild(magicTable);

        });

answered Nov 23 '18 at 17:27

Monica Acha

333110

answered Nov 23 '18 at 17:27

Monica Acha

333110

answered Nov 23 '18 at 17:27

Monica Acha

333110

answered Nov 23 '18 at 17:27

Monica Acha

333110

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg