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

This is a rare case where an answer can't help you. Basically you need to start reading about how the web works in general as you are woefully lacking in understanding. — King Friday
– King Friday, Commented Apr 12, 2013 at 0:21

Lajos Arpad · Accepted Answer · 2013-04-12 00:19:40Z

1

"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.

answered Apr 12, 2013 at 0:19

Lajos Arpad

80.5k42 gold badges124 silver badges235 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:29:27Z

0

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.

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Apr 12, 2013 at 0:45

Sachin Jain

21.9k34 gold badges113 silver badges177 bronze badges

Collectives™ on Stack Overflow

javascript and MySQL tables

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related