php – Cant take input data and insert them into the database

So, ive seen many ppl done this and i tried following them, when i hit the save button to insert the data a blank white page shows up + no data inserted.

I dont know what ive done wrong and this is my 1st project so im not so familiar with what im doing.

I think i can fix the problem by cutting the php code and put it in the middle of the html script with some js. But i have to stick to the oop.

My index.php file :

<?php
 include "items.class.php";
?>

<!DOCTYPE html>
<html>
<html lang = "en">
    <head>
        <title> products </title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"/>

        <link rel="stylesheet"  type="text/css" href="layoutcssstyle.css"/>
        <link rel="stylesheet"  type="text/css" href="layoutcssbootstrap.css"/>
        <link rel="stylesheet" type="text/css" href="layoutcssfontawesome.min.css"/>




        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE-edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    </head> 



    <body class="body">

            <nav class="navbar navbar-header navbar-dark bg-dark" style="      font-family: Trebuchet MS, sans-serif; ">
                <a class="navbar-brand font-weight-bold h1" href="#" style="margin-left: 2rem; margin-top:1rem;">PRODUCTS LIST</a>
                <form  action="<?php  $item = new Items(); $item->insertItem(); ?>" method = "POST">
                    <input type="submit" value="Save" name="submit" class="button btn navbar-btn text-light  bg-dark">  <!-- <a type="submit" href="index.php" class="button btn navbar-btn text-light  bg-dark">Save</a> -->
                <span  style="margin-top:0.5rem; margin-right:2rem;">
                    <a href="./index.php" class="button btn navbar-btn text-light bg-dark">Cancel</a>
                </span>
            </nav>


<div clss="form-area">
            <div class= "main" >
<!-- sku - name - price -->
                        <div class="labels-devider">
                          <label class="label text-light" >SKU</label>
                          <input  value="defaulted" disabled >
                        </div>
                        <div class="labels-devider">
                          <label class="label text-light">Name</label>
                          <input type= "text" name="name" required>
                        </div>
                        <div class="labels-devider">
                          <label class="label text-light" >price($)</label>
                          <input type="number" name="price" required>
                        </div>

<!-- typeswitcher -->
                      <div class="labels-devider">
                      <label class="label text-light" style="width:130px;" >Type Switcher</label>              
                        <span class="selectpicker"   >
                          <select name="type" id="productType"  style="width:200px;" required>
                          <option selected >Select A Type:</option>
                          <option value="DVD">DVD</option>
                          <option value="Furniture">Furniture</option>
                          <option value="Book">Book</option>
                          </select>
                        </span>
                      </div>     

<!-- indivisual forms -->
                      <div style= "margin-top:20px; ">
                            <div id="DVD-area">
                                  <label class="label text-light">Size (MB)</label>
                                  <input  type="number" name = "size" id="size" >
                                  <p class="description">Please, provide size*</p>
                            </div>
                            <div id="Furniture-area">
                                  <div class="labels-devider">
                                  <label class="label text-light">Height (CM)</label>
                                  <input  type="number"  name = "height" id="height">
                                  <p class="description">Please, provide height*</p>
                                  </div>
                                  <div class="labels-devider">
                                  <label class="label text-light">Width (CM)</label>
                                  <input  type="number" id="width" name="width">
                                  <p class="description">Please, provide width*</p>
                                  </div>
                                  <div class="labels-devider">
                                  <label class="label text-light">Length (CM)</label>
                                  <input  type="number" id="length" name="length" >
                                  <p class="description" >Please, provide length*</p>
                                  </div>
                            </div>
                            <div id="Book-area">
                                  <label class="label text-light">Weight (KH)</label>
                                  <input  type="number" id="weight" weight="weight" >
                                  <p class="description">Please, provide weight*</p>
                            </div>
                      </div>
              </div>      
</div>
            <footer class="foot">
              <p class="text-center py-3 bg-dark shadow">Scandiweb Test Assignment - done by rima- <br>
            </footer>       
            <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
                    <script type="text/javascript">
                      $("#DVD-area").hide();
                      $("#Furniture-area").hide();
                      $("#Book-area").hide();

                      // var type = $('#productType').find('option:selected').value();
                      // var typeArea = type +"-area";
                      // typeArea.setAttribute('required','');
                      //remove weitch
                      $('#productType').change(function(){
                        switch($('#productType').find('option:selected').text()){
                           case "DVD" :
                                        $("#DVD-area").show();
                                        $("#Furniture-area").hide();
                                        $("#Book-area").hide();
                                        $("#size").attr('required', true); 
                                        break;
                          case "Furniture" :
                                        $("#DVD-area").hide();
                                        $("#Furniture-area").show();
                                        $("#Book-area").hide();
                                        $("#height").attr('required', true); 
                                        $("#width").attr('required', true); 
                                        $("#length").attr('required', true); 
                                        break;
                          case "Book" :
                                        $("#DVD-area").hide();
                                        $("#Furniture-area").hide();
                                        $("#Book-area").show();
                                        $("#weight").attr('required', true); 
                                        break;
                          default:
                                      $("#DVD-area").hide();
                                      $("#Furniture-area").hide();
                                      $("#Book-area").hide();
                        }});



            </script>

        
    </body>
</html>

My items.class.php file:

<?php
 include "dbh.class.php";
Class Items extends Dbh{
    Public function getItems(){
        //fetch items
        $sql = "SELECT * FROM items";
        $stmt = $this->connect()->query($sql);
        return $stmt;
    }
    Public function insertItem(){
        if(isset($_POST['submit'])){
            if(isset($_POST['name']) && isset($_POST['price']) && isset($_POST['type'])){
            switch(strtolower($_POST['type'])){
                case "dvd":
                    $value = $_POST['size'];
                    $value_2 = null;
                    $value_3 = null;

                    break;
                case "furniture":
                    $value = $_POST['height'];
                    $value_2 = $_POST['width'];
                    $value_3 = $_POST['length'];
                    break;
                case "book":
                    $value = $_POST['height'];
                    $value_2 = $_POST['width'];
                    $value_3 = $_POST['length'];
                    break;
                    }
                    $name = strval($_POST['name']);
                    $type= strval($_POST['type']);
                    $price= $_POST['price'];

                    $sql = "INSERT INTO items (name, price, value, value_2, value_3,  type)  VALUES ($name, $price, $value, $value_2 , $value_3, $type";
                    $this->connect()->exec($sql);

        }
        
    }

        }
    }

Leave a Comment