0

この方法で構築された複数ステップの注文フォームがあります。

ステップ 1: ラジオ ボタンでカテゴリを選択

「次へ」ボタンは、オンクリック機能を備えた単なる画像であり、現在の div をラジオ ボタンで非表示にし、プロセスの次のステップで新しい div を表示します。

ステップ 2: テキストエリア、チェックボックス -> 動的価格

テキストエリア、動的価格、および 4 つのチェックボックスが含まれています。テキストエリアの文字数やチェックボックスの選択によって価格が変わります。そのためには、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 に答える