Блог

Я хочу проверить многостраничную форму с помощью Js. Вот каким я хочу видеть код, когда я нажимаю «далее», я хочу, чтобы он проверял, был ли установлен переключатель или нет. Если нет, то отобразите всплывающее окно с предупреждением. Многостраничная форма уже работает, но проблема здесь в том, что я не могу проверить переключатель на каждой странице.

Надеюсь, кто-нибудь может помочь мне решить эту проблему, так как я уже несколько дней пытаюсь решить эту проблему, но я не знаю, как это сделать. Заранее спасибо.

HTML

 lt;form class="form" action="" method="post"gt;  lt;!-- Progress bar --gt;  lt;div class="progressbar"gt;  lt;div class="progress" id="progress"gt;lt;/divgt;   lt;div class="progress-step progress-step-active" data-title="DEPARTMENT"gt;lt;/divgt;  lt;div class="progress-step" data-title="BLOCK"gt;lt;/divgt;  lt;div class="progress-step" data-title="TITLE"gt;lt;/divgt;  lt;div class="progress-step" data-title="DESCRIPTION"gt;lt;/divgt;  lt;div class="progress-step" data-title="DONE"gt;lt;/divgt;  lt;/divgt;   lt;!-- start Steps 1--gt;  lt;div class="form-step form-step-active"gt;  lt;br/gt;  lt;div class="page-header"gt;  lt;h1gt;First, choose one department that is related to the complaint you are about to make.  lt;span style="color:#ffef96; font-size:15px;"gt;lt;br/gt;  lt;pgt;Click any department for hintlt;/pgt;  lt;/spangt;  lt;/h1gt;  lt;br/gt;   lt;div class="radio-toolbar"gt;  lt;input type="radio" id="radio1" name="cdepartment" class="hint" value="GENERAL" required/gt;  lt;label for="radio1"gt;GENERAL  lt;span class="hintclick"gt; e-Aduan UiTM used for  lt;span style="color:#ffef96"gt;general complaints about UiTM.lt;/spangt;  lt;/spangt;  lt;/labelgt;   lt;input type="radio" id="radio2" name="cdepartment" class="hint" value="FACILITIES"/gt;  lt;label for="radio2"gt;FACILITIES  lt;span class="hintclick"gt;For  lt;span style="color:#ffef96"gt;electrical, mechanical, telecommunications, event management.lt;/spangt;  lt;/spangt;  lt;/labelgt;   lt;input type="radio" id="radio3" name="cdepartment" class="hint" value="ICT"/gt;  lt;label for="radio3"gt;ICT  lt;span class="hintclick"gt;e-Aduan ICT used for  lt;span style="color:#ffef96"gt;ICT complaints lt;/spangt;  lt;/labelgt;  lt;/divgt;   lt;br/gt;  lt;/divgt;lt;!-- page header--gt;   lt;div class="width-50 ml-auto" gt;  lt;a href="#" class="btn btn-next"gt;NEXTlt;/agt;  lt;/divgt;  lt;/divgt;   lt;!-- end Steps 1 --gt;   lt;!-- start Steps 2 --gt;  lt;div class="form-step"gt;  lt;br/gt;  lt;div class="page-header"gt;  lt;h1gt;Second, which block do you wish to complaint about?lt;/h1gt;  lt;br/gt;   lt;div class="radio-toolbar"gt;  lt;div class="grid-container"gt;  lt;?php  $count=4;  $sql="SELECT * FROM `block`";  $result=mysqli_query($connection,$sql);   while($std=mysqli_fetch_array($result))  {  ?gt;  lt;input type="radio" id="lt;?php echo $std['bid'];?gt;" name="cblock" value="lt;?php echo $std['blockname'];?gt;" required/gt;  lt;label for="lt;?php echo $std['bid'];?gt;"gt;lt;?php echo $std['blockname'];?gt;lt;/labelgt;  lt;br/gt;  lt;?php }?gt;  lt;/divgt;  lt;/divgt;   lt;/divgt; lt;!-- page header--gt;   lt;div class="btns-group width-50 ml-auto"gt;  lt;a href="#" class="btn btn-prev"gt;PREVIOUSlt;/agt;  lt;a href="#" class="btn btn-next"gt;NEXTlt;/agt;  lt;/divgt;  lt;/divgt;  lt;!-- end Steps 2 --gt;   lt;!-- start Steps 3 --gt;  lt;div class="form-step"gt;  lt;br/gt;  lt;div class="page-header"gt;  lt;h1gt;Third, pick a title or topic  lt;span style="color:#ffef96; font-size:15px;"gt;lt;br/gt;  lt;pgt;If your related toppic is not listed, please fill in below text box instead.lt;/pgt;  lt;/spangt;  lt;/h1gt;  lt;br/gt;   lt;div class="radio-toolbar"gt;  lt;input type="radio" id="radioApple" name="radioFruit" value="apple" required/gt;  lt;label for="radioApple"gt;Applelt;/labelgt;   lt;input type="radio" id="radioBanana" name="radioFruit" value="banana"/gt;  lt;label for="radioBanana"gt;Bananalt;/labelgt;   lt;input type="radio" id="radioOrange" name="radioFruit" value="orange"/gt;  lt;label for="radioOrange"gt;Orangelt;/labelgt;  lt;/divgt;   lt;div class="input-group"gt;  lt;textarea type="text" class="form-control" row="5" name="cdescription" placeholder="Write here.." required/gt;lt;/textareagt;  lt;/divgt;   lt;br/gt;  lt;/divgt;   lt;div class="btns-group width-50 ml-auto"gt;  lt;a href="#" class="btn btn-prev"gt;PREVIOUSlt;/agt;  lt;a href="#" class="btn btn-next"gt;NEXTlt;/agt;  lt;/divgt;  lt;/divgt;  lt;!-- end Steps 3 --gt;   lt;!-- start Steps 4 --gt;  lt;div class="form-step"gt;  lt;div class="page-header"gt;  lt;h1gt;Lastly, state your description regarding the complaint made  lt;span style="color:#ffef96; font-size:15px;"gt;lt;br/gt;  lt;pgt; Below box you can write any notes about the complaint so the staff can help to understandlt;/pgt;  lt;/spangt;  lt;/h1gt;  lt;br/gt;   lt;div class="input-group"gt;  lt;textarea type="text" class="form-control" row="5" name="cdescription" placeholder="Write here.." required/gt;lt;/textareagt;  lt;/divgt;    lt;/divgt;   lt;div class="btns-group width-50 ml-auto"gt;  lt;a href="#" class="btn btn-prev"gt;PREVIOUSlt;/agt;  lt;button class="btn" type="submit" name="submit"gt;SUBMITlt;/buttongt;  lt;/divgt;  lt;/divgt;  lt;!-- end Steps 4 --gt;   lt;!-- start Steps 5 --gt;  lt;div class="form-step"gt;  lt;div class="page-header"gt;  lt;h1gt;THANK YOU lt;br/gt;  YOU CAN SEE RECENT COMPLAINT ON YOUR HOMEPAGE  lt;/h1gt;  lt;/divgt;  lt;!-- end Steps 5 --gt;  lt;/formgt;  

