Button Onclick calls Javascript which calls a PHP file which adds to a Mysql database

Question

I need help with adding to a database. I want to call a javascript scrt from a button click method. The Javascript Script, I want to call upon a php file which contains some code that adds to a MySQL Database.

I literally tried over 20+ website and No help with the stuff.

If AJAX would be better Could you help me?

The Button Code:

<input type="button" value="favorites1" onClick="favfunct();">

The Javascript Code

function favfunct() {
    var target = document.createElement( "script" );
    target.setAttribute( "src", "php/addtofavorites.php" );
    document.getElementsByTagName( "body" )[0].appendChild( target );`
}

The Php Code

<?php
    echo "test successful"
    $con = mysql_connect("localhost","root","student");
    if ($_POST["get"] == 'runfunction')
        echo "Works";
    }
    if ($_POST["action"] == 'favorites1'){ 
        echo "Testing Was Successful"
        if (!$con)
        {
            die('Could not connect: ' . mysql_error());
        }                   
        mysql_select_db("tvid", $con);
        $sql="INSERT INTO Persons (userid, davorites) VALUES 
            ('1','$_POST[video0]')";
        if (!mysql_query($sql,$con))
        {
            die('Error: ' . mysql_error());
        }
        echo "Your Video was Added To Your Favorites";
        mysql_close($con)
    }
?>

Can we see the code for `favfunct` as it stands so we can see what you have tried? — LoveAndCoding, Feb 25 '12 at 18:15
I added the code, accidently hit enter when was not in the textbox — Julian Neill, Feb 25 '12 at 18:18

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

So, this "works" the same way that hammering a screw in does. It will get in there, but not really the way you want to do things.

Don't use a script tag to trigger a php page. Your page will trigger, but it is the wrong tool to get the job done. You want to use AJAX. AJAX was specifically made for this purpose while a script tag was meant for running scripts on the page. It will try to fetch the contents of addtofavorites.php but it will expect JavaScript as the return. And you won't be able to use $_POST since you have no way to post data to the request.

Instead, use AJAX. If you are already using a JavaScript library, then it will have a nice AJAX wrapper for you (I don't know of a single library off the top of my head that doesn't). You can check out the API documentation for you given library for documentation on how to use the AJAX functionality (jQuery, Prototype.js, Mootools, etc.).

As an example, I will use jQuery, because it is one of the most popular ones. Here is a request using jQuery to your page (and what looks to be expected variables)

// Call an AJAX function to the proper page
$.ajax("php/addtofavorites.php", {
        // Pass our data to the server
        data: { "get" : "runfunction", "action" : "favorites1" },
        // Pass using the appropriate method
        method: "POST",
        // When the request is completed and successful, run this code.
        success: function (response) {
                // Successfully added to favorites. JS code goes here for this condition.
            }
    });

Also, as a side note, every line in PHP needs a semicolon ; at the end of it. Many of yours don't. And the 3rd line is missing an opening bracket { though I'm not sure if that is just an artifact of your copy paste or not.

Addendum

I would recommend using jQuery to listen for events as well. The events API for jQuery will let you listen for events on objects. So, something like this:

<input id="button_1" type="button" value="favorites1" />

and the jQuery

$(document).ready(function () { // Make sure the elements are loaded on the page
    // Listen for a click event on the button
    $('#button_1').click(favfunct);
});
// Now define the function
function favfunct(e) {
    // Stop the page from "following" the button (ie. submitting the form)
    e.preventDefault();
    e.stopPropagation();
    // Insert AJAX call here...
}

how do i get the button or so to call the ajax that you stated above? — Julian Neill, Feb 25 '12 at 18:41
@JulianNeill So, from how you've phrased things and from looking at your code, I'd recommend you read up on what jQuery and AJAX are. They are not separate, but they are not the same. jQuery is a JavaScript library, and AJAX is a technique in JavaScript for calling pages remotely. jQuery has a wrapper around the default AJAX functionality to make things simpler. I've updated my answer, but I'd recommend maybe reading some of the information (here and elsewhere) about jQuery and JavaScript in general. — LoveAndCoding, Feb 25 '12 at 18:52
does the php coding look correct? I will read up on more about Ajax — Julian Neill, Feb 25 '12 at 19:02
You're vulnerable to [SQL injection](http://stackoverflow.com/q/332365/422184) in the insert, which is a big issue. But otherwise it looks okay. — LoveAndCoding, Feb 25 '12 at 19:29

score 0 · Answer 2 · answered Feb 25 '12 at 18:34

0

I would recommend jQuery,

this is what you need: http://api.jquery.com/jQuery.get/

function add(title,text) {
  $(function() {
    $.get("add_to_db.php?title="+title+"&text="+text);
  });
}

and you can do it in a more advanced way using http://api.jquery.com/jQuery.post/

answered Feb 25 '12 at 18:34

Ali Alnoaimi

2,278
2
21
31

i am using jquery in other things. so jquery would help me more then ajax? – Julian Neill Feb 25 '12 at 18:39

Button Onclick calls Javascript which calls a PHP file which adds to a Mysql database

2 Answers2

Addendum

Linked