CODEWITHSUNDEEP
javascriptphpjquerymysqlajax
user1688612
user1688612

Reputation:

HTML5 Ajax JQuery PHP MySQL Insert

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.

Upvotes: 0

Views: 1146

Answers (3)

naota
naota

Reputation: 4718

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.

Upvotes: 0

Anri
Anri

Reputation: 1693

you need #insert click disable as i understand

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

Upvotes: 2

Milos Sretin
Milos Sretin

Reputation: 1748

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

Upvotes: 0

Related Questions