CSS

 :root {  --primary-color: rgb(165, 121, 64); }  *, *::before, *::after {  box-sizing: border-box; }  .width-50 {  width: 30%; }  .ml-auto {  margin-left: auto; }   /* Progressbar */ .progressbar {  position: relative;  display: flex;  justify-content: space-between;  counter-reset: step;  margin: 2rem 4rem; }  .progressbar::before, .progress {  content: "";  position: absolute;  top: 50%;  transform: translateY(-50%);  height: 4px;  width: 100%;  background-color: #dcdcdc;  z-index: -1; }  .progress {  background-color: var(--primary-color);  width: 0%;  transition: 0.3s; }  .progress-step {  width: 2.1875rem;  height: 2.1875rem;  background-color: #dcdcdc;  border-radius: 50%;  display: flex;  justify-content: center;  align-items: center; }  .progress-step::before {  counter-increment: step;  content: counter(step); }  .progress-step::after {  content: attr(data-title);  position: absolute;  top: calc(100%   0.5rem);  font-size: 0.85rem;  color: #666; }  .progress-step-active {  background-color: var(--primary-color);  color: #f3f3f3; }  /* Form */ .form {  width: 80%;  margin: 30px auto;  border: 1px solid #ccc;  border-radius: 0.35rem;  padding: 1.5rem; box-shadow:  4px 4px 4px 0px #d1d9e6 inset,  -4px -4px 4px 0px #ffffff inset; }  .form-step {  display: none;  transform-origin: top;  animation: animate 0.5s; }  .form-step-active {  display: block; }  .input-group {  margin: 2rem 0; }  @keyframes animate {  from {  transform: scale(1, 0);  opacity: 0;  }  to {  transform: scale(1, 1);  opacity: 1;  } } .row{  height:100%;  width: 50px; } /* Button */ .btns-group {  display: grid;  grid-template-columns: repeat(2, 1fr);  gap: 1.5rem; }  .btn {  padding: 16px;  display: block;  text-decoration: none;  background-color: rgba(0, 0, 0, 0.2);  color: #f3f3f3;  text-align: center;  border-radius: 0.25rem;  cursor: pointer;  transition: 0.3s;  border-radius: 15px 25px;  box-shadow: 5px 8px 10px #888888; } .btn:hover {  box-shadow: 0 0 0 2px #fff, 0 0 0 3px ;  color: #f3f3f3; } /* end progress bar*/  .radio-toolbar {  margin-left: 10px;  text-align: center; }  .radio-toolbar input[type="radio"] {  opacity: 0;  position: fixed;  width: 0; }  .radio-toolbar label {  display: inline-block;  background-color: #f0efef;  padding: 10px;  font-size: 18px;  border: 3px solid #444;  border-radius: 4px;  width: 300px;  height:auto; }  .radio-toolbar label:hover {  background-color: #c2d4dd;  cursor: pointer; }  .radio-toolbar input[type="radio"]:focus   label {  border: 2px dashed #f0efef; }  .radio-toolbar input[type="radio"]:checked   label {  background-color:#a57940;  border-color: #c2d4dd; }  /* end radio button*/  .hint, label .hintclick {  display: none;  opacity: 0; }  .hint:checked  label .hintclick {  display: block;  opacity: 1;  font-size: 17px;  color: white; }  .grid-container {  display: grid;  grid-template-columns: auto auto auto auto auto auto auto auto ; }  .grid-container gt; label {  width: 100%; }  

JS

 const prevBtns = document.querySelectorAll(".btn-prev"); const nextBtns = document.querySelectorAll(".btn-next"); const progress = document.getElementById("progress"); const formSteps = document.querySelectorAll(".form-step"); const progressSteps = document.querySelectorAll(".progress-step");  let formStepsNum = 0;  nextBtns.forEach((btn) =gt; {  btn.addEventListener("click", () =gt; {  formStepsNum  ;  updateFormSteps();  updateProgressbar();  }); });  prevBtns.forEach((btn) =gt; {  btn.addEventListener("click", () =gt; {  formStepsNum--;  updateFormSteps();  updateProgressbar();  }); });  function updateFormSteps() {  formSteps.forEach((formStep) =gt; {  formStep.classList.contains("form-step-active") amp;amp;  formStep.classList.remove("form-step-active");  });   formSteps[formStepsNum].classList.add("form-step-active"); }  function updateProgressbar() {  progressSteps.forEach((progressStep, idx) =gt; {  if (idx lt; formStepsNum   1) {  progressStep.classList.add("progress-step-active");  } else {  progressStep.classList.remove("progress-step-active");  }  });   const progressActive = document.querySelectorAll(".progress-step-active");   progress.style.width =  ((progressActive.length - 1) / (progressSteps.length - 1)) * 100   "%"; }