动态添加/删除多个输入字段

发布于 2024-11-15 17:18:33 字数 1076 浏览 0 评论 0原文

我有一个表单，其中多个字段可能有多个输入，即

您的名字
您喜欢的歌曲：[添加更多！]
您喜欢的电影：[添加更多！]
显示您喜欢：[添加更多！]

我还是个新人，一直在四处寻找教程。似乎其中相当一部分倾向于只关注一个字段，并且倾向于在 javascript 中包含输入标记，这使得我似乎必须为每个不同的输入字段复制并粘贴脚本。即这个： http://muiomuio.com/web-design/add-remove-items -with-jquery

$(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;
    });
 });

有没有办法简化这个？非常感谢您的帮助！

原文

I have a form where several fields may have multiple inputs, i.e.

Your Name
Songs you like: [add more!]
Movies you like: [add more!]
shows you like: [add more!]

I'm still new and have been looking around for tutorials. It seems like quite a bit of them tend to focus on just one field and tend to have input markup in the javascript, which makes it seem like I'd have to copy and paste the script for each different input field. i.e. this one:
http://muiomuio.com/web-design/add-remove-items-with-jquery

$(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;
    });
 });

Is there a way to streamline this? Thank you so much for your help!

分享到QQ

分享到微博