Question

我正在制作Carousel表格，并希望在达到界限时多用途控制按钮。原始状态具有Previous和Next的预期操作。当通过单击下一个按钮到达最终视图时，我正在检查视口的当前位置，并使用这段代码将按钮转换为提交，

这是我正在操作的HTML，它只是一个输入按钮，

<input type="button" id="next" value="Next">

随附的jQuery从EventHandler中为输入启动。

if (trigger == "next") {
  console.log("Current: " + currentPosition);
  if (currentPosition > MIN_BOUND) {
    currentPosition -= FORM_WIDTH;
    if (currentPosition == MIN_BOUND) {
      $("#next").attr("type", "submit");
      $("#next").val("Submit");
    }
  }
}

这个动作正在按照我的预期行事，但另外它也提交了表格，这是我没想到的。我很好奇为什么会发生这种情况。

编辑：暂且不谈。使用旋转木马作为表格不是我想过的，我的主管建议我开发这个。我最初的意图是长形式或仅使用ajax调用来动态存储信息和交换内容。 “旋转木马形式”是一个好主意吗？我不记得自己碰到了他们。我确实预先装好了所有东西，因为它感觉非常快，而且我知道对我有什么期望，从UX的角度来看，进度条有所帮助。

Answer 1

在更改按钮类型之前点击完成：

if (currentPosition == MIN_BOUND) {
  setTimeout(function(){
    $("#next").attr("type", "submit");
    $("#next").val("Submit");
  }, 10);
}

Answer 2

只需要防止默认行为。一个简单的解决方案，但我认为不会起作用，因为我相信它也会阻止提交按钮的默认行为，但事实并非如此。

    if (currentPosition == MIN_BOUND) {
      event.preventDefault();
      $("#next").attr("type", "submit");
      $("#next").val("Submit");
    }

允许我在状态转换期间阻止默认提交，但在下次单击期间也保留了提交按钮功能，因为只有在更改期间才会阻止默认行为。

我找不到类似的问题来比较这个事件序列，所以希望这个解决方案尽可能简单，对我以外的人有益。

使用jQuery将输入按钮转换为提交按钮会触发提交事件

2 个答案: