0

input box正如问题所说，如果它不包含数据（=用户没有按任何键），我如何防止添加它。

到目前为止，这是我的代码：

<script type='text/javascript'> //<![CDATA[ 
$(window).load(function(){
    $(function(){
        var scntDiv = $('#p_scents');
        var i = $('#p_scents p').size() + 1;

        $('#addScnt').live('click', function(){
            $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value"/></label><a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
            return false;
        });

        $('#remScnt').live('click', function() {
            if (i > 2) {
                $(this).parents('p').remove();
                i--;
            }
            return false;
        });
    });
}); //]]>  
</script>

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

目标是您不能添加另一个输入框，如果

<input type="text"id="p_scnt">

是空的。
我怎样才能做到这一点？

<div id="p_scents">
    <p>
        <label for="p_scnts">
            <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
        </label>
    </p>
</div>
4

4 回答 4

0

这是您的工作代码：

<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function () {
    var scntDiv = $('#p_scents');
    $('#addScnt').on('click', function () {
        if($('input:last').val()!=''){
        $('<p><label for="p_scnts_' + $('p').length + '"><input type="text" id="p_scnt" size="20" name="p_scnt_' + $('p').length + '" value="" placeholder="Input Value" /></label> <a href="javascript:void(0);" id="remScnt">Remove</a></p>').appendTo(scntDiv);        
    }else{
        alert('Input must have a value...');
    }
    });
    $('#remScnt').live('click',function () {        
        $(this).parent('p').remove();
    });
});
</script>

<h2><a href="javascript:void(0);" id="addScnt">Add Another Input Box</a></h2>

<div id="p_scents">
    <p>
        <label for="p_scnts">
            <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
        </label>
    </p>
</div>

如果您使用的是最新的 jQuery，那么您必须使用“on”而不是“live”。

小提琴演示

于 2013-06-05T08:02:26.557 回答
0

我建议检查input添加元素的容器的最后一个元素是否不为空（它具有输入的值），如果有值，则添加一个 new input，如果没有，则什么也不做。

如下所示：

$('#add').click(function(){
    var target = $('#container'),
        newLabel = $('<label />'),
        newInput = $('<input />').appendTo(newLabel);
    if (target.find('input').last().val() !== '') {
        newLabel.appendTo(target)
    }
});

JS 小提琴演示。

当然，这确实需要将input元素组合在一个公共容器中（以便找到最后一个元素）。

您发布的代码意味着您添加了多个具有相同 的元素id，这是无效的 HTML，并且会导致 JavaScript 出现问题（它只会返回它找到的第一个给定的元素id）。

于 2013-06-05T07:09:03.777 回答
0

像这样修改了您的点击功能：

$('#addScnt').live('click', function() {
    if($("#p_scents input").last().val() != ""){
        $('<p><label for="p_scnts"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
    }
});

这应该有效。它检查“p_scents” div 中的最后一个输入字段是否为空。如果它不为空，脚本将添加一个新的输入。

于 2013-06-05T07:20:27.123 回答
0

我更新了你的 jsfiddle 并在这里查看http://jsfiddle.net/QfXpE/1/

首先，使用类作为输入而不是 id。

并使用 jquery .on 点击​​事件而不是 .live，因为不推荐使用实时直播http://api.jquery.com/live/

查询

$(document).ready(function() {
 $(function() {
    var scntDiv = $('#p_scents');
    var i = 1;

    $('#addScnt').on('click', function() {
        if($('input.p_scnt_'+(i-1)).val() != ''){
            $('<p><label for="p_scnts"><input type="text" class="p_scnt_'+i+'" size="20" name="p_scnt_'+i+'" value="" placeholder="Input Value" /></label> <a href="#" id="remScnt">Remove</a></p>').appendTo(scntDiv);
            i++;
        }
        else{
            alert('Enter some data first!');
            $('input.p_scnt_'+(i-1)).focus();
        }
    });

    $('#remScnt').on('click', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });
 });

 });
于 2013-06-05T07:29:19.140 回答