Member Avatar for utchia

im trying to get the user to enter information into a textbox and then after clicking submit button the page has a table containing with that information in the rows.
so for example the table has the heading Artist, Songs, Year made, Gene
and the user has to enter data for each feild inside a text box and it store it in here.
this is what i have so far

<!DOCTYPE HTML>

<HTML>
<H2>JavaScript Sort Table</H2>
<head>
<script>

    function sortTable(col, myTable){
var cell = col + myTable.cols;
var totalRows = myTable.rows.length;
var tSort = 0;
var columns = new Array();
var index = new Array();
var indexArray = new Array();
var array = new Array();
var newRow;
var newCell;
var i,j,k;
for (i=1; i < myTable.rows.length; i++) {
columns[i - 1] = myTable.cells(cell).innerText;
cell = cell + myTable.cols;
}
for (i=0; i < columns.length; i++){
array[i] = columns[i];
}
columns.sort();
for (i=0; i < columns.length; i++){
indexArray[i] = (i+1);
for(j=0; j < array.length; j++){ 
if (columns[i] == array[j]){ 
for (k=0; k<i; k++){
if ( index[k] == (j+1) ){
tSort = 1;
}
}
if (tSort == 0){
index[i] = (j+1);
}
tSort = 0;
}
}
}
for (i=0; i<index.length; i++) {
newRow = myTable.insertRow();
for (k=0; k<myTable.cols; k++) {
newCell = newRow.insertCell();
newCell.innerHTML = myTable.rows(index[i]).cells(k).innerHTML;
}
}
for (i=1; i<totalRows; i++){
myTable.moveRow((myTable.rows.length -1),1);
}
for (i=1; i<totalRows; i++){
myTable.deleteRow();
}
}


</script>
</head>
<body>

<TABLE WIDTH="55%" BORDER="1" name="table" id="table" cols="4">
<TR><TD><A href="javascript:sortTable(0, table);"><FONT color="red"><B>Artist</FONT></B></A></TD>
<TD><A href="javascript:sortTable(1, table);"><FONT color="red"><B>Songs</FONT></B></A></TD>
<TD><A href="javascript:sortTable(2, table);"><FONT color="red"><B>Year</FONT></B></A></TD>
<TD><A href="javascript:sortTable(3, table);"><FONT color="red"><B>Gene</FONT></B></A>
</TD></TR></FONT>
<TR><TD>Jlo</TD><TD>what goes around</TD><TD>2000</TD><TD>hip hop</TD></TR>
<TR><TD>50 cent</TD><TD>stright to the bank</TD><TD>2003</TD><TD>rap</TD></TR>
<TR><TD>Katy perry</TD><TD>i kissed a girl</TD><TD>2010</TD><TD>pop</TD></TR>
<TR><TD>jay-Z</TD><TD>99 problems</TD><TD>1999</TD><TD>Rap</TD></TR>
</TABLE>
</body>
</HTML>
  • 3 Contributors
  • 2 Replies
  • 296 Views
  • 18 Hours Discussion Span
  • Latest Post Latest Post by AARTI SHRIVAS

Dani AI

Generated

The thread already contains a column-sorting routine from but no form or submit handler; and asked for that missing piece. A compact, robust solution is: add a small HTML form for Artist / Song / Year / Genre, attach a JavaScript submit handler that prevents default navigation, validate/trim inputs, create a new <tr> with <td> children using textContent (to avoid XSS), append that row into the table’s <tbody> (create one if missing), then clear the form. Persisting rows to localStorage is a simple way to survive reloads on the same device; a server-side endpoint is required for cross-device persistence.

Example of the minimal client-side flow (hook this to a form and the existing table):

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('songForm');        // a small form with inputs named artist,song,year,genre
  const table = document.getElementById('table');         // or update to a different id if preferred
  let tbody = table.tBodies[0] || table.appendChild(document.createElement('tbody'));

  function addRow(data) {
    const tr = document.createElement('tr');
    [data.artist, data.song, data.year, data.genre].forEach(text => {
      const td = document.createElement('td');
      td.textContent = text;
      tr.appendChild(td);
    });
    tbody.appendChild(tr);
  }

  form.addEventListener('submit', e => {
    e.preventDefault();
    const data = {
      artist: form.artist.value.trim(),
      song:  form.song.value.trim(),
      year:  form.year.value.trim(),
      genre: form.genre.value.trim()
    };
    if (!data.artist || !data.song) return; // minimal validation
    addRow(data);
    const saved = JSON.parse(localStorage.getItem('musicRows') || '[]');
    saved.push(data);
    localStorage.setItem('musicRows', JSON.stringify(saved));
    form.reset();
  });

  // load persisted rows
  JSON.parse(localStorage.getItem('musicRows') || '[]').forEach(addRow);
});

Notes and troubleshooting:

  • Use textContent (not innerHTML) to avoid injection.
  • If the posted sortTable expects the header/rows in a particular place, ensure it reads from the <tbody> (or call it after appending a row) so newly added rows are included. Numeric sorting (Year) usually needs parseInt or a numeric data attribute; otherwise sorting will be lexicographic.
  • Prefer addEventListener over inline href="javascript:…".
  • For cross-device persistence, submit the same data via AJAX to a server and retrieve it on load.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

So, the code you provided thus far shows a table and a "header" type row that executes a function that is to supposed to sort the column.

Can you elaborate more on what you are trying to do with regard to the text box and the submit button? They werent included in this code. Are you trying to pass data between pages, same page, etc.?

Member Avatar for AARTI SHRIVAS

where is the code for submiting data can you post that code also

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.