Question

在使用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;           
    }
}

请注意，这在模式形式之外工作正常，只有在Modal表单容器中才会出现问题。

过去有没有人遇到过这样的事情？

已添加：如果明确调用，例如$('#pcs_25').val()或$('#pcs_25').attr('value')，则返回的值是硬编码到HTML部分的值，即<input type="text" id="pcs_25" value="1"> 。它似乎忽略了手动输入到文本字段中的值。

已解决：我之前应该已经猜到，Simple Modal会将表单的输入文本字段复制到生成的html中，因此在生成的html页面中实际上有2个id='pcs_25'个元素。因此jquery选择器需要更高的精度。 $('.simplemodal-data #pcs_'+id).val()解决了这个问题。

Answer 1

对于以下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

jquery val（）与Eric Martin的简单模态形式

1 个答案: