CODEWITHSUNDEEP
javascriptphphtmlmysqlajax
wuv1
wuv1

Reputation: 59

How to get information from Javascript to MySQL database using PHP?

(NEWBIE ALERT)

Hello! I am working on developing a database that stores information that people enter onto these online surveys. I don't have experience with Javascript, but I have worked with PHP and MySQL before. I am currently stuck on how to store the data to the database. Here are a few things about the code:

I've worked on a project similar to this before, but my forms were only a page, so whenever the user clicks the "Submit" button, I had it go to another webpage written in a separate PHP file (kind of like a "results" page).

WHAT I DON'T UNDERSTAND/NEED HELP ON:

  1. How do I make this so that when the user hits the "Next" button, it not only goes to the next page (what it's doing right now), but also sends the info to be stored in the database?
  2. These surveys should be filled by people on their own computers so the surveys are written in JS (client-side). The storing part should be written in PHP (server-side) and MySQL, correct? Does this mean that I have to create a separate PHP file to create the code for transferring the data to the database or can it all be done in the same file? (I would think that I would need to create a separate file, one for each survey.)

Here's a general structure of how the HTML file:

<!DOCTYPE html>
<html>
    <head><link rel="stylesheet" type="text/css" href="survey.css">

    <script>
      function Q2(){
            document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q3()'>Next</button>";
      function Q3(){
            document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q4()'>Next</button>";
      function Q4(){
            document.getElementById("Q").innerHTML = "does something...<button type='button' onclick='Q5()'>Next</button>";
        
      //keeps going until the last question
        
    </script>
    </head>
<body>

<h1>Meeting 1</h1>
    <p id="Q">Some text...<br><input type="text" name="tweet" style='height: 50px;width: 500px;'><br><br>
      <button type="button" onclick="Q2()">Next</button> 
    </p>
</body>
</html>

I've done a bit of research and looked at a few textbooks. I think AJAX may be something that I need to use? But I'm not too sure. If possible, could someone explain to me what I should be doing? I would like to not only be able to find a solution for this, but understand it as well.

Thank you in advance!!

Upvotes: 0

Views: 427

Answers (1)

Ben
Ben

Reputation: 9001

  1. For sending data to a PHP page using JavaScript, I'd recommend using the jQuery framework, where you can do it in as simple a code as this:

    function Q2(){
    var tweet = $("input[name='tweet']").val();
    $.post("your_receiving_page.php", { data : tweet }, function(response){ //POST to PHP page where $_POST["data"] is the tweet variable
            //deal with PHP output here
            console.log(response);
            if(response=="success"){
                //javascript code to go to next page etc.
            }
        }
}

  2. That way, you make a PHP file called "your_receiving_page.php" (or whatever) and handle the posted data like so:

        <?php
        $tweet = $_POST["data"];

        //do stuff with $tweet, e.g. put it in a database
        //...
        //then end the code with "success", which is what you're looking for in the JavaScript as a successful callback

        exit("success");

Upvotes: 1

Related Questions