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()or $('#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!");
    }
});​

hth

于 2012-08-28T02:14:56.253 回答