2

Disclaimer: I've tried to look at other examples, but every one of them is using .php, my class is not. I'm trying to take the values from my MySQL server and insert them into my html code. I cannot use .php.

Here is an example of my script inside html:

<script>
        console.log("first script test");
        function processForm() {

        let sqlStmt = "";

        sqlStmt = "SELECT * FROM `Product-Service`";
        sqlCost = "Select cost FROM `Product-Service`";
        sqlName = "Select name FROM `Product-Service`";
        sqlDesc = "Select description FROM `Product-Service`";
        console.log("2nd script test");

        MySql.Execute(
            "host", 
            "user",
            "pw",
            "db",
            sqlDesc,
            function (data) {

              document.getElementById("output").innerHTML = data;
              //console.log("data parameter: " + data);

              var dataAsString = JSON.stringify(data);
              document.getElementById("output").innerHTML = dataAsString;

              //console.log("Single row as obj: " + data.Result[0]);
              console.log("Single row as string: " + JSON.stringify(data.Result[0]));
              //console.log("Single row, single column: " + data.Result[0].name);
              document.getElementById("basic").innerHTML = JSON.stringify(data.Result[0]);
              console.log(data.Result[0])

              document.getElementById("intermediate").innerHTML = JSON.stringify(data.Result[1]);

              document.getElementById("advanced").innerHTML = JSON.stringify(data.Result[2]);

            }
        );
    }

    </script>

And I'm trying to have 1 dropdown box with 3 options:

<div class="output" onload="processForm()">
        <h2><u>Products and Services</u></h2>
        <h4><select>
        <!-- <input type="button" value="test button" onclick="processForm()"> -->
        <p>Car Detailing options</p>
        <option onclick="" value="basic">Basic</option> 
        <option value="intermediate">Intermediate</option> 
        <option value="advanced">Advanced</option> 
            </select>
        <p>Description: </p>
        <p></p>
        <p></p>
        <p></p>
        </h4>
    </div>

Using the above script I can already get the items from the database to display on the page, but I'm having trouble getting them into the option box (I just hardcoded it) as well as populating the <p>Description: </p> with the description every time the dropdown box changes.

Appreciate any help.

4
  • Client Side JavaScript stays in the users Browser. Server side code stays on the Server. MySQL would be used on the Server... yet I see you have code inside <script> tags.
    – StackSlave
    Apr 22, 2019 at 22:49
  • Sorry, not sure what you meant by that. I can grab the data from the server, I am displaying it in the browser console and the page using the above code, I'm just having trouble getting the correct parts (description) in the right area (<p> tag).
    – Synik
    Apr 22, 2019 at 22:53
  • You have your password on the Client.
    – StackSlave
    Apr 22, 2019 at 22:59
  • 1
    This is for a class project and I'm just following the professors examples.
    – Synik
    Apr 22, 2019 at 23:06

2 Answers 2

0

For anyone looking how this is done inside the HTML file, and with no .php, I had somewhat of an epiphany and got it working using the below code:

window.onload = function getData() {
            sqlAll = "Select * FROM `Product-Service`";
            var a = document.getElementById("dropdown");
            var x = document.getElementById("Desc");
            var y = document.getElementById("Cost");
            var taxElem = document.getElementById("Tax");
            var procElem = document.getElementById("Processing");
            var totalElem = document.getElementById("Total");
            var pic = document.getElementById("picInsert");

            MySql.Execute(
                "host", 
                "user",
                "pw",
                "db",
                sqlAll,
                function (data) {

              console.log("Single row as string: " + JSON.stringify(data.Result[0]));
              document.getElementById("basicList").innerHTML = (data.Result[0].Name);
              document.getElementById("intermediateList").innerHTML = (data.Result[1].Name);
              document.getElementById("advancedList").innerHTML = (data.Result[2].Name);

This is taking all the values from the table, and inserting them by specific values, as seen here: (data.Result[2].Name)

The values from the database appear in a dropdown box:

<select id="dropdown">
        <option value="empty"></option>
        <option id="basicList" value="0"></option> 
        <option id="intermediateList" value="1"></option> 
        <option id="advancedList" value="2"></option>
            </select>

and finally, I use an if/else statement to display what I want:

a.addEventListener('change', function(){
                if (a.value == 0){
                    cost = 59.99;
                    tax = cost * .07;
                    processing = cost * .01;
                    total = cost * 1.08;
                    document.getElementById("Desc").innerHTML = (data.Result[0].Description);
                    document.getElementById("Cost").innerHTML = ("Price: " + data.Result[0].Cost);
                    //taxElem.innerHTML = "Tax: " + tax.toFixed(2);
                    //procElem.innerHTML = "Processing Fee: " + processing.toFixed(2);
                    totalElem.innerHTML = "Total Cost with tax(7%) and processing fee (1%): " + total.toFixed(2);
                    pic.innerHTML = "<img src=\"basic.jpg\">";

Doing exactly what I wanted. Answering this in case others stumble upon this in the future! Good luck!

-1

Dont miss using $( document ).ready(function() { }); and use .change() function with importing jQuery, for detecting your select box changes

$( document ).ready(function() {
            $( ".selecting" ).change(function() {
               ...your js code here...
            });
        });
        
//or without impoting jquery js code:
document.addEventListener("DOMContentLoaded", function(event) { 
  document.getElementById(".selecting").onchange = function(){
    ...your js code here...
 };
});
<div class="output" onload="processForm()">
        <h2><u>Products and Services</u></h2>
        <h4><select class="selecting">
        <!-- <input type="button" value="test button" onclick="processForm()"> -->
        <p>Car Detailing options</p>
        <option onclick="" value="basic">Basic</option> 
        <option value="intermediate">Intermediate</option> 
        <option value="advanced">Advanced</option> 
            </select>
        <p>Description: </p>
        <p></p>
        <p></p>
        <p></p>
        </h4>
    </div>

3
  • jQuery never mentioned, or used in the example.
    – StackSlave
    Apr 22, 2019 at 22:47
  • Is this jQuery? We are not using jQuery in any provided examples.
    – Synik
    Apr 22, 2019 at 22:55
  • You want to detect select box changes. You can do this in frontend, with using "js with jQuery" or "pure js without jquery". But, as @StackSlave said, database-related codes must be in the backend. Apr 22, 2019 at 23:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.