Question

我有一个以这种方式构建的多步订单：

步骤1：通过单选按钮

选择类别

“下一步”按钮只是一个具有onclick功能的图像，使用单选按钮隐藏当前div，并在此过程的下一步显示一个新div。

第2步：Textarea，复选框 - ＆gt;动态价格

包含textarea，动态价格和四个复选框。价格会根据textarea中的字符数和复选框中的选项而变化。使用JQuery脚本来执行此操作。同样，“下一步”按钮只是一个图像，在激活onclick函数时会隐藏当前div，并显示包含表单中下一步的div。

第3步：个人资料

这是我的问题。这里用户插入名称，电子邮件等。 “下一步”按钮再次只是一个图像，在激活onclick功能时隐藏当前div并显示包含下一步的div。如何在此步骤中创建表单字段，以便允许用户前进到下一步。我隐藏和显示div的代码如下：

<script type="text/javascript">
    function toggleDiv(id, flagit) {
        if (flagit == "1") {
            if (document.layers) document.layers[''+id+''].visibility = "show"
            else if (document.all) document.all[''+id+''].style.visibility = "visible"
            else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "visible"
        }
        else`if (flagit == "0") {
            if (document.layers) document.layers[''+id+''].visibility = "hide"
            else if (document.all) document.all[''+id+''].style.visibility = "hidden"
            else if (document.getElementById) document.getElementById(''+id+'').style.visibility = "hidden"`
        }
    }
    //-->
</script>

Answer 1

这是一段可怕的（也是错误的）旧代码。

这是一个实际上仍处理Netscape4（图层部分）的更新

您需要向我展示您切换的脚本的其余部分。您需要添加验证那部分，而不是切换。

例如，使用

<form onsubmit="return validate(this)">

和

<input type="image" src="next.png" />

你可以这样做（纯JavaScript，jQuery中的show和hide在页面的其他地方显示）：

var currentStep=1;
function toggleDiv(id,flagit) {
  if (document.getElementById) document.getElementById(id).style.visibility = (flagit)?"visible":"hidden";
  else if (document.all) document.all(id).style.visibility = (flagit)?"visible":"hidden";
  else if (document.layers) document.layers[id].visibility = (flagit)?"show":"hide";
}
function validate(theForm) {
  if (currentStep == 1)  {
    if (theForm.category.value....) {
      alert("Error in category");
      return false;
    }
    currentStep++;
    toggleDiv("part1",0);
    toggleDiv("part2",1);
    return false; // do not submit
  }
  if (currentStep == 2)  {
    if (theForm.price.value....) {
      alert("Error in price");
      return false
    }
    currentStep++;
    toggleDiv("part2",0);
    toggleDiv("part3",1);
    return false; // do not submit
  }
  if (currentStep == 3)  {
    if (theForm.name.value....) {
      alert("Error in name");
      return false
    }
    return true; // submit
  }
}

Answer 2

好吧，既然你已经用jQuery标记了你的问题，为什么不实际使用它并让jquery处理所有特定于平台的问题。

function toggleDiv(id,flagit) {
    if( flagit ) {
       $("#"+id).show();
    } else {
       $("#"+id).hide();
    }
}

让我知道这是否有效。

验证序列中的表单字段

2 个答案: