Блог

Я создаю форму для веб-сайта, и она должна быть многоступенчатой. Я последовал за гидом, который показал мне путь, но, похоже, я не могу заставить его работать. Я получаю ошибки, которые я не понимаю, и я также не понимаю, что Google говорит об этих ошибках. Единственное, что, кажется, работает, — это кнопки — форма по-прежнему отлично отправляется в мою базу данных, мне просто нужно, чтобы схема была многоступенчатой-любой совет был бы очень полезен.

это делается с помощью Laravel.

Я поместил JavaScript в файл Js, но я не знаю, как его вызвать, чтобы он работал — я вообще не знаю Js.

Я удалил большинство вопросов в форме для общения

 @extends('layouts.app') @section('content') <title>Parents Checklist</title> <div class="container">  <section>  <div class="row justify-content-center">  <div class="checklist-card-size">  <div class="card">  <div class="card-body">  <br>  <form method="POST" class="checklist-form" action="/submit/parentform" multistep>  @csrf  <div class="">   <div class="form-section">  <div class="grid-container">    <h4>Cognitive</h4>    <div class="grid-labels"><label>Strongly Disagree</label></div>  <div class="grid-labels"><label>Disagree</label></div>  <div class="grid-labels"><label>Neutral</label></div>  <div class="grid-labels"><label>Agree</label></div>  <div class="grid-labels"><label>Strongly Agree</label></div>  </div>  <div class="grid-container" style="background-color: AliceBlue;" id="cog1" type="form-control">  <div><label for="cog1" class="grid-content-left">Does your child show a high level of curiosity?</label></div>  <div class="grid-item"><input type="radio" value="1" name="cog1" required></div>  <div class="grid-item"><input type="radio" value="2" name="cog1"></div>  <div class="grid-item"><input type="radio" value="3" name="cog1"></div>  <div class="grid-item"><input type="radio" value="4" name="cog1"></div>  <div class="grid-item"><input type="radio" value="5" name="cog1"></div>  </div>  <div class="grid-container" id="cog2" type="form-control">  <div><label for="cog2" class="grid-content-left">Does your child show a high-level of reasoning?</label></div>  <div class="grid-item"><input type="radio" value="1" name="cog2" required></div>  <div class="grid-item"><input type="radio" value="2" name="cog2"></div>  <div class="grid-item"><input type="radio" value="3" name="cog2"></div>  <div class="grid-item"><input type="radio" value="4" name="cog2"></div>  <div class="grid-item"><input type="radio" value="5" name="cog2"></div>  </div>  </div>   <div class="form-section">  <div class="grid-container">  <h4>Physical</h4>    <div class="grid-labels"><label>Strongly Disagree</label></div>  <div class="grid-labels"><label>Disagree</label></div>  <div class="grid-labels"><label>Neutral</label></div>  <div class="grid-labels"><label>Agree</label></div>  <div class="grid-labels"><label>Strongly Agree</label></div>  </div>  <div class="grid-container" style="background-color: AliceBlue;" id="phy17" type="form-control">  <div><label for="phy17" class="grid-content-left">Does your child show speed during physical activities (without a lot of training)?</label></div>  <div class="grid-item"><input type="radio" value="1" name="phy17" required></div>  <div class="grid-item"><input type="radio" value="2" name="phy17"></div>  <div class="grid-item"><input type="radio" value="3" name="phy17"></div>  <div class="grid-item"><input type="radio" value="4" name="phy17"></div>  <div class="grid-item"><input type="radio" value="5" name="phy17"></div>  </div>  <div class="grid-container" id="phy18" type="form-control">  <div><label for="phy18" class="grid-content-left">Does your child show strong muscle control?</label></div>  <div class="grid-item"><input type="radio" value="1" name="phy18" required></div>  <div class="grid-item"><input type="radio" value="2" name="phy18"></div>  <div class="grid-item"><input type="radio" value="3" name="phy18"></div>  <div class="grid-item"><input type="radio" value="4" name="phy18"></div>  <div class="grid-item"><input type="radio" value="5" name="phy18"></div>  </div>  </div>   <div class="form-section">  <div class="grid-container">  <h4>Social-Emotional</h4>  <div class="grid-labels"><label>Strongly Disagree</label></div>  <div class="grid-labels"><label>Disagree</label></div>  <div class="grid-labels"><label>Neutral</label></div>  <div class="grid-labels"><label>Agree</label></div>  <div class="grid-labels"><label>Strongly Agree</label></div>  </div>  <div class="grid-container" style="background-color: AliceBlue;" id="se26" type="form-control">  <div><label for="se26" class="grid-content-left">Does your child show speed during physical activities (without a lot of training)?</label></div>  <div class="grid-item"><input type="radio" value="1" name="se26" required></div>  <div class="grid-item"><input type="radio" value="2" name="se26"></div>  <div class="grid-item"><input type="radio" value="3" name="se26"></div>  <div class="grid-item"><input type="radio" value="4" name="se26"></div>  <div class="grid-item"><input type="radio" value="5" name="se26"></div>  </div>  </div>   <div class="form-section">  <div class="grid-container">  <h4>Spiritual</h4>  <div class="grid-labels"><label>Strongly Disagree</label></div>  <div class="grid-labels"><label>Disagree</label></div>  <div class="grid-labels"><label>Neutral</label></div>  <div class="grid-labels"><label>Agree</label></div>  <div class="grid-labels"><label>Strongly Agree</label></div>  </div>  <div class="grid-container" style="background-color: AliceBlue;" id="spt35" type="form-control">  <div><label for="spt35" class="grid-content-left">Does your child show speed during physical activities (without a lot of training)?</label></div>  <div class="grid-item"><input type="radio" value="1" name="spt35" required></div>  <div class="grid-item"><input type="radio" value="2" name="spt35"></div>  <div class="grid-item"><input type="radio" value="3" name="spt35"></div>  <div class="grid-item"><input type="radio" value="4" name="spt35"></div>  <div class="grid-item"><input type="radio" value="5" name="spt35"></div>  </div>  <div class="grid-container" id="spt36" type="form-control">  <div><label for="spt36" class="grid-content-left">Does your child show strong muscle control?</label></div>  <div class="grid-item"><input type="radio" value="1" name="spt36" required></div>  <div class="grid-item"><input type="radio" value="2" name="spt36"></div>  <div class="grid-item"><input type="radio" value="3" name="spt36"></div>  <div class="grid-item"><input type="radio" value="4" name="spt36"></div>  <div class="grid-item"><input type="radio" value="5" name="spt36"></div>  </div>  </div>   <div class="form-navigation">  <button type="button" class="previous btn btn-info float-left">Previous</button>  <button type="button" class="next btn btn-info float-right">Next</button>  <button type="submit" class="btn btn-sucess float-right">Submit</button>  </div>  </div>  </form>  </div>  </div>  </div>  </div>  </section>  <script type="text/javascript">  $(function() {  var $sections = $('.form-section');   function navigateTo(index) {  $sections.removeClass('current').eq(index).addClass('current');  $('.form-navigation .previous').toggle(index > 0);  var atTheEnd = index >= $sections.length - 1;  $('.form-navigation .next').toggle(!atTheEnd);  $('.form-navigation [type=sumbit]').toggle(atTheEnd);  }   function curIndex() {  return $sections.index($sections.filter('.current'));  }   $('.form-navigation .previous').click(function() {  navigateTo(curIndex() - 1);  });   $('.form-navigation .next').click(function() {  $('.checklist-form').parsley().whenValidate({  group: 'block-'   curIndex()  }).done(function() {  navigateTo(curIndex()   1);  });  });   $sections.each(function(index, section) {  $(section).find(':input').attr('data-parsley-group', 'block-'   index);  });  navigateTo(0);  });  </script> </div>  @endsection