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

Question

(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:

The person that created the online surveys had the online surveys written in Javascript (saved as HTML files)
Each survey is written in a separate file
Each survey has multiple data to be stored
Every time the user hits the next button, it goes to another page of the survey

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:

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?
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!!

Looks like you have a really good start here! You should try to make the Q2/Q3/etc functions into one function that is general enough to work for any question. Know that you can add click listeners using addEventListener and removeEventListener and that would allow you use to functions with parameters. I don't want give you an answer cause you're very close. Come back when you have some working code(if it's not working) — user5051310
– user5051310, Commented Oct 27, 2015 at 11:45
Thank you, Terminus! I will do more research on how to use those click listeners. Oh, and the code works. I just didn't want to post a code that it 1000+ lines. — wuv1
– wuv1, Commented Oct 27, 2015 at 14:30

Ben · Accepted Answer · 2015-10-27 11:36:02Z

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

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");

answered Oct 27, 2015 at 11:36

Ben

8,9519 gold badges48 silver badges82 bronze badges

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

3 Comments

wuv1 Over a year ago

Thanks for the suggestion, Ben! Could you explain to me why using jQuery would be better than using AJAX?

Ben Over a year ago

You could use vanilla AJAX and/or JavaScript, but it would take a ton of extra code as it's not as straightforward as just using the $.post() jQuery function which does that all for you and you can integrate elegant methods of handling errors, exceptions and callbacks.

wuv1 Over a year ago

Ahh, I see. Thank you so much again, Ben!

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related