Question

这里的编程新手总是寻找一些基本的理解。

我正在开发一个带有多个复选框/下拉列表选择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（上面的几个示例），但我不知道如何“使用”该数据，存储它，按顺序请求它，并在端。

我知道这有点令人头疼，但有没有人有任何方向可以提供给我？

非常感谢！

Answer 1

虽然这是一个相当广泛的问题（Stack Overflow可能过于宽泛），但您并不需要任何复杂的事情。
您需要做的就是将数据划分为逻辑部分，根据需要隐藏和显示这些部分，并将所有内容包装在表单元素中。

我已经通过一些简单的示例代码展示了以下基本概念：

＆＃13;

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();
});

＆＃13;

<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>

＆＃13;

Answer 2

您正在寻找的是一种创建向导的方法。可以在此处找到使用jQuery的一个示例http://www.jankoatwarpspeed.com/turn-any-webform-into-a-powerful-wizard-with-jquery-formtowizard-plugin/ 您将需要编辑您的html，使其更像它所寻找的......

<!DOCTYPE HTML>

<html>
<head>
    <title></title>
    <script src="js/jquery.min.js"></script>
    <script src="js/formToWizard.js"></script>
</head>
<body>
<form id="myForm" action="register.php" method="post">
<fieldset>
<legend>Step 1</legend>
    <div class="select">
    <select id>
        <option>-</option>
        <option>2.00</option>
        <option>2.50</option>
        <option>2.75</option>
    </select>
    </div>
</fieldset>
<fieldset>
<legend>Step 2</legend>
    <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>
</fieldset>  
<script>
    $('#myForm').formToWizard();
</script>
</body>  
</html>

这个插件也有很多选项，所以请仔细阅读文档......

然后使用action / method提交表单，然后从服务器端处理该表单...

如何将信息输入一系列表格并显示该信息？

2 个答案: