HTML5 Ajax JQuery PHP MySQL Insert

Question

Can anyone tell me, why I am still redirected to insertInput.php after pushing the submit button. I tried several things, but it didn't work, like changing the type from "submit" to "button" and so on.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>Barocker's Song Voting</title>
        <link href="vote.css" type="text/css" rel="stylesheet">
        <script src="jquery-1.11.0.min.js" type="text/javascript"></script>
         <script type="text/javascript">
            $(document).ready(function(){
                $("#insert").click(function(){
                    var url = "insertInput.php";
                    var data = $("#form :input").serializeArray();
                    alert("Button clicked");
                    $.post(
                        url,
                        data,
                        function(info){
                            $("#result").html(info);
                        }
                    );
                    clearInput();
                });
                function clearInput(){
                    $("#form :input").each(function(){
                        $(this).val("");
                    });
                }
            });
        </script>
    </head>
    <body>
        <div id="insertBanner">
            <form id="form" action="javascript:void(0);" method="post">
                <input type="text" id="title" name="title" style="width: 300px;" placeholder="Titel" autofocus required>
                <input type="url" id="url" name="url" style="width: 300px;" placeholder="Link (Youtube, etc.)">
                <button id="insert">Hinzufügen</button>
            </form>
            <span id="result"></span>
        </div>

    </body>
</html>

PHP:

    /*
     * Connect to MySQL
     */

    $con = mysqli_connect("localhost", "@", "", "test");

    /*
     * Check Connection
     */

    if (mysqli_connect_errno()){
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $title = $_POST['title'];
    $url = $_POST['url'];
    $sql = "INSERT INTO barocker (title, url) VALUES ('" . $title . "', '" . $url . "')";

    if (!mysqli_query($con,$sql)){
        echo "Error";
    } else {
        echo "Success";
    }

    /*
     *  Close Connection
     */

    mysqli_close($con);

?>

Thank you guys. Any help as always very appreciated.

**Danger**: You are **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that you need to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Mar 28 '14 at 15:33

score 2 · Answer 1 · answered Mar 28 '14 at 15:39

2

you need #insert click disable as i understand

$("#insert").click(function(){
    return false;
});

answered Mar 28 '14 at 15:39

Anri

1,706
2
17
36

No, that doesn't help. Still redirecting to insertInput.php. – user1688612 Mar 29 '14 at 17:23

score 0 · Answer 2 · edited Mar 28 '14 at 15:37

0

Try this:

$("#submit").click(function(e){
            e.preventDefault();
            var data = $("#form :input").serializeArray();
            $.post(
                $("#form").attr('action'),
                data,
                function(info){
                    $("#result").html(info);
                }
            );
            clearInput();
        });

e.preventDefault(); This instruction prevents default action

edited Mar 28 '14 at 15:37

Hackerman

12,139
2
34
45

answered Mar 28 '14 at 15:30

Milos Miskone Sretin

1,748
2
25
46

1

change, `$("#submit").click()` to `$("#input").click()` or `$("input[type=submit]").click()` – Ravi Dhoriya ツ Mar 28 '14 at 15:42

naota · Accepted Answer · 2014-03-30T12:17:35.803

0

The problem is you are assigning two events for submitting one form. In HTML, there is an action. And in Javascript,there is an onClick. One way to avoid this, you can disable the action like this:

<form id="form" action="javascript:void(0);" method="post">

In PHP code, you are getting the script name of the $("#form").attr('action') in the following part:

Before:

$("#submit").click(function(){
    $.post(
       $("#form").attr('action'),
       data,function(info){
       $("#result").html(info);
   });
   clearInput();
});

Now there isn't a valid value in the action, this need to be altered, for example:

After:

$("#insert").click(function(){
    var url = "insertInput.php";
    $.post(
           url,
           data,function(info){
           $("#result").html(info);
    });
    clearInput();
});

Hope this helps.

edited Mar 30 '14 at 12:17

answered Mar 28 '14 at 16:05

naota

4,695
1
18
21

I tried that. Now nothing happens when I click the button: no redirect, no clear, no new entry in the db. – user1688612 Mar 29 '14 at 17:27
Thank you for your comment. It added several codes above. The target element for click event should be `$("#insert")` not `$("#submit")` because the id of your submit button is `'insert'`. – naota Mar 30 '14 at 12:21
Edit my initial post, and did what you wrote, but like I said, the button doesn't work anymore, nothing executed. – user1688612 Mar 31 '14 at 18:56
I copied your code into JSFiddle. http://jsfiddle.net/naokiota/K8h8T/2/. And the button seems to work well. When you click the button, an alert message will be shown. – naota Mar 31 '14 at 23:45
Okay, the problem was, that I forgot $(document).read(function(){}); I edited my initial Post, to show how it works. – user1688612 Apr 01 '14 at 10:19

HTML5 Ajax JQuery PHP MySQL Insert

3 Answers3