I am just getting into coding for my university degree, and while I am loving it so far, I cannot help but feel like what this web engineering course asks for is ridiculously more advanced than what they teach in labs and lectures. For the assignment, I’m creating a form for user’s of the website to enter their 2nd hand products into. It has a dropdown menu, with the option to choose “custom”, which then should allows the users to enter a custom category, and have that become an option in the dropdown menu.I have virtually no idea how to do this, I’m very new to javascript and have tried to make some sort of text input that is originally hidden and pops up when the user selects custom, but whenever trying to click enter on that custom field, it tries to submit the form. I would appreciate if someone could write the function to add this field for me.
<html lang="en">
<head>
<title>DOM Practice (Task 4.1)</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Submit your 2nd hand Product!</h1>
<form method="POST" action="../submit.php" onsubmit="return validateForm()" onreset="resetForm()">
<!-- form for submitting products-->
<fieldset class="form">
<fieldset class="fieldSet">
<legend>Enter your personal information</legend>
<label for="firstName">*First Name:</label>
<input type="text" id="firstName" required><br>
<label for="lastName">*Last Name:</label>
<input type="text" id="lastName" required><br>
<label for="pemail">*Email:</label>
<input type="email" id="pemail" required>
<br><!-- validate as valid email when entered -->
<label for="submitted">*Have you submitted a product before?</label>
<select name="submitted" id="submitted" required>
<option value="yes">
I have submitted a product before.
</option>
<option value="no" selected>
I have not submitted a product before.
</option>
</select>
</fieldset>
<fieldset class="fieldSet">
<legend>Enter the details of the product</legend>
<label for="productName">*Product name:</label><br>
<input type="text" id="productName" required><br>
<label for="description">*Product Description:</label><br>
<textarea name="description" required>*Please describe the product briefly here.</textarea><br>
<label for="priceInput">*Product Price:</label><br>
<input type="text" id="priceInput" onChange="displayPricing()" required><br>
<label for="priceOutput">Price Range:</label><br>
<input type="text" id="priceOutput" readonly><br>
<label for="picture">*Upload a picture of the product:</label><br>
<input type="file" id="picture" name="picture" onChange="testType()" required><br>
<label for="url">*Upload a URL of a webpage associated with the product:</label><br>
<input type="url" id="url" required><br>
<p>Price Matched?</p>
<label for="priceMatched">Yes</label>
<input type="radio" id="priceMatched" name="priceMatching" value="wasPriceMatched"><br>
<label for="notPriceMatched">No</label>
<input type="radio" id="notPriceMatched" name="priceMatching" value="notPriceMatched"><br>
<label for="easeOfDiy">*Ease of DIY:</label><br>
<input type="text" id="easeOfDiy" required onChange="validateEaseofDiy"><br>
<label for="toolsIncluded">*Tools Included:</label><br>
<select name="toolsIncluded" id="toolsIncluded" required>
<option value="toolsAreIncluded">Tools are Included</option>
<option value="toolsNotIncluded">Tools are not Included</option>
</select><br>
<label for="productCategory">*What category is this product?</label><br>
<select name="productCategory" id="productCategory" onChange="createNewCategory()" required>
<option value="kitchen">Kitchen</option>
<option value="gardening">Gardening</option>
<option value="custom">Custom</option>
</select><br>
<label for="checkedTerms">I have read the <a href="terms-and-conditions">terms and
conditions</a></label>
<input type="checkbox" id="checkedTerms" name="terms" value="haveCheckedTerms" required><br>
<fieldset class="searchTags"><!-- a box for adding search tags-->
<legend>Search Tags</legend>
<input type="text" name="custom_entry" id="custom_entry"><input type="button"
value="Enter a new search tag" onclick="addSearchTag()"></input>
</fieldset>
<fieldset id="Reviews"> <!-- a box for adding reviews-->
<legend>Reviews</legend>
<input type="button" value="New Review" onclick="addReview()" onChange="validateReview()">
</fieldset>
</fieldset>
<input type="submit" value="submit">
<input type="reset" value="Reset">
</fieldset>
<script type="text/javaScript">
createNewCategory()
{
}
function displayPricing() //validates valid numeric input, plus produces price category field based on price
{
var priceInput = document.getElementById('priceInput');
var priceDisplay = document.getElementById('priceOutput');
var pattern = /^-?d+(.d+)?$/; //testing for number
if(!(pattern.test(priceInput.value))) //if not valid number
{
alert("Please enter a numeric value.");
priceInput.value = '';
return; //clear the input field
}
var price = parseFloat(priceInput.value); //turning text/string output to double
if(price < 0) //alert if less than 0
{
alert("Price cannot be below 0.");
priceInput.value = 0; //set to 0
}
if(price == 0) //if 0
{
priceDisplay.value = 'Free';
}
else if(price<25) //if under 25
{
priceDisplay.value = 'Cheap';
}
else if(price<=100) //if 25 to 100 inclusive
{
priceDisplay.value = 'Affordable';
}
else //anything over 100
{
priceDisplay.value = 'Expensive';
}
}
function testType() //function that validates file types
{
var picture = document.getElementById('picture'); //getting input file
const fileTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif']; //has to be one of these types
if(!(fileTypes.includes((picture.files[0]).type)))
{
alert('File type '+(picture.files[0]).type + ' is not a valid file type! Please upload a JPEG, JPG, PNG, or GIF for the product image.');
picture.value = ''; //clear
}
}
function validateEaseofDiy() //function to validate easeofDiy as Easy, Average, or Hard
{
var diyInput = document.getElementById('easeOfDiy'); //getting inputted ease of DIY
if((diyInput.value != "easy") && (diyInput.value != "average") && (diyInput.value != "hard")) //if input isnt easy, average, or hard
{
alert('Invalid ease of DIY. The entered difficulty must be "easy", "average", or "hard". The entered input is case sensitive!');
diyInput.value = ''; //clear entered ease of DIY
}
}
function addReview() //function that adds reviews with button click, was solution to zero to many selector.
{
var newReview = document.createElement('textarea');
var lineBreak = document.createElement('br');
var deleteButton = document.createElement("button");
deleteButton.textContent = "Delete";
var reviewsContainer = document.getElementById('Reviews');
deleteButton.onclick = function()
{
newReview.remove(); //needs to delete the text area and the delete button
deleteButton.remove();
lineBreak.remove();
}
newReview.placeholder = 'Enter Review Here';
newReview.className = 'review-input'; //use to style, and to delete upon reset
reviewsContainer.appendChild(lineBreak);
reviewsContainer.appendChild(newReview);
reviewsContainer.appendChild(deleteButton);
}
validateReview()
{
var pattern = /d+(.d+)$/ // a regex to test 0.0-5 out of 5 stars
}
function addSearchTag() //function to add search tags
{
var customSearchTag = document.getElementById("custom_entry").value;
if(customSearchTag == '') //to ensure empty search tags arent added, important for when IDs are grabbed
{
alert('Added Search Tags cannot be empty'); //not sure why not alerting
customSearchTag = ''; //clear input
return; //exit method
}
var newSearchTag = document.createElement("input");
var tagContainer = document.createElement("div");
newSearchTag.type = 'text'; //creating new search tag
newSearchTag.name = 'searchTag';
newSearchTag.value = customSearchTag;
newSearchTag.id = customSearchTag;
newSearchTag.className = 'search-Tag-Input';
//creating delete button for new tag
var deleteButton = document.createElement("button");
deleteButton.textContent = "Delete";
deleteButton.onclick = function()
{
deleteSearchTag(tagContainer); //needs to delete the entire container
};
tagContainer.appendChild(newSearchTag); //appending all elements to one container, was necessary to remove delete button upon delete
tagContainer.appendChild(deleteButton);
tagContainer.appendChild(document.createElement("br"));
document.getElementById("custom_entry").insertAdjacentElement("beforebegin", tagContainer);
}
function deleteSearchTag(tagContainer) //function delete search tag
{
tagContainer.remove(); // Remove the entire container
}
function resetSearchTags() //deletes all search tags
{
var tagContainer = document.querySelectorAll('div');
tagContainer.forEach(function(container) {
container.remove(); // Remove the entire container
});
}
function resetReviews() //deletes all reviews
{
var reviewsContainer = document.getElementById('Reviews');
// Remove all review elements indivdually
var reviewInputs = reviewsContainer.querySelectorAll('.review-input');
reviewInputs.forEach(function(review) {
review.remove();
});
// Also remove any line breaks and delete buttons
var lineBreaks = reviewsContainer.querySelectorAll('br');
lineBreaks.forEach(function(lineBreak) {
lineBreak.remove();
});
var deleteButtons = reviewsContainer.querySelectorAll('button');
deleteButtons.forEach(function(button) {
button.remove();
});
}
function validateForm() //functions that runs mutliple validation functions on form submission
{
validateReview();
}
function resetForm() // function that runs resets form elements that dont reset normally upon reset button
{
resetReviews();
resetSearchTags();
}
</script>
</form>
</body>