Insert data from modal to database

Question

I want to make a form appear on a popup window when I click "Add" button. So I am using a modal to show a PHP form but when I tried to save the data inserted into the form into database, it does not work. When I clicked save, a weird URL came out as so :

.../pembelitkatakutest.php?image=025pikachu_xy_anime_3.png&save=

I am not sure, but I think the URL should not have the "image=025pikachu_xy_anime_3.png&" part.

My code is as below:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Add Tongue Twister</button><br><br><br>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="myModalLabel">Add Tongue Twister</h4>
  </div>
  <div class="modal-body">
    <form method = "POST">
        <div class="form-group">
            <label for="usr">Please Choose a Picture:</label>
            <input type="file" name="image">
            <script type="text/javascript">
            $(document).ready(function() {
            $(window).keydown(function(event){
            if(event.keyCode == 13) {
            event.preventDefault();
            return false;
            }
            });
            });
            </script>
        </div>
        <div class="form-group">
            <label for="pwd">Please write the tongue twister:</label>
            <input type="text" rows = "3" class="form-control">
        </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary" name="save">Save changes</button>
    <?php if(isset($_POST['save']))
    {
      //target folder to keep the media
      $target = "images/".basename($_FILES['image']['name']);

      //get all submitted data from form
      $image = $_FILES['image']['name'];
      $text = $_POST['text'];

      if(!empty($_FILES['image']['name']))
      { 
      $sql = "INSERT INTO pembelitkataku(image, text) VALUES ('$image','$text')";
      mysqli_query($db, $sql);
      }
      else
      {
        $message = "Sila pilih semua fail";
        echo "<script type='text/javascript'>alert('$message');</script>";
      }

      move_uploaded_file($_FILES['image']['tmp_name'], $target); 
    } 
    ?>
  </div>
  </form>
</div>

May I know what went wrong in my code and what can I do to fix it ?

If it is possible, I want to avoid using Javascript as it is very confusing to understand.

Thank you.

Answer 1

Use <form method="POST" enctype="multipart/form-data">

Because by default your code is making GET request but your PHP code want to receive a POST request. You can see it in this line of code :

if(isset($_POST['save']))