0

I am trying to count how many files have been uploaded, if over 10 images are uploaded then clear the input field but keep everything else in the form.

Everything works great, used the answer from here to clear input and made a function to count files.

The issue is if there are more than 10 images uploaded it clears all input fields because the script refreshes the page and all input information is reset. I'm looking to only clear the multiple upload input field and not have the page refresh when that happens.

Heres what it looks like so far.

<div class="form-group">
    <label for="post_gallery_img">Gallery Images</label>
    <input id="galleryImgs" type="file" multiple="multiple" name="files[]"><button style="display: none;" onclick="reset2($('#galleryImgs'));event.preventDefault()"></button>
</div>

And the Jquery:

<script>
  $("#galleryImgs").on("change", function() {
    if($("#galleryImgs")[0].files.length < 11) {
        window.reset2 = function (e) {
            e.wrap('<form>').closest('form').get(0).reset();
            e.unwrap();
        }
    } else {
        $("#addPostsForm").submit();
    }
});
</script>

I am thinking I am going to have to use AJAX, but quite new to it.

Any help is appreciated.

Brad
  • 99
  • 11
  • What have you actually tried? What did google say? Why do you think you'll have to use ajax? – Soviut Jun 14 '17 at 04:28
  • Also, what do you mean "more than X amount of images it clear the input". How many is X? Please take a moment to edit your question and reword it so it's absolutely clear what happens because what you're saying makes no sense. – Soviut Jun 14 '17 at 04:31
  • @Soviut Ajax could be used to not have the page reload. Changed "X" for you – Brad Jun 14 '17 at 04:55
  • Could you clarify what you mean by "it" when you say "it clears the field"? Your script does? or the browser does? – Soviut Jun 14 '17 at 05:12
  • The window.rest function clears the input – Brad Jun 14 '17 at 05:23
  • Please update your answer and clarify that. You've mentioned it in another answer that you're trying to keep everything in the form and only clear the files field; Please put that in your question so other people who read this will understand. – Soviut Jun 14 '17 at 05:26

1 Answers1

0

You may try something like:

HTML:

<form id="addPostsForm">
<div class="form-group">
    <label for="post_gallery_img">Gallery Images</label>
    <input id="galleryImgs" type="file" multiple="multiple" name="files[]"><button style="display: none;" onclick="reset2($('#galleryImgs'));event.preventDefault()"></button>
</div>
<br>
<!--<input type="reset" value="Reset">-->
</form>

JS:

$("#galleryImgs").on("change", function() {
    if($("#galleryImgs")[0].files.length < 11) {
        alert("Now reset file input");
        //This code line resets the file input
        $('#galleryImgs').val("");
        alert("The file input has now been reset");
    } else {
        $("#addPostsForm").submit();
    }
});
Rahul Gupta
  • 9,775
  • 7
  • 56
  • 69
  • I'm actually trying to keep everything in the form and just reset the multiple file input field if over 10 files are uploaded. Thanks though – Brad Jun 14 '17 at 04:55
  • I have now edited my code. This will now just reset the input file element. Let me know if it working for you or not. – Rahul Gupta Jun 14 '17 at 05:07
  • Sadly it still isnt working, I think its the .on Change because if I remove that and use the reset button it works without clearing everything on the form. – Brad Jun 14 '17 at 05:26