Skip to content Skip to sidebar Skip to footer

Html Form Output As A Table

I have developed the HTML form, which pretty much looks as below: Afterwards, I've prepared an external html file, where this form output is located. I've followed the tutorial be

Solution 1:

The proper HTML table structure is required at the very beginning.

      <table id="opresults" class="outputtable"><p class="outputtablehead">Survey Form - output</p>
    <tr class="colname">
       <th>Form question</th>
        <th colspan="2">Answer</th>
    </tr>

</table>

and next in our javascript code we should split the append attribute between the name and value separately, placing the table attributes between them

     <script>
        const resultsList = document.getElementById('opresults')
        const matches = document.querySelectorAll("fieldset");

        new URLSearchParams(window.location.search).forEach((value, name) => {
            resultsList.append(document.createElement('tbody'))
            resultsList.append(`${name}`)
            resultsList.append(document.createElement('td'))
            resultsList.append(`${value}`)
            resultsList.append(document.createElement('br'))   
        })
    </script>

enter image description here

A quite good solution was here:

document.createElement on table,tr,td tags fails IE8


Post a Comment for "Html Form Output As A Table"