javascript - 提交 POST 请求的表单

Question

我有一个带有输入复选框的简单表单，带有文本区域的星级图标和提交按钮。我想循环输入复选框值。

设置评分时，会使用文本框提示用户：如果评分为 2 星或更少，​​则标签应为“有什么问题？” 如果评分为 3 星或更多星，则标签应为“您想分享任何亮点吗？”

提交后，评分和回复都应发送到虚假 API。

这就是我到目前为止所拥有的。有什么提示和建议吗？

const submitBtn = document.getElementById('submit-btn');
const form = document.getElementById('review-form');
const reviewBox = document.getElementById('review-box');
const reviewOne = document.getElementById('review-one');
const reviewTwo = document.getElementById('review-two');
const inputs = document.querySelectorAll('input[type="checkbox"]');

function checked() {

    for( let i = inputs.length - 1; i >= 0; i--) {
      return inputs[i].value;
    }

    if( inputs[4].value === '1' ) {
      reviewOne.style.display = 'block';
      reviewTwo.style.display = 'none';
    }
    else if( inputs[1].value == true) {
      reviewTwo.style.display = 'block';
      reviewOne.style.display = 'none';
    }
}

form.addEventListener('submit', submitForm);

async function submitForm(event) {

  event.preventDefault();

  const reviewBox = document.getElementById('review-box');
  const inputs = document.querySelectorAll('input[type="checkbox"]');

  for( let i = inputs.length - 1; i >= 0; i--) {
    return inputs[i].value;
  }

  await fetch('http://localhost:3000/reviews', {
    method: 'POST',
    body: JSON.stringify({
    id: ' ',
    productId: ' ',
    rating: inputs[i].value,
    comment: reviewBox.value
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
  })
  .then((response) => response.json())
  .then((data) => console.log(data));

  submitBtn.disabled = true;

}

 #review-card {
      position: absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
      background: $color-overlay;
      display: none;
      justify-content: flex-end;
      align-items: center;
      #review-form {
        width:90%;
        margin: 0 auto;
        .star-ratings {
          direction: rtl;
          display: block;
          text-align: center;
          padding:20px;
          input[type=checkbox] {
            display: none;
            &:checked {
              ~ {
                label  {
                  color: $color-white;
                }
              }
            }
          }
          label {
            color: #3e3e3e;
            font-size: 32px;
            padding: 0px 8px 10px 0px;
            cursor: pointer;
            transition: all .3s ease-in-out;
            &:hover {
              color: $color-white;
              ~ {
                label {
                  color: $color-white;
                }
              }
            }
          }
        }
        .review-content {
          border-radius:8px;
          background-color: $color-white;
          padding:10px;
          .comment-one {
            border:none;
            resize: none;
            &:focus-visible {
              outline:none;
            }
          }
          #review-two {
            display: none;
            .comment-two {
              border:none;
              resize: none;
              &:focus-visible {
                outline:none;
              }
            }
          }
        }
        #submit-btn {
          margin: 73px 0 32px 0;
          padding:24px 66px;
          color: $color-black;
          font-weight: $font-weight-bold;
          font-size:24px;
          background-color: $color-white;
          border-radius: 33px;
          border: $color-border;
          cursor: pointer;
          @media only screen and (min-width: $breakpoint-tablet) {
                margin: 73px auto 32px auto;
                padding:12px 33px;
                font-size:18px;
            }
          &:disabled {
            color: lightgray;
            background-color: #eeeedd;
            // border-color: (rgba(118, 118, 118, 0.3), rgba(195, 195, 195, 0.3));
          }
        }
      }
      .spinner {
        // display: inline-block;
        font-size:24px;
        display: none;
        position:absolute;
        inset: 82% 47%;
      }
      .check {
        display:none;
        font-size:24px;
        // display: inline-block;
        position: absolute;
        inset:82% 47%;
      }
      .uncheck {
        display:none;
        font-size:24px;
        // display: inline-block;
        position: absolute;
        inset:82% 47%;
      }
    }

 <form method="POST" id="review-form">
              <div class="star-ratings">
                <input type="checkbox" name="star-five" id="star-five" value="5">
                <label for="star-five">
                  <i class="active fas fa-star star-outline" aria-hidden="true"></i>
                </label>
                <input type="checkbox" name="star-four" id="star-four" value="4">
                <label for="star-four">
                  <i class="active fas fa-star star-outline" aria-hidden="true"></i>
                </label>
                <input type="checkbox" name="star-three" id="star-three" value="3">
                <label for="star-three">
                  <i class="active fas fa-star star-outline" aria-hidden="true"></i>
                </label>
                <input type="checkbox" name="star-two" id="star-two" value="2">
                <label for="star-two">
                  <i class="active fas fa-star star-outline" aria-hidden="true"></i>
                </label>
                <input type="checkbox" name="star-one" id="star-one" value="1">
                <label for="star-one" id="label">
                  <i class="active fas fa-star star-outline" aria-hidden="true"></i>
                </label>
              </div>
              <div class="review-content">
                <div id="review-one">
                  <label for="title">What's wrong with it?</label>
                  <textarea id="review-box" class="comment-one" name="comment-one" rows="5" placeholder="I didn't like the fact that it was..."></textarea>
                </div>
                <div id="review-two">
                  <label for="title">Any highlight you would like to share?</label>
                  <textarea  id="review-box" class="comment-two" name="comment-two" rows="5" placeholder="Let us know your thougths"></textarea>
                </div>
              </div>
              <div>
                <button id="submit-btn" type="submit" disabled>Submit</button>
                <div class="spinner"><i class="fas fa-circle-notch fa-spin"></i></div>
                <div class="check"><i class="fas fa-check"></i></div>
                <div class="uncheck"><i class="fas fa-times"></i></div>
              </div>
            </form>

标签： javascriptapiloops