javascript – How can I fix this undefined index error in my ajax file?-ThrowExceptions

Exception or error:

I’m trying to add items to a database using a web form. I want to use ajax to submit the items without having the page reload every time. I have 3 fields, Item Description (textfield), Quantity (textfield), and Category (radio buttons). After completing the fields the user will click a submit button and the results will display in a table below. I’m getting this error however in ajax.php

Notice: Undefined index: Category in C:\wamp64\www\GitHub\restaurant\ajax.php on line 7

Here is my html/form markup

<form id="form1" name="form">
   <h2>Add Item</h2>
   <div class="row">
      <div class="col-sm-3"></div>
   </div>
   <div class="col-sm-3">
      <label for="">Item Description:</label>
      <div class="input-group">
         <input name="Item_Description" id="Item_Description" class="form-control" type="text" list="description" placeholder="Select or enter an Item" value="<?php $Item_Description; ?>">
         <datalist name="description" id="description">&nbsp;<span class="caret"></span>
         </datalist>
      </div>
   </div>
   <div class="col-sm-4">
      <label for="Category">Category:</label>
      <div class="input-group">
         <div class="radio">
            <label>
            <input type="radio" name="Category" id="Category" checked="checked" value="Food" />Food</label>
         </div>
         <div class="radio">
            <label>
            <input type="radio" name="Category" id="Category" value="Drinks" />Drinks</label>
         </div>
         <div class="radio">
            <label>
            <input type="radio" name="Category" id="Category" value="Misc" />Misc</label>
         </div>
      </div>
   </div>
   </div>
   <div class="row">
      <div class="col-sm-4">
         <label for="onHand">On-Hand Quantity</label>
         <div class="input-group">
            <input name="On_Hand_Qty" id="On_Hand_Qty" class="form-control" type="text" value="<?php
               $On_Hand_Qty;
               ?> 0" style="text-align: center;">
         </div>
      </div>
   </div>
   <br />
   <div class="row" style="padding-left: 22px;">
      <input id="submit" type="button" value="Submit">
      <button type="reset" class="btn">Clear</button>
   </div>
   <img id="loading" src="images/3.gif" style="display:none" />
   </div>
   </div>
</form>

Here is my submit.js

$(document).ready(function() {
$('#submit').on('click', function(e) {
    $("#loading").show();
    e.preventDefault();

    var form = $('#form1');
    $.ajax({
        url: 'ajax.php',
        type: 'POST',
        dataType: 'json',
        data: {
            'Item_Description': $('#Item_Description').val(),
            'On_Hand_Qty': $('#On_Hand_Qty').val(),
            'Category': $('#Category').val()
        },
        success: function(result) {
            alert("hello");
            $('#loading').hide();
        },
        complete: function() {
            $('#loading').hide();
        }
    });
});
});

and finally, ajax.php

<?php
include ("Connect.php");

$Item_Description = $_POST['Item_Description'];
$On_Hand_Qty = $_POST['On_Hand_Qty'];
$Category = $_POST['Category'];

$TableName = "items";

$sql = "INSERT INTO $TableName " . "(Item_Description, On_Hand_Qty, Category) VALUES " . "('$Item_Description','$On_Hand_Qty', '$Category')";

$result = mysqli_query($con, $sql) or die(mysqli_error($con));

if (!$result)
{
    die('Invalid query: ' . mysqli_error());
}

mysqli_close($con);
?>
How to solve:

Leave a Reply

Your email address will not be published. Required fields are marked *