农产品质量评估 - 在线评估平台

<div class='container'>
    <h1 class='center-align'>农产品质量评估</h1>
<pre><code>&lt;form id='assessment-form'&gt;
  &lt;div class='row'&gt;
    &lt;div class='input-field col s12 m6'&gt;
      &lt;input id='product-name' type='text' class='validate' required&gt;
      &lt;label for='product-name'&gt;产品名称&lt;/label&gt;
      &lt;span class='helper-text' data-error='请输入产品名称' data-success=''&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class='input-field col s12 m6'&gt;
      &lt;input id='harvest-date' type='text' class='datepicker validate' required&gt;
      &lt;label for='harvest-date'&gt;收获日期&lt;/label&gt;
      &lt;span class='helper-text' data-error='请选择收获日期' data-success=''&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class='row'&gt;
    &lt;div class='col s12'&gt;
      &lt;p&gt;请选择产品质量评级：&lt;/p&gt;
      &lt;p&gt;
        &lt;label&gt;
          &lt;input class='with-gap' name='quality-level' type='radio' value='excellent' required&gt;
          &lt;span&gt;优秀&lt;/span&gt;
        &lt;/label&gt;
      &lt;/p&gt;
      &lt;p&gt;
        &lt;label&gt;
          &lt;input class='with-gap' name='quality-level' type='radio' value='good' required&gt;
          &lt;span&gt;良好&lt;/span&gt;
        &lt;/label&gt;
      &lt;/p&gt;
      &lt;p&gt;
        &lt;label&gt;
          &lt;input class='with-gap' name='quality-level' type='radio' value='average' required&gt;
          &lt;span&gt;一般&lt;/span&gt;
        &lt;/label&gt;
      &lt;/p&gt;
      &lt;span class='helper-text red-text' data-error='请选择产品质量评级' data-success=''&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;

  &lt;div class='row'&gt;
    &lt;div class='col s12'&gt;
      &lt;button id='submitBtn' class='btn waves-effect waves-light' type='submit' name='action'&gt;提交评估
        &lt;i class='material-icons right'&gt;send&lt;/i&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/form&gt;

&lt;div id='assessment-result' class='card-panel teal lighten-2 white-text mt-4 hidden'&gt;
  &lt;h3 class='center-align'&gt;评估结果&lt;/h3&gt;
  &lt;p id='product-name-result' class='center-align'&gt;&lt;/p&gt;
  &lt;p id='harvest-date-result' class='center-align'&gt;&lt;/p&gt;
  &lt;p id='quality-level-result' class='center-align'&gt;&lt;/p&gt;
&lt;/div&gt;
</code></pre>
  </div>
  <script src='materialize.min.js'></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const elems = document.querySelectorAll('.datepicker');
      M.Datepicker.init(elems, {
        format: 'yyyy-mm-dd'
      });
    });

    const form = document.getElementById('assessment-form');
    const submitBtn = document.getElementById('submitBtn');

    form.addEventListener('submit', function(event) {
      event.preventDefault();

      const productName = document.getElementById('product-name').value;
      const harvestDate = document.getElementById('harvest-date').value;
      const qualityLevel = document.querySelector('input[name='quality-level']:checked');

      const productNameHelper = document.querySelector('label[for='product-name'] + .helper-text');
      const qualityLevelHelper = document.querySelector('label[for='product-name'] + .helper-text');

      if (!productName || !harvestDate || !qualityLevel) {
        if (!productName) {
          productNameHelper.setAttribute('data-error', '请输入产品名称');
          productNameHelper.classList.add('red-text');
        } else {
          productNameHelper.removeAttribute('data-error');
          productNameHelper.classList.remove('red-text');
        }

        if (!harvestDate) {
          M.toast({html: '请选择收获日期'});
        }

        if (!qualityLevel) {
          qualityLevelHelper.setAttribute('data-error', '请选择产品质量评级');
          qualityLevelHelper.classList.add('red-text');
        } else {
          qualityLevelHelper.removeAttribute('data-error');
          qualityLevelHelper.classList.remove('red-text');
        }

        return;
      }

      document.getElementById('product-name-result').innerText = '产品名称：' + productName;
      document.getElementById('harvest-date-result').innerText = '收获日期：' + harvestDate;
      document.getElementById('quality-level-result').innerText = '产品质量评级：' + qualityLevel.value;

      const resultSection = document.getElementById('assessment-result');
      resultSection.classList.remove('hidden');

      M.toast({html: '评估提交成功！'});
    });
  </script>
</body>
</html>