Form input checkbox and file type isn't functioning-CodePudding

I'm trying to make a form for adding a blog page.

I have title form, date form, content form, checkbox for blog category form and image form for the topic image.

When I try to fill the form, only the 3 of the 4 checkbox forms that worked and when I click upload image it won't show the file selector.

Here's the screenshot: Form screenshot

This is what I'm trying to achieve: Form screenshot

I've tried to browse for solution but my English isn't very good for browsing, I don't know the keyword to search for the solution.

Please help, I've stuck on this for 3 hours.

Here's the full code:

let blogs = []

function addBlog(event) {
    event.preventDefault()

    let inputName = document.getElementById("inputProjectName").value
    let inputContent = document.getElementById("inputDescription").value
    let inputImage = document.getElementById("inputImage")

    const projectDate = {

        startDate: document.getElementById("inputStartDate").value,
        endDate: document.getElementById("inputEndDate").value
    }

    image = URL.createObjectURL(image.files[0])

    let cardIcons = {
        html: document.querySelector('input[name="checkHtml"]').checked,
        css: document.querySelector('input[name="checkCss"]').checked,
        nodeJs: document.querySelector('input[name="checkNode"]').checked,
        reactJs: document.querySelector('input[name="checkReact"]').checked
    }

    let blog = {
        title: inputName,
        date: projectDate,
        content: inputContent,
        icons: cardIcons,
        image: inputImage
    }

    blogs.push(blog)

    console.table(blogs)
}

/* FORM */

.mpi-title {
    width: 100%;
    margin: 50px 0px;
    font-size: 30px;
    text-align: center;
    font-family: 'Lato', sans-serif !important;
    font-weight: 700;
}

.mpi-form-container {
    display: flex;
    justify-content: center;
}

.mpi-form {
    width: 540px;
    display: flex;
    justify-content: center;
}

.mpi-form label {
    font-size: 25px;
    font-weight: bold;
}

.mpi-form .mpi-name input,
.mpi-date input {
    width: 100%;
    height: 50px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}

.mpi-date {
    flex-grow: 1;
    display: flex;
    gap: 10px;
}

.mpi-date .date-start {
    flex: 50%;
}

.mpi-date .date-end {
    flex: 50%;
}

[type="date"]::-webkit-datetime-edit {
    opacity: 0;
}

[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 100%;
}

.mpi-desc textarea {
    width: 100%;
    font-size: 20px;
    font-weight: 400;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #c4c4c4;
    box-sizing: border-box;
    border-radius: 8px;
    height: 200px;
}

.mpi-check {
    display: flex;
    gap: 120px;
    margin: 20px 0px;
}

.mpi-check label {
    font-size: 20px;
}

