<script>
function more(){
var MoreDetails = document.getElementById('MoreDetails');
MoreDetails.style.display ="block";
}
function same(){
var SameProduct = document.getElementById('SameProduct');
SameProduct.style.display = "block";
}
</script>
<!DOCTYPE HTML>
<?php
$con = mysqli_connect('localhost', 'root', '', 'test') or die("Cannot connect to datbase");
// $seller = $_SESSION['sellMail'];
?>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
<html>
<head>
</head>
<body>
<div id = "ProductForm">
<form id="product" method="POST" enctype = "multipart/form-data" novalidate>
<table align="center" width="750" border ="2">
<tr align="center">
<td colspan="7"><h2>Insert Product</h2></td>
</tr>
<tr>
<td align="right"><b>Type of Product: </b></td>
<td>
<input list="text" name="type" placeholder = "Select a type" required>
<datalist id="text">
<?php
$run = mysqli_query($con, "Select * from typeproduct");
while($row = mysqli_fetch_array($run)){
$type_title = $row['type_title'];
echo "<option>$type_title</option>";
}
?>
</datalist>
</td>
</tr>
<tr>
<td align="right"><b>Product Category: </b></td>
<td>
<select name = "prd_cat" required>
<option>Select a Category</option>
<?php
$get_cat = "Select * from categories";
$run_cat = mysqli_query($con, $get_cat);
while($row = mysqli_fetch_array($run_cat)){
$cat_id = $row['cat_id'];
$cat_name = $row['cat_name'];
echo "<option>$cat_name</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td align="right"><b>Product Brand: </b></td>
<td>
<select name = "prd_brand" required>
<option>Select a Brand</option>
<?php
$get_brn = "Select * from brands";
$run_brn = mysqli_query($con, $get_brn);
while($row = mysqli_fetch_array($run_brn)){
$brn_id = $row['brand_id'];
$brn_name = $row['brand_title'];
echo "<option>$brn_name</option>";
}
?>
</select>
</td>
</tr>
<tr align="center">
<td><input type="submit" name="prdDetails" value="Insert Product"></td>
</tr>
</table>
</form>
</div>
<?php
if(isset($_POST['prdDetails'])){
$brand = $_POST['prd_brand'];
$type = $_POST['type'];
$cat = $_POST['prd_cat'];
$select = mysqli_query($con, "Select * from products where type = '$type' AND cat='$cat' AND brand = '$brand'");
if(mysqli_num_rows($select)==0){
echo "<script>more();</script>";
}else{
echo "<script>same();</script>";
$i=1;
?>
<table id="SameProduct" style="display:none">
<tr>
<td>S.No</td>
<td>Product Image</td>
<td>Product Title</td>
<td>Product Description</td>
<td>Same Product</td>
</tr>
<?php
while($row = mysqli_fetch_array($select)){
$img = $row['img'];
$title = $row['title'];
$desc = $row['p_desc'];
?>
<tr>
<td><?php echo $i;?></td>
<td><img src="Product_image/<?php echo $img;?>"</td>
<td><?php echo $title;?></td>
<td><?php echo $desc;?></td>
<td><button>Got the Same Product</button></td>
</tr>
<?php
$i++;
}
?>
<tr>
<td><button>Product Not in list</button></td>
</tr>
</table>
<?php
}
?>
<?php
}
?>
<form method="POST" id="MoreDetails" enctype="multipart/form-data">
<table style="display:none">
<tr>
<td align="right"><b>Product Image: </b></td>
<td><input type="file" name="prd_img" required/></td>
</tr>
<tr>
<td align="right"><b>Product Price: </b></td>
<td><input type="text" name="prd_price" required/></td>
</tr>
<tr>
<td align="right"><b>Product Description: </b></td>
<td><textarea name="prd_desc" cols = "20" rows="10" required></textarea></td>
</tr>
<tr>
<td align="right"><b>Product Keywords: </b></td>
<td><input type="text" name="prd_keyword" required/></td>
</tr>
<tr align="center">
<td colspan="7"><input type="submit" name="insertPrd" id="insertPrd" value="Insert Now"/></td>
</tr>
</table></form>
</body></html>
<?php
if(isset($_POST['insertPrd'])){
$title = $_POST['prd_title'];
$categ = $_POST['prd_cat'];
$brand = $_POST['prd_brand'];
$price = $_POST['prd_price'];
$desc = $_POST['prd_desc'];
$keywords = $_POST['prd_keyword'];
$img = $_FILES['prd_img']['name'];
$img_temp = $_FILES['prd_img']['tmp_name'];
move_uploaded_file($img_temp, "Product_image/$img");
$insert_prd = "INSERT INTO products(cat, brand, title, price, p_desc, img, keyword, seller) VALUES ('$categ', '$brand', '$title', '$price', '$desc', '$img', '$keywords', '$seller')";
$insert = mysqli_query($con, $insert_prd) or die("Cannot Insert");
if($insert){
echo "<script>alert('Product has been added');</script>";
echo "<script>window.open('Seller.php','_self')</script>";
}else{
echo "<script>alert('Sorry! The Product cannot be added');</script>";
echo "<script>window.open('Seller.php','_self')</script>";
}
}
?>
Whenever I am clicking on the prdDetails button, an error is there that "Uncaught TypeError: Cannot read property style of 'null'" whether more() is called or same() is called. I am currently working on the XAMPP server. Other than that everything is working fine.
This is because it document.getElementById('MoreDetails'); does not receive an DOM element and variable MoreDetails is null.
You should call function more() after DOM elemenet with id MoreDetails, but you call it before so you can't get this DOM element.
Your calls to more() and same() occur before the elements which they reference in the DOM.
Move the calls to more() and same() to somewhere after the elements MoreDetails and SameProduct.