I am a self taught CS student and I am currently working on a job listing website. I am now working on the back-end page where the business owner will be able to see, add or remove a job. this is how the back end looks like.
Each jobs has 9 attributes allocated between three different tables jobs, keywords, requirements
:
- Job-ID (jobs table - primary key)
- Title (jobs table)
- Type (jobs table)
- Location (jobs table)
- Salary (jobs table)
- Description (jobs table)
- Date (jobs table)
- Keyword (keywords table since each jobs can have multiple keywords)
- Requirement (requirements table since each jobs can have multiple requirements)
Right now, I am able to submit a new job and store all the attributes for the jobs table but I have problems with the other two tables.
My issue is unlike the jobs
table, the user can add multiple keywords. So I have implemented a JavaScript Function in add-jobs.js
to create a new innerHTLM ul .list-keywords
whenever the user will submit. What I need to do, is to loop over the .list-keywords
and take the NodeValue
of each li
item. Then, I will have create an equal number of rows
in my database as there isli
.
It was much more easier for the jobs table since I just had to do $attribute = $_POST["attribute_name"]
but with a list I have no idea how to do it
Add-jobs.js
const keywords = document.querySelector(".keywords");
const addKeyword = document.querySelector(".add-keyword");
const listKeywords = document.querySelector(".list-keywords");
const generateTemplate = (word, location) => {
const html = `
<li><span>${word}</span>
<i class="far fa-times-circle delete"></i>
</li> `;
location.innerHTML += html;
};
addKeyword.addEventListener("click", (e)=>{
e.preventDefault();
const word = keywords.value.trim();
console.log(word);
keywords.value = "";
generateTemplate(word, listKeywords);
});
listKeywords.addEventListener("click", e =>{
if(e.target.classList.contains("delete")){
e.target.parentElement.remove();
};
});
Add-jobs.php
</p>
<div class="add">
<label for="keywords">Keywords : </label>
<input type="text" class="keywords" name="keywords" value=""/>
<button class="add-keyword">Add</button>
</div>
<ul class="list-keywords">
</ul>
<p>
Add-databse.php
<?php
require("config/db.php");
require("add-jobs.php");
$link = mysqli_connect("localhost","root","","benoit");
$title = $_POST["position"];
$type = $_POST["job-type"];
$location = $_POST["location"];
$salary = $_POST["salary"];
$description = $_POST["description"];
$date = $publisheddate;
mysqli_query($link,"INSERT INTO jobs (`title`, `type`, `location`, `salary`, `description`, `date`)
VALUES ('$title', '$type', '$location', '$salary', '$description', CURDATE())")
or die(mysqli_error($link));
?>