Why Ajax is executed 2 times?

K

Karpkarp2019-12-16 17:17:39

AJAX

Karpkarp, 2019-12-16 17:17:39

I sit I understand Ajax'e. I wrote a script that displays news without rebooting, I decided to write a script a little lower that immediately, after adding this news to the database, displays this news. In principle, everything works, but: 1) 2 records are added to the database, 2) Not just a new record is displayed on the page, but the entire page is duplicated along with the form. What did he do wrong?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $("document").ready(function(){
            
            $("#btn").click(function(){

                var title = $("#title").val();
                var description = $("#description").val();
                var texting = $("#texting").val();

                $("#title").val('');
                $("#description").val('');
                $("#texting").val('');

                $.ajax({
                    url: '../Model/AddPost.php',
                    type: 'POST',
                    data: {title:title, description:description, texting:texting},
                    success: function(data){
                        // alert(data);
                    }
                });

                $.ajax ({
                        type: "POST",
                        url: '../Model/AddPost.php',
                        data: {title:title, description:description, texting:texting},
                        success: function(data){
                            $("#textpost").html(data);
                        }
                });

            });

        });
    </script>
    <title>Form</title>
    <style>
        textarea {
            outline: none;
            border: none;
            border-bottom: 1px solid #000;
            resize:none;
        }
        button {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        form {
            margin-top: 10px;
        }
        .post {
            font-size:16px;
        }
        .textpost {
            padding-left:150px;
            padding-right:150px;
        }
    </style>
</head>
<body>
    
    <center>
    <label for="">Add Post</label>
    <form action="../Model/AddPost.php" method="POST" id="form">
        <textarea id="title" placeholder="Title" name="title" cols="60" rows="2"></textarea><br>
        <textarea id="description" placeholder="Description" name="description" cols="60" rows="2"></textarea><br>
        <textarea id="texting" placeholder="Text" name="texting" cols="60" rows="10"></textarea><br>
        <button id="btn" type="button">Send</button>
    </form>
    <hr>

    <div class="textpost" >
        <?php foreach($posts as $post) : ?>
            <div class="post" ><b><?php echo $post['title'] ?></b></div>
            <div class="post" ><i><?php echo $post['description'] ?></i></div>
            <div class="post" ><?php echo $post['texting'] ?></div><br>
        <?php endforeach; ?>    
    </div>

    <div id="textpost"></div>

    </center>
   
</body>
</html>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

A

Andrew, 2019-12-16
@KickeRockK

instead of this:

$("document").ready(function(){
            
            $("#btn").click(function(){

                var title = $("#title").val();
                var description = $("#description").val();
                var texting = $("#texting").val();

                $("#title").val('');
                $("#description").val('');
                $("#texting").val('');

                $.ajax({
                    url: '../Model/AddPost.php',
                    type: 'POST',
                    data: {title:title, description:description, texting:texting},
                    success: function(data){
                        // alert(data);
                    }
                });

                $.ajax ({
                        type: "POST",
                        url: '../Model/AddPost.php',
                        data: {title:title, description:description, texting:texting},
                        success: function(data){
                            $("#textpost").html(data);
                        }
                });

            });

        });

this

$("document").ready(function(){
            
            $("#form").submit(function(e){
e.preventDefault();
                var title = $("#title").val();
                var description = $("#description").val();
                var texting = $("#texting").val();

                $("#title").val('');
                $("#description").val('');
                $("#texting").val('');
                $.ajax ({
                        type: "POST",
                        url: '../Model/AddPost.php',
                        data: {title:title, description:description, texting:texting},
                        success: function(data){
                            $("#textpost").html(data);
                        }
                });

            });

        });

And why did you send 2 times?