CODEWITHSUNDEEP
javascriptphpjqueryajaxpost
Catalina
Catalina

Reputation: 95

send data to $_POST array via AJAX

I start to play music via button 'submit', and as a result my form is not sent to global array $_POST. How to do that? Should I use AJAX? How? Music plays, but form isn't sent :(

 <?php

    include_once 'connect.php';



if($_POST['text']){ 
    mysqli_query($CONNECT,"TRUNCATE TABLE user");
        $query = "INSERT INTO user VALUES ('','$_POST[text]')";
        mysqli_query($CONNECT, $query);
}
  ?>




<!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8" />
                <title>Input</title>
                <link href="style.css" rel="stylesheet">
                <script src="jquery-2.2.3.min.js"></script>

                <script>
                 $(document).ready(function() {
                   $('.button').click(function(event) {
                     $('.chatMessage').val('');
                     var audio = document.getElementById('audioFile');
                     audio.currentTime = 0;
                     audio.play();
                     audio.loop = true;
                     event.preventDefault();
                   });               
                 });
             $("#form").submit(function(event){
                 var $form = $(this);
                 var $inputs = $form.find("input, button, textarea");
                 var serializedData = $form.serialize();
                 $inputs.prop("disabled", true);
                 $.ajax({
                    url: "/index.php",
                   type: "post",
                   data: serializedData
                });
                });
               </script>
               </head>

               <body>
                 <audio id="audioFile">
                   <source src="font/sound.mp3" type="audio/mpeg">
                 </audio>
                 <div class="inputMessage">

                   <form id="form" method="POST" action="/index.php">
                     <textarea class="chatMessage" name="text" placeholder="Текст сообщения"></textarea>
                     <br>
                     <input class="button" type="submit" name="enter" value="Отправить">
                     <input type="reset" value="Очистить">
                   </form>
                 </div>
               </body>
        </html>

I need your answers, please!

Upvotes: 0

Views: 204

Answers (2)

Rob Wood
Rob Wood

Reputation: 415

$.ajax({
  type: "POST",
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

Upvotes: 0

Andrew Magill
Andrew Magill

Reputation: 2510

There are a couple problems with this. First, you are overriding the click handler for your button. If you also want it to also post the form, you should return true; at the end of your handler.

Also, you will find that the browser will reload the page when that happens, so there is no real reason you would want to play music. Instead you should add some PHP to add JavaScript that plays the music when you correctly receive the post data.

Alternatively, you could send the data with AJAX within your click handler, as @jszobody suggests.

Upvotes: 1

Related Questions