CODEWITHSUNDEEP
jqueryfile-uploadinput
Pooshonk
Pooshonk

Reputation: 1324

Clear last file input onclick

I have a form with a file input and 2 text boxes. All 3 inputs can be duplicated if more than one file needs to be uploaded. I am trying to add a clear button at the end of every div that will allow the user to clear the value of the file input. But for the life of me I cannot get it to work.

I am trying to use .last() but it doesn't seem to be selecting the last file input once the div has been duplicated.

My code is below.

<div class="certificates_list">
    <input type="file" name="user_certificates[]" class="user_certificate" />
    <input type="text" name="certificate_name[]" class="right certificate_name" placeholder="Certificate name" />
    <input type="text" name="expiry_date[]" class="expiry_date" placeholder="DD/MM/YYYY" />
    <button class="clear_certificate">Clear</button>
</div>

$(function() {
    $('.clear_certificate').click(function(event) {
    event.preventDefault();
    $('input[type="file"].user_certificate').last().val('');

    });
});

If I just have one div with inputs it clears it fine. Once the div has been duplicated the previous div won't clear anymore.

Any ideas? Thank you for any help, much appreciated!

EDIT

I have created a jsfiddle with my problem, hope this helps

Upvotes: 0

Views: 709

Answers (3)

Atrox111
Atrox111

Reputation: 527

HTML-CODE:

<div class="certificates_list">
    <input type="file" name="user_certificates[]" class="user_certificate" id="user_certificate_0" />
    <input type="text" name="certificate_name[]" class="right certificate_name" placeholder="Certificate name" id="certificate_name_0" />
    <input type="text" name="expiry_date[]" class="expiry_date" id="expiry_date_0" placeholder="DD/MM/YYYY" />
    <button id="clear_certificate_0" class="clear_certificate">Clear</button>
</div>
<div id="certificates_new"></div>
<p><button type="button" id="add_certificate">Add another certificate</button></p>

JS:

var i = 1;

$('#add_certificate').click(function(){
    var sHtml = '<input type="file" name="user_certificates[]" class="user_certificate" id="user_certificate_'+i+'" />';
    sHtml +=    '<input type="text" name="certificate_name[]" class="right certificate_name" placeholder="Certificate name" id="certificate_name_'+i+'" />';
    sHtml +=    '<input type="text" name="expiry_date[]" class="expiry_date" placeholder="DD/MM/YYYY" id="expiry_date_'+i+'" />';
    sHtml +=    '<button class="clear_certificate" id="clear_certificate_'+i+'">Clear</button>';
    $('#certificates_new').append(sHtml);
    i++;
});

$(document).on("click", '.clear_certificate', function() {
    var arrID = $(this).attr("id").split("_");
    var ID = arrID[2];
    $('#user_certificate_'+ID).val('');
    $('#expiry_date_'+ID).val('');
    $('#certificate_name_'+ID).val('');
});

So now this should work fine... You should make improvements on the code to shorten it a bit but the functionality is given.

Upvotes: 1

reggaemahn
reggaemahn

Reputation: 6648

This should accomplish what you are trying to do:

$(".clear_certificate").click(function(){
   $(".certificates_list").children("input[type=file]:last-child").each(function(){
         // Do stuff here
   });
});

It would be best to give your wrapper div an id and then do $("#idOfDiv").children....

Upvotes: 0

momo
momo

Reputation: 185

you write [type="file"] only match type="file" your html only have one file input

Upvotes: 0

Related Questions