javascript - 如何将信息输入到一系列表格中并显示该信息?

标签 javascript html forms checkbox sequence

在这里寻求一些基本理解的编程新手。

我正在处理一个带有多个复选框/下拉选择 id 的项目。

例如

<!DOCTYPE HTML>

<html>
    <div class="select">
        <select id>
            <option>-</option>
            <option>2.00</option>
            <option>2.50</option>
            <option>2.75</option>
        </select>
    </div>

<div class="checkboxes">
options:
<br>
<input type="checkbox" name="option1" value="O1">O1
<br>
<input type="checkbox" name="option2" value="O2">O2
<br>
<input type="checkbox" name="option2" value="O3">O3
<br>
</div>

</html>

大约有五六个顺序。我想要做的(并且不知道如何去做)是让这五个选择是连续的(意味着有一个“开始”按钮,然后你被问到第一个问题,点击下一个,问第二个,点击下一个等等。倒数第二个按钮是“复习”,它显示你对每个问题的回答,复习中有一个“提交”按钮,它会做一个齿轮“提交......”然后最后提交)。

我知道如何布置每个不同的选择 ID(上面的几个示例),但我不知道如何“使用”该数据、存储它、按顺序请求它以及在结束。

我知道这有点让人头疼,但是有没有人可以在这里为我提供任何方向?

非常感谢!

最佳答案

虽然这是一个相当宽泛的问题(对于 Stack Overflow 来说可能太宽泛了),但您实际上并不需要任何复杂的东西。
您需要做的就是将数据划分为逻辑部分,根据需要隐藏和显示这些部分,并将所有内容包装在一个表单元素中。

我用一些简单的示例代码展示了下面的基本思想:

var options = $('.option');
//On page load, hide all options and then show the first one
options.hide().eq(0).show();

$('.move').on('click', function() {
  //Which move button did we click?
  //This allows us to avoid repeating the rest of the below logic in two separate event handlers
  var button = this.getAttribute("id");
  //Which way do we want to move?
  var direction = +1;
  if (button.localeCompare("prev") === 0) {
    direction = -1;
  }
  //Hide the option we're currently viewing
  var currentOption = $('.option:visible');
  currentOption.hide();
  //Figure out which option to show next
  var currentIndex = (options.index(currentOption));
  //Make sure that the index is limited to reasonable values (so we don't try to show options that don't exist)
  var index = Math.min(currentIndex + direction, options.length - 1);
  index = Math.max(index, 0);
  options.eq(index).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="prev" class="move" type="button" value="Prev option" />
<input id="next" class="move" type="button" value="Next option" />
<form>
  <div class="option">
    <p>Description 1</p>
    <select>
      <option>-</option>
      <option>2.00</option>
      <option>2.50</option>
      <option>2.75</option>
    </select>
  </div>
  <div class="option">
    <p>Description 2</p>
    <select>
      <option>-</option>
      <option>5.00</option>
      <option>10.00</option>
      <option>20.00</option>
    </select>
  </div>
  <div class="option">
    <p>Description 3</p>
    <select>
      <option>-</option>
      <option>50.00</option>
      <option>100.00</option>
      <option>200.00</option>
    </select>
  </div>
  <p>
    <button>Submit</button>(This submits all the options)
  </p>
</form>

关于javascript - 如何将信息输入到一系列表格中并显示该信息?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27809770/

相关文章:

javascript - 如何计算 Javascript 与 HTML 周表的周差?

javascript - Google Analytics - 如何使用 DataLayer 设置自定义变量

javascript - 如何忽略 phantomjs 中的错误

html - 元素css、html如何分离

html - 如何使用 CSS 垂直居中文本?

javascript - 如何以 angularjs 形式添加数组大小验证规则?

javascript - 我在从表单值填充新的 Javascript 数组时遇到困难

javascript - React - 我是否必须向每个输入字段添加一个 onChange 事件处理程序以使输入字段不是只读的?

javascript - 拦截 Jquery AJAX 请求以插入其他变量?

python - 如何将 jinja2 变量插入到 html 元素的属性中?