0

Eric Martin による Simple Modal フォームを使用しているときに、テキスト フィールドの値を取得する際に問題があります。は$('#pcs_'+id).val();何も返さないようです (以下の変数 _t は未定義です)。

「ポップアップ」モーダル フォームで生成される HTML パーツ:

<form><input type="text" id="pcs_25" value="1"> pcs </form> 
<a id="add_basket_25" onclick="return add2Basket(25);" class="button basket_list options_true" href="/emarket/basket/put/element/25/">add to basket</a>

JS の部分:

function add2Basket(id){

    var _t = $('#pcs_'+id).val(); 
    _t = $.trim(_t); 

    var rege = /^[\d]{1,}$/;    // numbers 
    if(rege.test(_t)){          //do something 
        var add2cartlink = $('#add_basket_'+id).attr('href'); 
        add2cartlink += _t; 
        // window.location.href = add2cartlink;
        return false;
    }  
    else {
        alert("Only numbers allowed!"); 
        return false;           
    }
}

これはモーダル フォームを超えて正常に機能し、モーダル フォーム コンテナ内でのみ問題が発生することに注意してください。

過去にそのようなことに遭遇した人はいますか？

追加$('#pcs_25').val():またはのように明示的に呼び出された場合$('#pcs_25').attr('value')、返されるのは HTML 部分にハードコードされた値、つまり です<input type="text" id="pcs_25" value="1">。テキストフィールドに手動で入力された値を無視しているようです。

解決済み: Simple Modal がフォームの入力テキスト フィールドを結果の html にコピーする前に推測する必要があったためid='pcs_25'、結果の html ページには実際には 2 つの要素がありました。そのため、jquery セレクターにはより高い精度が必要でした。 $('.simplemodal-data #pcs_'+id).val()問題を解決しました。

4

1 に答える 1

0

次の html の場合、次のように動作させることができます。

<form>
    <input type="text" id="pcs_25" value="1"> pcs  
<a id="add_basket_25" class="button basket_list options_true" href="/emarket/basket/put/element/25/">add to basket</a>
    <br/>
    <input type="text" id="pcs_26" value="1"> pcs  
<a id="add_basket_26" class="button basket_list options_true" href="/emarket/basket/put/element/26/">add to basket</a>

</form>​

次の単純化された JavaScript を使用すると、正規表現を必要とせずに開発できます。

jQuery(".button.basket_list").click(function () {
    event.preventDefault(); //stops the click from going through
    //alert(jQuery(this).prev().val());
    var amountToAdd = parseInt(jQuery(this).prev().val()); //the parseint function will sometimes strip non numeric values off from the end of the text value
    alert(amountToAdd);
    if (amountToAdd) {
            //window.location.href = jQuery(this).attr('href'); //If we still need to go somewhere
    }
    else
    {
        alert("Only numbers allowed!");
    }
});

これは、アンカー要素の前にテキスト ボックス要素を選択し、その値を操作するだけです。

こちらのサンプルを参照してください: http://jsfiddle.net/webwarrior/Lbxj6/9/

そのように動作させたくない場合は、ハイパー リンクに rel="25" を追加し、次の例のように使用します。 http://jsfiddle.net/webwarrior/L6PN5/3/

<form>
    <input type="text" id="pcs_25" value="1"> pcs  
<a id="add_basket_25" class="button basket_list options_true" href="/emarket/basket/put/element/25/" rel="25">add to basket</a>
    <br/>
    <input type="text" id="pcs_26" value="1"> pcs  
<a id="add_basket_26" class="button basket_list options_true" href="/emarket/basket/put/element/26/" rel="26">add to basket</a>

</form>

そしてJavaScript：

jQuery(".button.basket_list").click(function () {
    event.preventDefault(); //stops the click from going through
    //alert(jQuery(this).prev().val());
    var ID = jQuery(this).attr('rel');
    var amountToAdd = parseInt(jQuery(".simplemodal-data #pcs_" + ID).val()); //the parseint function will sometimes strip non numeric values off from the end of the text value
    alert(amountToAdd);
    if (amountToAdd) {
            //window.location.href = jQuery(this).attr('href'); //If we still need to go somewhere
    }
    else
    {
        alert("Only numbers allowed!");
    }
});​

h番目

于 2012-08-28T02:14:56.253 に答える