如何停止使用jQuery获取文本字段的重复值？_Jquery_Html_Forms_Validation

如何停止使用jQuery获取文本字段的重复值？

jquery html forms validation

如何停止使用jQuery获取文本字段的重复值？,jquery,html,forms,validation,Jquery,Html,Forms,Validation,代码 $（文档）.ready（函数（）{ $（“#添加#变体”）。单击（函数（）{ var tag_val=$（“#物料_输入”）.val（）； //检查是否已添加标签 $（“#添加_区域_结果”）。每个（函数（）{ if（$（this）.text（）==标记值）{ 警报（“再次出现相同值”）；返回false； }否则{ //插入标签 $（“#添加#区域#结果”）。添加（“”+标记#val+”）。附加到（“#添加#区域#结果”）； } }); }); }); 使用下面的代码。也许对你有

代码


$（文档）.ready（函数（）{
$（“#添加#变体”）。单击（函数（）{
var tag_val=$（“#物料_输入”）.val（）；
//检查是否已添加标签
$（“#添加_区域_结果”）。每个（函数（）{
if（$（this）.text（）==标记值）{
警报（“再次出现相同值”）；
返回false；
}否则{
//插入标签
$（“#添加#区域#结果”）。添加（“”+标记#val+”）。附加到（“#添加#区域#结果”）；
}
});
});
});

使用下面的代码。也许对你有帮助

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("#add_variation").click(function(){
        var tag_val = $("#materials_input").val();

        // check if tag already added
        $("#adding_area_result").each(function() {
            if($(this).text() == tag_val){
                alert("same value again");
                return false;   
            }else{              
                // insert tags
        $("#adding_area_result").add('<li><span rel="variation_area" class="variation1_tag">'+tag_val+'</span><input type="hidden" name="variation1[]" id="variation1" value="'+tag_val+'" /></li>').appendTo("#adding_area_result");   
            }
        });


    });
});
</script>

</head>
<body>
<br>

<input type="text" maxlength="2048" class="text" name="materials_input" id="materials_input" />
<br>
<br>
<input type="button" value="Add" class="button-medium" id="add_variation" />
<div id="adding_area_result">

</div>
</body>
</html>


$（文档）.ready（函数（）{
$（“#添加#变体”）。单击（函数（）{
var tag_val=$（“#物料_输入”）.val（）；
//检查是否已添加标签
var检查值=“”；
$（“.adding_area_result li span”）。每个（函数（）{
if（$（this）.text（）==标记值）{
警报（“再次出现相同值”）；
检查_val='1'；
}
});
如果（检查值=“”）
{
$（“.adding_area_result”）.append（“”+tag_val+”）；
}
$（“#物料#输入”）.attr（'值'，''；
返回true；
});
});

除了评论者指出的其他问题外，您还将html添加到

#添加_区域_结果

两次。

add

方法和

appendTo

方法都会向所选元素添加html，因此您只需要一个。您可以像这样使用

append

方法：

        <!DOCTYPE html>
    <html>
    <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("#add_variation").click(function(){
        var tag_val = $("#materials_input").val();
        // check if tag already added

        var check_val ='';
        $(".adding_area_result li span").each(function() {
            if($(this).text() == tag_val){
                alert("same value again");
                check_val = '1';
            }
        });
            if(check_val == '')
            {
                $(".adding_area_result").append('<li><span rel="variation_area" class="variation1_tag">'+tag_val+'</span><input type="hidden" name="variation1[]" id="variation1" value="'+tag_val+'" /></li>');   
            }
            $("#materials_input").attr('value','');
    return true;


        });
    });
    </script>

    </head>
    <body>
    <br>

    <input type="text" maxlength="2048" class="text" name="materials_input" id="materials_input" value=""/>
    <br>
    <br>
    <input type="button" value="Add" class="button-medium" id="add_variation" />
    <ul class="adding_area_result">

    </ul>
    </body>
    </html>

$（“#添加_区域_结果”）。追加（“”+标记_val+””）

发生这种情况的原因是，当您调用.text（）时，它返回的文本周围有空白，这是由周围的HTML造成的，导致匹配失败。您可以向内部span标记添加一个类，然后使用该类来获取文本以进行比较

下面是一个JSFIDLE演示：

具体变化是：

$("#adding_area_result").append('<li><span rel="variation_area" class="variation1_tag">'+tag_val+'</span><input type="hidden" name="variation1[]" id="variation1" value="'+tag_val+'" /></li>')

然后将“tag”类添加到注入的HTML中。

修改代码，使用当前元素的数量为隐藏元素插入新id。这是一个非常详细的示例，您可以将其重构为更简洁的示例

if($(this).find(".tag").text() == tag_val)
{
    alert("same value again");
    return false;   
}

函数addNewElement（newIndex，tag_val，element）{
元素。追加（“”+tag_val+”）；
}
$（“#添加#变体”）。在（'单击'，函数（）{
var tag_val=$（“#物料_输入”）.val（）；
var组=$（“.adding_area_result”）；
var newIndex=group.find（'.variation1_标记'）.length？group.find（'.variation1_标记'）.length+1:0；
var isDuplicate=假；
//添加一个新的
如果（新索引）{
group.find（'.variation1_标记'）。each（函数（）{
if（$（this）.text（）==标记值）{
isDuplicate=真；
}
});
}
如果（！isDuplicate）{
addNewElement（新索引、标记值、组）；
}
});

回答。。。。编辑：也许你应该写一些你尝试过的东西，而不是仅仅发布你的代码。请澄清“停止获取文本字段的重复值”以及你的意思，因为这可能意味着很多事情。在具有唯一ID的div上运行

each（）

循环有什么意义？为什么不直接执行

$（“#添加_区域_结果”）.val（）

？我的代码的问题是，当我在文本字段中输入一些内容并两次单击“添加”按钮时，它会插入重复的值。那么，您的代码对于

无效。添加

，因为您无法通过

id=“variation1”添加重复的元素

因为这违反了HTML规范。@mun..您的代码只在第一次工作，如果我第二次输入该值，那么它将不会验证。您检查了代码吗？它不工作。现在请检查。。现在开始工作了。有一点我弄错了非常感谢你Kishan.你的代码正是我想要的。谢谢你..你很好...）你能给我完整的工作代码吗？我撤销了更改，应该可以正常工作。不，它不能正常工作，你检查了吗？我的错，我忘了检查每一个的重复项。参见修订后的代码。示例：-此处的版本稍好一些：

function addNewElement(newIndex, tag_val, element) {
    element.append('<li><span rel="variation_area" class="variation1_tag">' + tag_val + '</span><input type="hidden"  id="variation' + newIndex + '" value="' + tag_val + '" /></li>');
}
$("#add_variation").on('click', function () {
    var tag_val = $("#materials_input").val();
    var group = $(".adding_area_result");
    var newIndex = group.find('.variation1_tag').length ? group.find('.variation1_tag').length + 1 : 0;
    var isDuplicate = false;
    // add a new one
    if (newIndex) {
        group.find('.variation1_tag').each(function () {
            if ($(this).text() === tag_val) {
                isDuplicate = true;
            }
        });
    }
    if (!isDuplicate) {
        addNewElement(newIndex, tag_val, group);
    }
});