0

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

第 1 步：通过单选按钮选择类别

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

第 2 步：文本区域，复选框 -> 动态价格

包含一个文本区域、一个动态价格和四个复选框。价格根据文本区域中的字符数和复选框中的选择而变化。为了做到这一点，使用了 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>
4

2 回答 2

2

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

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

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

例如，使用

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

和

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

你可以这样做（纯 JavaScript，jQuery 中的显示和隐藏显示在页面的其他位置）：

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
  }
}
于 2012-06-18T08:35:45.597 回答
0

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

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

让我知道这个是否奏效。

于 2012-06-18T08:41:42.863 回答