How can i input a javascript object's value into a sql database?

Question

I'm new to programming/web development, learning it in community college, so you'll probably have to explain your answers to me as if i'm an idiot. Anyway, my current assignment in a class i'm taking is to build upon a basic app that times a staff meeting and calculates the cost said meeting based on the participants' salary per second. What i've learned, at a basic level, how to take the client's input (through text boxes) and save them in a database to be called upon and displayed later, but i can't figure out how to do that with objects in javascript. My point in doing that is to save the cost of the meeting, as well as participants, so that the client can display it later.

Here is the javascript code:

window.onload = function() {
var startTimestamp = 0;   
var endTimestamp = 0;   

var startTimestampButton = document.getElementById('start-timestamp'); 
var startTimestampElement = document.getElementById('start-timestamp-value'); 

startTimestampButton.onclick = function() {
    startTimestamp = Date.now();
    startTimestampElement.innerHTML = startTimestamp;    
}

var endTimestampButton = document.getElementById('end-timestamp'); 
var endTimestampElement = document.getElementById('end-timestamp-value'); 

endTimestampButton.onclick = function() {
    endTimestamp = Date.now();
    endTimestampElement.innerHTML = endTimestamp;    
}

var selectElement = document.getElementById('selected-staff');
for (var username in data)
{
    var obj = data[username];
    var opt = document.createElement('option');
    opt.value = obj.SAL_SECOND;
    opt.innerHTML = obj.FIRST_NAME + " " + obj.LAST_NAME;
    selectElement.appendChild(opt);    
}

var pageHeading = document.getElementById('page-heading');
var totalSalaryPerSecondForSelectedStaff = 0;
selectElement.onchange = function() {
    totalSalaryPerSecondForSelectedStaff = 0;
    for(var i=0; i < selectElement.length; i++)
    {
        if (selectElement.options[i].selected)
        {
            totalSalaryPerSecondForSelectedStaff += Number(selectElement.options[i].value);
        }
    }

    //pageHeading.innerHTML = totalSalaryPerSecondForSelectedStaff;
};

window.setInterval(function() {
    if (totalSalaryPerSecondForSelectedStaff > 0 && startTimestamp > 0 && endTimestamp === 0)
    {
        var currentTimestamp = Date.now();
        **var meetingCost = totalSalaryPerSecondForSelectedStaff * ((currentTimestamp - startTimestamp) / 1000);**

        if (meetingCost < 10)
        {
            pageHeading.innerHTML = "&#9786; $" + totalSalaryPerSecondForSelectedStaff * ((currentTimestamp - startTimestamp) / 1000);    
        }
        else
        {
            pageHeading.innerHTML = "&#9785; $" + totalSalaryPerSecondForSelectedStaff * ((currentTimestamp - startTimestamp) / 1000);
        }

        console.log('Start Timestamp: ' + startTimestamp);
        console.log('Current Timestamp: ' + currentTimestamp);
        console.log('Total Salary Per Second for Selected: ' + totalSalaryPerSecondForSelectedStaff);
    }    

}, 1000);

I couldn't figure out how to get to "var meetingCost" in a separate php file, or how to just input it to the database in the same file.

Would really appreciate the help! This is kind of over my head right now!

Welcome to SO! You will need some bridge to the database, like for example an ajax call sending your data from your client to a `.php` file on your server. This can either be done via a library (e.g. [jQuery](http://www.jquery.com)) or you could try to integrate your code with [node.js](https://nodejs.org/en/) if you are learning JavaScript anyway. But to answer your question: a direct database access from your `.js` file is not possible. [This question here on SO](http://stackoverflow.com/questions/8412505/send-data-from-javascript-to-a-mysql-database) might be a good starting point. — Jan, Nov 13 '15 at 07:21

score 2 · Answer 1 · answered Nov 13 '15 at 07:23

Up to my knowledge it's better you to use ajax function and send the value into a php file and save it into mysql it's better and easy.

or otherwise i believe that your getting the 'meetingCost' value in a input filed so you can put this input filed inside a form and on form submit you will get value in your php page and then save it into mysql

Rajdeep Paul · Answer 2 · 2015-11-13T08:06:56.557

You can use ajax to send data to a separate php file. Here's an example,

var xmlhttp;
if(window.XMLHttpRequest){
    xmlhttp=new XMLHttpRequest();    // code for IE7+, Firefox, Chrome, Opera, Safari
}else{
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");   // code for IE6, IE5
}
xmlhttp.onreadystatechange=function(){
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
        // success
    }
}
xmlhttp.open("POST","process_form.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("meeting_cost="+meetingCost);

And in the process_form.php file, you can catch and process the data in the following way,

if(isset($_POST['meeting_cost']) && !empty($_POST['meeting_cost'])){
    // do your database operations here
}

How can i input a javascript object's value into a sql database?

2 Answers2