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="layout\css\style.css"/>
<link rel="stylesheet" type="text/css" href="layout\css\bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="layout\css\fontawesome.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);
}
}
}
}
