File submission worked until I added jQuery, whats the issue? - php

Question

I am having a strange issue where I was able to submit files and successfully upload them, now that I have added this bit of jQuery within the head of the webpage, it doesn't seem to work anymore:
I tested once again without the jQuery and it works perfectly fine, my jQuery is messing with it somewhere. Anyway I can accomplish the same objective, differently?
Jquery:
$(document).ready(function() {
var options = $('select[name=itemType]');
var optionVal = options.val();
var filer = $('input[name=itemFile');
var filerVal = $('input[name=itemFile]').val();
options.change(function() {
optionVal = $(this).val();
if(optionVal == 1 || optionVal == 3) {
$('input[name=itemContact]').removeAttr('disabled');
$('input[name=itemContact]').attr('required','true');
} else {
$('input[name=itemContact]').attr('disabled','true');
$('input[name=itemContact]').removeAttr('required');
};
if(optionVal != 5) {
$('input[name=itemFile]').removeAttr('disabled');
$('span.inputFile').css("display","block");
} else {
$('input[name=itemFile]').attr('disabled','true');
$('span.inputFile').css("display","none");
};
});
filer.change(function() {
filerVal = $(this).val();
$(this).parent().text(filerVal);
});
});
HTML Form:
Note: $sectionName is defined earlier throughout the webpage, and does work.
<form class="col-12" method="post" action="./action.php?upload" enctype="multipart/form-data">
<p class="head">Upload to <i><?php echo $sectionName; ?></i></p>
<div class="con">
<input name="sectionID" type="hidden" value="<?php echo $section; ?>" required />
<select name="itemType" required>
<option selected disabled>Select an Item Type</option>
<option value="1">Downloadable, Contact</option>
<option value="2">Downloadable</option>
<option value="3">Installable, Contact</option>
<option value="4">Installable</option>
<option value="5">Browsable</option>
</select>
<span class="inputFile" style="display:none;">
Select a File
<input name="itemFile" type="file" required />
</span>
<input name="itemName" type="text" placeholder="Enter Item Name" required />
<input name="itemContact" type="email" placeholder="Enter Contact Email Address" disabled />
<button type="submit">Submit</button>
</div>
</form>
action.php?upload:
$fileDir = "./uploads/";
$fileName = preg_replace("/[^A-Z0-9._-]/i", "_", $_FILES['itemFile']["name"]);
$itemDir = $fileDir. $fileName;
$sectionID = $_POST['sectionID'];
$itemName = $_POST['itemName'];
$itemType = $_POST['itemType'];
$itemContact = $_POST['itemContact'];
if (file_exists($itemDir)) {
echo '<p class="alert">Sorry, file already exists</p>';
} else {
if (move_uploaded_file($_FILES["itemFile"]["tmp_name"], $itemDir)) {
mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
if($createItem = $con->prepare("INSERT INTO items(sectionID,itemName,itemType,itemDir) VALUES(?,?,?,?)")) {
$createItem->bind_param("isis", $sectionID,$itemName,$itemType,$itemDir);
if($createItem->execute()) {
$itemID = $createItem->insert_id;
if($itemType == 1 || $itemType == 3) {
if($createContact = $con->prepare("INSERT INTO contacts(itemID,itemContact) VALUES(?,?)")) {
$createContact->bind_param("is", $itemID,$itemContact);
if($createContact->execute()) {
echo '<p class="alert">Item Created</p>';
} else {
echo "<p class=alert'>Execute failed: [createContact] (" . $createContact->errno . ") " . $createContact->error. '</p>';
};
} else {
echo '<p class="alert">Item Created</p>';
};
$createContact->close();
};
};
};
$createItem->close();
};
};
Rather than uploading the file, or storing it in $_FILES it doesn't even get passed to action.php. I have checked $_POST and $_FILES, it doesn't show up in either, whereas before it did.
Note: This is an internal website on one of my web servers, so it doesn't matter if it is vulnerable to SQL Injection.

Answer 1

Selector is not valid at this line
var filer = $('input[name=itemFile');
var filer = $('input[name=itemFile ] ');