Question

我有一个非常基本的表单，允许用户发布简单的分类广告。它看起来像这样：

<form action="">
    <fieldset>
        <h3>Personal Informations</h3>
        <input type="text" placeholder="Your Name">
        <input type="text" placeholder="Your Address">
    </fieldset>

    <fieldset>
        <h3>Car Informations</h3>

        <input type="text" placeholder="Manufacturer">
        <input type="text" placeholder="Model">     
        <input type="text" placeholder="Year">

        <a href="#">Add More Ads</a>

    </fieldset>
</form>

我想允许访问者发布更多广告然后通过＆＃34;添加更多广告＆＃34;按钮/链接可以生成与访问者需要的广告相同的3个字段。

这样做最简单的解决方案是什么？任何帮助/指导都会很棒！谢谢！

P.S如果用户也可以删除字段，如果他不需要它们，那就太棒了

Answer 1

试试这个。

＆＃13;

$('#addMOre').on('click',function(){
  var self = $('.apendable').first().clone().insertAfter(".apendable:last");
  $('.apendable:last input').val('');
  self.append('<button class="close-info">close</button>');
  $('.close-info').on('click', function(){
     $(this).parent().remove();
  })
})

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <form action="">
            <fieldset>
                <h3>Personal Informations</h3>
                <input type="text" placeholder="Your Name">
                <input type="text" placeholder="Your Address">
            </fieldset>
        
            <fieldset id="info">
                <h3>Car Informations</h3>
                <div class="apendable">
                <input type="text" placeholder="Manufacturer">
                <input type="text" placeholder="Model">     
                <input type="text" placeholder="Year">
                </div>
                <a href="#" id="addMOre">Add More Ads</a>
        
            </fieldset>
        </form>

＆＃13;

Answer 2

您可以在input中设置<div class="row">，然后再复制row课程。

$("#addAdsFiels").click(function(){
    var clone = $(this).siblings(".row:first").clone();
    $(clone).find("input").val("");
    $(this).before(clone);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
    <fieldset>
        <h3>Personal Informations</h3>
        <input type="text" placeholder="Your Name">
        <input type="text" placeholder="Your Address">
    </fieldset>

    <fieldset>
        <h3>Car Informations</h3>
        <div class="row">
            <input type="text" placeholder="Manufacturer">
            <input type="text" placeholder="Model">     
            <input type="text" placeholder="Year">
        </div>
        <a href="#" id="addAdsFiels">Add More Ads</a>
    </fieldset>
</form>

使用jquery生成表单字段

2 个答案: