如何在不刷新页面的情况下向html表单添加新字段

Question

I'm making a form for my site and basically I want to add a new field to the form if the user click on + icon.

Here's the code:

<div class='form-group'>
    <div class='form-group'>
        <label>Product Image 1:</label>
        <input type='file' name='product_img1' class='form-control my-colorpicker1'>
    </div>
</div>
<div class='form-group'>
    <div class='form-group'>
        <label>Product Image 2:</label>
        <input type='file' name='product_img2' class='form-control my-colorpicker1'>
    </div>
</div>
<div class='form-group'>
    <div class='form-group'>
        <label>Product Image 3:</label>
        <input type='file' name='product_img3' class='form-control my-colorpicker1'>
    </div>
</div>

<p>Add more images: <a href='' title='click this icon in order to add more images'><span class='glyphicon glyphicon-plus'></span></a></p> 

So if user click on this little plus sing , another field should be added to the form without refreshing the page. So the code will be this:

<div class='form-group'>
        <div class='form-group'>
            <label>Product Image 1:</label>
            <input type='file' name='product_img1' class='form-control my-colorpicker1'>
        </div>
    </div>
    <div class='form-group'>
        <div class='form-group'>
            <label>Product Image 2:</label>
            <input type='file' name='product_img2' class='form-control my-colorpicker1'>
        </div>
    </div>
    <div class='form-group'>
        <div class='form-group'>
            <label>Product Image 3:</label>
            <input type='file' name='product_img3' class='form-control my-colorpicker1'>
        </div>
    </div>
    <div class='form-group'>
        <div class='form-group'>
            <label>Product Image 4:</label>
            <input type='file' name='product_img1' class='form-control my-colorpicker1'>
        </div>
    </div>
    <p>Add more images: <a href='' title='click this icon in order to add more images'><span class='glyphicon glyphicon-plus'></span></a></p> 

So because I'm not familiar with jQuery stuff, I asked this question here, hopefully someone helped me with that. Thanks!

Answer 1

Read jQuery clone and append

 $('#add').click(function() { $('#clone-field').clone().appendTo('#form'); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="form"> <div id="clone-field"> <input type='file' name='product_img[]'> </div> </div> <br> <button id="add">Add more images</button>

Answer 2

You can create a hidden field that will count the current total fields. Then use the jquery APPEND function. see below:

 $("#addbtn").click(function(){ var next = parseInt($('#counter').val()) + 1; $("#group1").append("<div class='form-group'><div class='form-group'><label>Product Image "+next+":</label><input type='file' name='product_img"+next+"' class='form-control my-colorpicker1'></div></div>"); $('#counter').val(next); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="group1"> <div class='form-group'> <div class='form-group'> <label>Product Image 1:</label> <input type='file' name='product_img1' class='form-control my-colorpicker1'> </div> </div> <div class='form-group'> <div class='form-group'> <label>Product Image 2:</label> <input type='file' name='product_img2' class='form-control my-colorpicker1'> </div> </div> <div class='form-group'> <div class='form-group'> <label>Product Image 3:</label> <input type='file' name='product_img3' class='form-control my-colorpicker1'> </div> </div> </div> <input type="hidden" name="counter" id="counter" value="3"> <p>Add more images: <a href='#' title='click this icon in order to add more images' id="addbtn">test<span class='glyphicon glyphicon-plus'></span></a></p>

Answer 3

I think you should look at the jQuery documentation. Or you should probably see some jQuery tutorial.

In any case, since I know that jQuery can be intimidating at first, here is an updated version that does what you want to achieve: https://codepen.io/adelriosantiago/pen/KZaxdG .

Basically I added the jQuery library and this code snippet:

$('#extra-q').hide(0); //Hide the extra question

$('#add-more').off().on('click', function() { //Set the plus button click trigger
  $('#extra-q').show(0); //Show the extra question
})

Note that this does not append a new element, it only shows a hidden element. I think it is better to do so, this way your code in your backend will be easier.