1

各フォーム内の特定の入力値から動的アラートを作成したいと考えています。ページに多くのフォームがあります。各アラートはわずかに異なる必要があります。カスタム メッセージを生成するために、2 つのフォーム入力値を使用しています。<input type="hidden" name="on0" value="Size">& <input type="hidden" name="on1" value="Color">. ページの最初のフォームでアラートが機能していますが、2 番目のフォームの後、アラートがそのフォームの選択された入力値と一致しません。ユーザーが操作するフォーム内でこれらの入力値の特定のインスタンスをターゲットにするにはどうすればよいですか?

これは、2 つの形式のみを示すコードの簡略化されたバージョンです 。

<form method="post" class="list1">
<input type="hidden" name="on0" value="Size">
<select name="os0">
<option value="">-- Choose a Size --</option>
<option value="Short">Short</option>
<option value=" Medium">Medium</option>
<option value=" Long">Long</option>                             
</select>
<input type="hidden" name="on1" value="Color">
<select name="os1">
<option value="">
-- Choose a Color --
</option>
<option value="ivory">ivory</option> <option value=" black"> black</option> 
</select> 
<input type="button" value="Add to Cart" class="catalog">                    
</form>
<!-- seconed form start --> 
<hr />
<form method="post" class="list2">
<input type="hidden" name="on0" value="Option">
<select name="os0">
<option value="">-- Choose a Option --</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>                             
</select>
<input type="hidden" name="on1" value="Accent Color">
<select name="os1">
<option value="">
-- Choose a Choose a Accent Color --
</option>
<option value="red">Red</option>
<option value="yellow">yellow</option> 
<option value="orange">orange</option>   
</select> 
<input type="button" value="Add to Cart" class="catalog">                    
</form>

そして私のjs

$(document).ready(function(){

    var size_x = $("input[name='on0']").val();
    var color_x = $("input[name='on1']").val();

    function popWarning() {
        if ($("select[name='os0']").val() === "") {
            alert('Please choose a ' + size_x);
            return false;
        }   
        if ($("select[name='os1']").val() === "") {
            alert('Please choose a ' + color_x);
            return false;
        }
    }
    $("input.catalog").click(function() {
        popWarning();
    });​
});
4

5 に答える 5

1

フォームを参照し、それをコンテキストとして使用します。

function popWarning(form) {

    var size_x = form.find("input[name='on0']").val();
    var color_x = form.find("input[name='on1']").val();
    var size = form.find("input[name='os0']").val();
    var color = form.find("input[name='os1']").val();

    if (size  === "") {
        alert('Please choose a ' + size_x);
        return false;
    }

    if (color === "") {
        alert('Please choose a ' + color_x);
        return false;
    }
}
$("input.catalog").click(function() {
    popWarning( $(this.form) );
});​

ボタンへの参照を渡しましょう。これが限界点のようです。

function popWarning(button) {

    var form = button.get(0).form;
    var size_x = form.find("input[name='on0']").val();
    var color_x = form.find("input[name='on1']").val();
    var size = form.find("input[name='os0']").val();
    var color = form.find("input[name='os1']").val();

    if (size  === "") {
        alert('Please choose a ' + size_x);
        return false;
    }

    if (color === "") {
        alert('Please choose a ' + color_x);
        return false;
    }
}
$("input.catalog").click(function() {
    popWarning( $(this) );
});​
于 2012-12-04T18:30:41.593 に答える
0

ページの最初のフォームでアラートが機能していますが、2 番目のフォームの後、アラートがそのフォームの選択された入力値と一致しません。

それは問題ではありません。JSFiddle をお試しになり、サイズを選択してから、カラーの [カートに追加] ボタンをクリックしてください。正しいメッセージが表示されます。問題は、クリックハンドラーが「サイズが空の場合はサイズと言い、そうでない場合は色が空の場合は色と言う」と言うことです。

イベントリスナーを書き直してclick、次のような形式でスコープします。

$('#sizeForm input.catalog').click(function(){
    var form = $(this).parents('form');
    ...
});

...等。これにより、どのフォームがクリックされたかを簡単に判断できるようになります。またはおそらく簡単です：

<input class="catalog size" ... />

$('input.catalog.size').click(function(){popWarning('size');});

...これは、単一のハンドラーですべてのフォームを処理できるように、より滑らかで動的になる可能性があります...しかし、それは質問の性質に対する答えのやり過ぎかもしれません。

ともかく。幸運を。

于 2012-12-04T18:32:24.713 に答える
0

キーワードを使用しthisて、JQuery のeach(). これらの行に沿ったもの：

  $("input.catalog").click(function() {
      form = $(this).parent();
    select = form.find("select");
      message = '';
      select.each(
          function(){
              if ($(this).val()=='') {
          number = $(this).attr("name").substr(-1);
          message+= $("input[name=on" + number + "]").val() + " ";
            }
          }
      );
      if (message!='') {
      console.log("Please select the following: " + message);
          return false;
      }
});​
于 2012-12-04T18:32:40.747 に答える
0

指定せずに、スクリプトがどのフォーム (したがって同じname属性を持つ要素) について話しているかをどのように知ることができると思いますか? 次のようなことを試してください：

$(document).ready(function(){
    function popWarning(obj) {
        var $form = $(obj).closest("form");
        var size_x = $form.find("input[name='on0']").val();
        var color_x = $form.find("input[name='on1']").val();
        var sel_os0 = $form.find("select[name='os0']");
        var sel_os1 = $form.find("select[name='os1']");
        if (sel_os0.val() === "") {
            alert('Please choose a ' + size_x);
            return false;
        }   
        if (sel_os1.val() === "") {
            alert('Please choose a ' + color_x);
            return false;
        }
    }
    $("input.catalog").click(function() {
        popWarning(this);
    });
});

作業例:

http://jsfiddle.net/7YJ63/6/

このようにして、 （渡された）を介して、クリックによってトリガーされたpopWarningから親フォームを取得できます。次に、探している要素がフォームの子孫であることがわかっているため、すべての要素/値が見つかります。input.catalogobjthisfind

于 2012-12-04T18:30:36.643 に答える
0

name の select が 2 つと name の select が 2 つos0ありos1ます。それがあなたの問題の根源です。

名前を持つ最初の DOM 要素が既に完了しているifため、最初のフォームが完了すると、ステートメントは渡されません。os0名前を似たようなものに変更し、os2独自のif条件を実行します。

于 2012-12-04T18:28:40.140 に答える