javascript and MySQL tables

Question

OK..I'm designing a web application for my department where the lecturer can enter the results for the course he/she is taking. I've successfully created the interface using java-script table; after doing that I want content of the table to be posted to a database which I designed using MySQL

Any ideas on how to do that!!

Here is the javascript code snippet

<script type="text/JavaScript">

function addRowToTable()
{
var tbl = document.getElementById('tblResultSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1

var iteration = lastRow;
var row = tbl.insertRow(lastRow);

// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);

// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'Student_ID' + iteration;
el.id = 'Student_ID' + iteration;

el.size = 30;

el.onkeypress= keyPressTest;
cellRight.appendChild(el);  

//CA cell
var caCell = row.insertCell(2);
var el1 = document.createElement('input');
el1.type = 'text';
el1.name = 'caScore' + iteration;
el1.id = 'caScore' + iteration;
el1.size = 5;
el1.onchange= fncSum;

el1.onkeypress= keyPressTest;
caCell.appendChild(el1);


//Exam cell
var examCell = row.insertCell(3);
var el2 = document.createElement('input');
el2.type = 'text';
el2.name = 'examScore' + iteration;
el2.id = 'examScore' + iteration;
el2.size = 7;
el2.onchange= fncSum;
el2.onkeypress= keyPressTest;
examCell.appendChild(el2);

//total cell
var totalCell = row.insertCell(4);
var el3 = document.createElement('input');
el3.type = 'text';
el3.name = 'totalScore' + iteration;
el3.id = 'totalScore' + iteration;

el3.size = 7;

el3.onkeypress= keyPressTest;
totalCell.appendChild(el3);

//grade cell
var gradeCell = row.insertCell(5);
var el5 = document.createElement('input');
el5.type = 'text';
el5.name = 'gradeScore' + iteration;
el5.id = 'gradeScore' + iteration;
//  el5.onchange=changeValue;
el5.size = 7;
el5.onkeypress= keyPressTest;
gradeCell.appendChild(el5);



//gpp cell
var gppCell = row.insertCell(6);
var el4 = document.createElement('input');
el4.type = 'text';
el4.name = 'gppScore' + iteration;
el4.id = 'gppScore' + iteration;
el4.size = 7;

el4.onkeypress= keyPressTest;
gppCell.appendChild(el4);

}

function keyPressTest(e, obj)
{
var validateChkb=document.getElementById('chkValidateOnKeyPress');
if(validateChkb.checked){
    var displayObj=document.getElementById('spanOutput');
    var key;
    if(window.event){
        key=window.event.keyCode;
    }
    else if(e.which) {
        key=e.which;
    }
    var objId;
    if(obj != null){
        objId=obj.id;
    }else{
        objId=this.id;
    }
    displayObj.innerHTML= objId+ ' : ' + String.fromCharCode(key);
}
 }

 function removeRowFromTable()
 {
 var tbl = document.getElementById('tblResultSample');
 var lastRow = tbl.rows.length;
 if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}


//takes the values of C.a and Exam to calculate total score
 function fncSum()
{

 var tbl = document.getElementById('tblResultSample');
 var lastRow = tbl.rows.length;
 // if there's no header row in the table, then iteration = lastRow + 1
 var i = lastRow;

    for(i=1; i<=lastRow; i++) {
     if(isNaN(document.getElementById('caScore'+i).value))
     {
        alert('(CA Score)Please input Number only.');
        document.getElementById('caScore'+i).focus();
        return;
     }

     if(isNaN(document.getElementById('examScore'+i).value))
     {
        alert('(Exam Score required Please input Number only.');
        document.getElementById('examScore'+i).focus();
        return;
     }

   document.getElementById('totalScore'+i).value=   parseFloat(document.getElementById('caScore'+i).value) + parseFloat(document.getElementById('examScore'+i).value);

var crsUnit= parseFloat(document.getElementById('cUnit').value);


if(document.getElementById('totalScore'+i).value >=70)
{ 
document.getElementById('gradeScore'+i).value= 'A';
document.getElementById('gppScore'+i).value= 5* crsUnit;
}

if(document.getElementById('totalScore'+i).value >=65 &&   document.getElementById('totalScore'+i).value <70)
 { 
 document.getElementById('gradeScore'+i).value= 'B+';
 document.getElementById('gppScore'+i).value= 4.5* crsUnit;
 }

if(document.getElementById('totalScore'+i).value >=60 &&  document.getElementById('totalScore'+i).value <65)
 { 
 document.getElementById('gradeScore'+i).value= 'B';
 document.getElementById('gppScore'+i).value= 4* crsUnit;
}

 if(document.getElementById('totalScore'+i).value >=55 && document.getElementById('totalScore'+i).value <60)
{ 
 document.getElementById('gradeScore'+i).value= 'C+';
document.getElementById('gppScore'+i).value= 3.5* crsUnit;
}

 if(document.getElementById('totalScore'+i).value >=50 && document.getElementById('totalScore'+i).value <55)
{ 
document.getElementById('gradeScore'+i).value= 'C';
document.getElementById('gppScore'+i).value= 3* crsUnit;
}

if(document.getElementById('totalScore'+i).value >=45 &&   document.getElementById('totalScore'+i).value <50)
{ 
document.getElementById('gradeScore'+i).value= 'D';
document.getElementById('gppScore'+i).value= 2* crsUnit;
}

if(document.getElementById('totalScore'+i).value >=40 && document.getElementById('totalScore'+i).value <45)
{ 
document.getElementById('gradeScore'+i).value= 'E';
document.getElementById('gppScore'+i).value= 1* crsUnit;
}

else if(document.getElementById('totalScore'+i).value <40)
{ 
document.getElementById('gradeScore'+i).value= 'F';
document.getElementById('gppScore'+i).value= 0* crsUnit;
}   

    }
}



function validateRow()
{
var chkb=document.getElementById('chkValidate');
if (chkb.checked){
    var tbl=document.getElementById('tblResultSample');
    var lastRow=tbl.rows.length - 1; //returns the number of rows in the table
    var i;

    for(i=1; i<=lastRow; i++) {
        var aRow= document.getElementById('Student_ID'+i);

        if(aRow.value.length <= 0) {
            alert('Student ID '+i+' is empty');
            aRow.focus();
            return;
        }

        var caCell=parseInt(document.getElementById('caScore'+i).value);

            if(isNaN(caCell))
            {
                alert('CA for Student ID '+i+' is not valid');
                document.getElementById('caScore'+i).focus();
                return;
            }

                else if(caCell>30)
                {
                    alert('CA for Student ID '+i+' is above  30'); 
document.getElementById('caScore'+i).focus();
                    return;
                    }

var examCell=parseInt(document.getElementById('examScore'+i).value);
if(isNaN(examCell))
{
alert('Exam Score for Student ID '+i+' is not valid');
return;
}

else if(examCell>70)
{
alert('Exam for Student ID '+i+' is above 70'); 
return;
}


}

}       

else {
alert('Please ensure you check the validate Entry before submitting the result');
}
}


</script>

After entering the results for his/her students; then post the contents of the dynamic table to a MySQL table.. Here is how the resulting table should be...

idNumber    Marks   Grade   Gpp     
06/05/02/001    39  F   0   
    06/05/02/001    46  D   4   
    06/05/02/001    56  C+  7   
    06/05/02/001    78  A   5   

Answer 1

There are a few steps you need to follow-

• After building your table, write a method in javascript which takes this table element and returns a JSON object which will be posted back to your server. Simple JS code will be onvolved here.

• You will receive the data you posted in your PHP script. Use this Sample PHP code for DB interaction. fot storing your data into mySql table.

Answer 2

"I've successfully created the interface using java-script table;" No, your table is an HTML table generated by Javascript. Not the same at all.

You can post your data using AJAX or forms. Read this and this for more information.