send data to $_POST array via AJAX

Question

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!

Should you help me with code? I don't know, how to send it to array — Catalina
– Catalina, Commented Jun 10, 2016 at 17:26
You need to first go learn how to submit data with ajax. Jquery is one good tool. Come back to stackoverflow after you've done research, have made a solid attempt, and have a specific question. — jszobody
– jszobody, Commented Jun 10, 2016 at 17:27
I'm trying this, but it plays music, but doesn't send form: $("#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> — Catalina
– Catalina, Commented Jun 10, 2016 at 17:42
You are referencing to your form by ID, but there is not ID set. — Daniel Kucal
– Daniel Kucal, Commented Jun 10, 2016 at 17:55

Andrew Magill · Accepted Answer · 2016-06-10 17:25:45Z

1

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.

answered Jun 10, 2016 at 17:25

Andrew Magill

2,5374 gold badges25 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rob Wood · Accepted Answer · 2016-06-10 17:39:58Z

0

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

answered Jun 10, 2016 at 17:39

Rob Wood

4155 silver badges11 bronze badges

Collectives™ on Stack Overflow

send data to $_POST array via AJAX

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related