Generating form fields using jquery

Question

I have a pretty basic form that allow user to post simple classified ads. It looks like this:

<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>

I would like to allow the visitor to post more ads then one via "Add More Ads" button/link which would generate same 3 fields as much times as visitor needs ads.

What would be the simplest solution to do this? Any help/guide would be great! Thanks!

P.S Also it would be great if the user could also remove the fields if he doesnt need them

Wrap the fields in a div and append the same div every time add more ads is clicked — Pardeep Poria
– Pardeep Poria, Commented Jun 2, 2016 at 10:51
Good idea, but what happens if the user fills the form and click on "Add More Ads"? Wouldnt that make the same form appear twice? — Vlidurno
– Vlidurno, Commented Jun 2, 2016 at 10:56
Yes, that will allow users to add more fields as well as more data.Also use the input names as array — Pardeep Poria
– Pardeep Poria, Commented Jun 2, 2016 at 10:59

Parvez Rahaman · Accepted Answer · 2016-06-02 11:43:27Z

Try this.

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

    <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>

This one works like a charm, but would it be possible to add a "remove" button if user changes his mind and wants to remove fields he added?
Update your question, i will update my javascript beacuse code in comment won't be nice.

Mohammad · Accepted Answer · 2016-06-02 11:15:17Z

You can set inputs in <div class="row"> then copy first row class.

$("#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>

Thanks a million dude! If i may, 2 questions :D Is it possible to add new fileds but make them blank? In this case, if the user fills the form and click on "Add" he gets new form but with previously added data... Also, is it possible to add a remove button under the each form? Sorry for all the questions...
Sure thing, but just one thing. Is it possible to copy a blank fields when user clicks on "Add". Currently, if user types something in first fields and click "Add" he gets fields with the same content in them

Collectives™ on Stack Overflow

Generating form fields using jquery

2 Answers 2

2 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related