.check-left {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.check-right {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.check-label {
    display: block;
    position: relative;
    padding-left: 35px;
    color: #514a4a;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.check-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}

.check-label:hover input~.checkmark {
    background-color: #ccc;
}

.check-label input:checked~.checkmark {
    background-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.check-label input:checked~.checkmark:after {
    display: block;
}

.check-label .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.mpi-image {
    overflow: hidden;
    height: 50px;
    width: 100%;
    font-size: 20px;
    font-weight: 400;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 20px;
    background: #f4f3f3;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    cursor: pointer;
    padding-right: 8px;
    box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}

.mpi-image label {
    width: 100%;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mpi-choose {
    margin-top: -2px;
    border-radius: 8px;
    align-items: center;
    padding: 13px 10px 13px 10px;
    background-color: #e4e4e4;
    color: #b2abab;
}

.mpi-attach {
    padding-right: 10px;
}

.mpi-submit button {
    margin-top: 30px;
    float: right;
    padding: 10px 30px;
    border: none;
    border-radius: 25px;
    background-color: var(--btn);
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 110px;
}

.mpi-submit button:hover {
    background-color: var(--btn-hover)
}


/* x FORM */

        <div >
            <!--MP = My Project Input-->
            <form onsubmit="addBlog(event)">
                <div >
                    <label for="inputProjectName">Project Name</label>
                    <input type="text" id="inputProjectName">
                </div>
                <div >
                    <div >
                        <label for="inputStartDate">Start Date</label>
                        <input type="date" id="inputStartDate">
                    </div>
                    <div >
                        <label for="inputEndDate">End Date</label>
                        <input type="date" id="inputEndDate">
                    </div>
                </div>
                <div >
                    <label for="inputDescription">Description</label>
                    <textarea name="inputDescription" id="inputDescription"></textarea>
                </div>
                <div >
                    <label for="checkTitle">Technologies</label>
                    <div >
                        <div >
                            <div>
                                <label for="checkHtml" >HTML
                                    <input type="checkbox" id="checkHtml" name="checkHtml"check>
                                    <span ></span>
                                </label>
                            </div>
                            <div>
                                <label for="checkNode" >Node Js
                                    <input type="checkbox" id="checkNode" name="checkNode">
                                    <span ></span>
                                </label>
                            </div>
                        </div>
                        <div >
                            <div>
                                <label for="checkCss" >CSS
                                    <input type="checkbox" id="checkCss" name="checkCss">
                                    <span ></span>
                                </label>
                            </div>
                            <div>
                                <label for="reactJs" >React Js
                                    <input type="checkbox" id="checkReact" name="checkReact">
                                    <span ></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <label>Upload Image</label>
                    <div >
                        <label for="input-blog-image">
                    <div >Choose</div>
                    <div ><i ></i></div>
                    </label>
                        <input type="file" id="inputImage" hidden />
                    </div>
                </div>
                <div >
                    <button type="submit">Submit</button>
                </div>
            </form>

Thanks

CodePudding user response：

The very first mistake is you have added different id than for

<label for="reactJs" >React Js
    <input type="checkbox" id="checkReact" name="checkReact">
    <span ></span>
</label>

Here for value is reactJs but input id is checkReact

Second mistake is same as above

<label for="input-blog-image">
    <div >Choose</div>
    <div ><i ></i></div>
</label>
<input type="file" id="inputImage" hidden />

label for value is input-blog-image but input id is inputImage

Make those changes, will work fine.

let blogs = []

function addBlog(event) {
   event.preventDefault()

   let inputName = document.getElementById("inputProjectName").value
   let inputContent = document.getElementById("inputDescription").value
   let inputImage = document.getElementById("inputImage")

   const projectDate = {

      startDate: document.getElementById("inputStartDate").value,
      endDate: document.getElementById("inputEndDate").value
   }

   image = URL.createObjectURL(image.files[0])

   let cardIcons = {
      html: document.querySelector('input[name="checkHtml"]').checked,
      css: document.querySelector('input[name="checkCss"]').checked,
      nodeJs: document.querySelector('input[name="checkNode"]').checked,
      reactJs: document.querySelector('input[name="checkReact"]').checked
   }

   let blog = {
      title: inputName,
      date: projectDate,
      content: inputContent,
      icons: cardIcons,
      image: inputImage
   }

   blogs.push(blog)

   console.table(blogs)
}

mpi-title {
    width: 100%;
    margin: 50px 0px;
    font-size: 30px;
    text-align: center;
    font-family: 'Lato', sans-serif !important;
    font-weight: 700;
}

.mpi-form-container {
    display: flex;
    justify-content: center;
}

.mpi-form {
    width: 540px;
    display: flex;
    justify-content: center;
}

.mpi-form label {
    font-size: 25px;
    font-weight: bold;
}

.mpi-form .mpi-name input,
.mpi-date input {
    width: 100%;
    height: 50px;
    padding: 5px;
    box-sizing: border-box;
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 5px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}

.mpi-date {
    flex-grow: 1;
    display: flex;
    gap: 10px;
}

.mpi-date .date-start {
    flex: 50%;
}

.mpi-date .date-end {
    flex: 50%;
}

[type="date"]::-webkit-datetime-edit {
    opacity: 0;
}

[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 100%;
}

.mpi-desc textarea {
    width: 100%;
    font-size: 20px;
    font-weight: 400;
    padding: 8px;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #c4c4c4;
    box-sizing: border-box;
    border-radius: 8px;
    height: 200px;
}

.mpi-check {
    display: flex;
    gap: 120px;
    margin: 20px 0px;
}

.mpi-check label {
    font-size: 20px;
}

.check-left {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.check-right {
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}

.check-label {
    display: block;
    position: relative;
    padding-left: 35px;
    color: #514a4a;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.check-label input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 5px 5px rgb(0 0 0 / 26%);
}

.check-label:hover input~.checkmark {
    background-color: #ccc;
}

.check-label input:checked~.checkmark {
    background-color: #2196F3;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.check-label input:checked~.checkmark:after {
    display: block;
}

.check-label .checkmark:after {
    left: 9px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.mpi-image {
    overflow: hidden;
    height: 50px;
    width: 100%;
    font-size: 20px;
    font-weight: 400;
    box-sizing: border-box;
    margin-top: 5px;
    margin-bottom: 20px;
    background: #f4f3f3;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    cursor: pointer;
    padding-right: 8px;
    box-shadow: 0 10px 10px rgb(0 0 0 / 26%);
}

.mpi-image label {
    width: 100%;
    height: 50px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mpi-choose {
    margin-top: -2px;
    border-radius: 8px;
    align-items: center;
    padding: 13px 10px 13px 10px;
    background-color: #e4e4e4;
    color: #b2abab;
}

.mpi-attach {
    padding-right: 10px;
}

.mpi-submit button {
    margin-top: 30px;
    float: right;
    padding: 10px 30px;
    border: none;
    border-radius: 25px;
    background-color: var(--btn);
    color: white;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 110px;
}

.mpi-submit button:hover {
    background-color: var(--btn-hover)
}

<form onsubmit="addBlog(event)">
   <div >
      <label for="inputProjectName">Project Name</label>
      <input type="text" id="inputProjectName">
   </div>
   <div >
      <div >
         <label for="inputStartDate">Start Date</label>
         <input type="date" id="inputStartDate">
      </div>
      <div >
         <label for="inputEndDate">End Date</label>
         <input type="date" id="inputEndDate">
      </div>
   </div>
   <div >
      <label for="inputDescription">Description</label>
      <textarea name="inputDescription" id="inputDescription"></textarea>
   </div>
   <div >
      <label for="checkTitle">Technologies</label>
      <div >
         <div >
            <div>
               <label for="checkHtml" >HTML
               <input type="checkbox" id="checkHtml" name="checkHtml"check>
               <span ></span>
               </label>
            </div>
            <div>
               <label for="checkNode" >Node Js
               <input type="checkbox" id="checkNode" name="checkNode">
               <span ></span>
               </label>
            </div>
         </div>
         <div >
            <div>
               <label for="checkCss" >CSS
               <input type="checkbox" id="checkCss" name="checkCss">
               <span ></span>
               </label>
            </div>
            <div>
               <label for="reactJs" >React Js
               <input type="checkbox" id="reactJs" name="checkReact">
               <span ></span>
               </label>
            </div>
         </div>
      </div>
   </div>
   <div>
      <label>Upload Image</label>
      <div >
         <label for="input-blog-image">
            <div >Choose</div>
            <div ><i ></i></div>
         </label>
         <input type="file" id="input-blog-image" hidden />
      </div>
   </div>
   <div >
      <button type="submit">Submit</button>
   </div>
</form>

CodePudding user response：

The problem is the wrong value for the for attribute on two label elements. These are:

<label for="reactJs" >

<label for="input-blog-image">

And the correct values would be:

<label for="checkReact" >

<label for="inputImage">