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.

Your code is vulnerable to [**SQL injection attacks**](https://en.wikipedia.org/wiki/SQL_injection). You should use [**mysqli**](https://secure.php.net/manual/en/mysqli.prepare.php) or [**PDO**](https://secure.php.net/manual/en/pdo.prepared-statements.php) prepared statements with bound parameters as described in [**this post**](https://stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php). — Alex Howansky, Apr 17 '17 at 20:08
you should also make sure that img upload did not go wrong before insert in DB — OldPadawan, Apr 17 '17 at 20:13

F1dzh · Accepted Answer · 2017-04-17T20:12:34.257

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']))

edited Apr 17 '17 at 20:12

answered Apr 17 '17 at 20:01

F1dzh

74
9

I edited the post method but the form failed to catch the image as I put an error message if an image is not uploaded in the 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 ""; } line of code @F1dzh . May I know why ? – Nik Mohamad Lokman Apr 17 '17 at 20:10
Well okay, I forgot about `enctype="multipart/form-data"` please add this to the form! I updated the previous code! :) – F1dzh Apr 17 '17 at 20:12
That works great @F1dzh ! Thank you very much I wish you a nice and happy day :D – Nik Mohamad Lokman Apr 17 '17 at 20:15
I did upvote the solution but since my reputation is not that high yet it doesnt change the vote :/ – Nik Mohamad Lokman Apr 17 '17 at 20:25
Okay, no problem! Please be careful of SQL Injections, because I don't see any protection in your code :) – F1dzh Apr 17 '17 at 20:27
@NikMohamadLokman Upvoting and accepting an answer are two different things. You can definitely accept the answer (which you should do if it answered your question). Here's how: https://meta.stackexchange.com/questions/23138/how-to-accept-the-answer-on-stack-overflow – M. Eriksson Apr 17 '17 at 20:30

Insert data from modal to database

1 Answers1