How to clear HTML multiple file upload without page refresh - javascript

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.

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

Related

HTML and Javascript detect if input contains a file?

Hello I have the following code that allows the user to select a file and upload it to the server:
<form action="postphp.php" method="post" enctype="multipart/form-data">
<input id="videoage" type="file" name="video" style="margin-left:-242px;margin-top:10px;opacity:0;">
<label for="videoage" id="labelvideo">Choose Video...</label>
</form>
It works great but when the user selects a file I want the 'choose video...' text on the input to change to 'example.mp4'. Is this possible using javascript if so how can I do that? Thanks.
You can write in your script:
jQuery(function($) {
$('input[type="file"]').change(function() {
if ($(this).val()) {
var filename = $(this).val().split('\\').pop();
$(this).closest('.file-choose').find('.file-name').html(filename);
}
});
});
where file-choose and file_name are the classes added in your <form> and <label> respectively.
Please check the snippet here.

Jquery input type file as trigger doesnt work

I have multiple input type files. On default they are hidden and only first one is shown. When user selects file with the first input file the funcion below shows the next input type file by id. The problem is that it works only for first 2 change events and than it stops without errors.. How can I make it work for every next input file. Here is the function:
//first we hide all inputs
$('.imagediv').hide();
$('.imagediv:first').show();
var nextupload=$('.imagediv:first').attr('data');
nextupload=(parseInt(nextupload) + 1);
//this is the event
$(function() {
$("input:file").change(function (){
var nextf = $(this).attr('data');
$('#input'+(nextupload)+'').show();
alert('#input'+(nextupload)+'');
});
});
here is how html looks like:
<div class="imagediv" id="input2" data="2">
<input type="file" name="gallery_upload_2" data="gallery_upload_3" id="gallery_upload_2" />
</div>
and so on with the next input..
How to make it work for every next input change? Thanks
I made jsfiddle here: http://jsfiddle.net/Lbu3ksjh/1/
You were missing the +1 part in the change-function:
$('input:file').change(function (){
var nextupload = $(this).parent('.imagediv').attr('data');
nextupload = (parseInt(nextupload) + 1);
$('#input'+(nextupload)+'').show();
alert('#input'+(nextupload)+'');
});
I updated your fiddle:
Demo
Here's another solution. It works on a variable number of file inputs and doesn't require a lot of code nor markup.
DEMO
js
$(function() {
var $fileInputs = $(':file[name*="gallery_"]'), // could be whatever
next = 0;
$fileInputs.not(':first').hide();
$fileInputs.change(function (){
$fileInputs.eq(++next).show();
});
});
html
<input type="file" name="gallery_upload_1" />
<input type="file" name="gallery_upload_2" />
<input type="file" name="gallery_upload_3" />
<input type="text" name="random_text_input" />
<!-- notice it only reveals file inputs -->
<input type="file" name="gallery_upload_4" />

how to hide a button when there is only one input

i have created a input type file for uploading site. also i created two button , one of them is for appending the input type file and another is for removing them, but i wanna to hide the delete button when i have only one input type file, these are my codes :
JavaScript:
$(document).ready(function (e) {
$('.add').click(function (e) {
$('.addon').append('<div class="choose"><input type="file" name="userFile" /></div>');
});
$('.delete').click(function (e) {
$('.addon > .choose').last().remove();
if ($('<div class="choose"><input type="file" name="userFile" /></div>').length == 1) {
$('.delete').css('display', 'none');
} else {
$('.delete').css('display', 'block');
}
});
});
and the html
<div class="addon">
<div class="choose">
<input type="file" name="userFile" />
</div>
</div>
but it doesn't work, can you please help me?
You should give the input a class
<input type="file" name="userFile" class="file" />
and then change your if statement to
if($('.file').length == 1){....
It's hard to tell exactly what you are asking, but it seems to me like you want the check for length to be triggered by the onChange event for your input element.
Have your if condition as
$('.delete').length > 1
Thats what you seem to be asking. And the HTML seems incomplete for this question

prevent redirect to php file after form submit

After researching this for too many hours I finally decided to post the question myself, as what is working for others, doesn't seem to work for me. Please keep in mind that I am fairly new to ajax and jquery, but as I am on a deadline with my current project I wont have time to go through it all.
I have the following html form:
<div class="form">
<form id="savePlacemarkForm" method="post" action="createPlacemark.php">
<div>
<input type="text" id="placemarkName" name="placemarkName" placeholder="Name:"/>
</div>
<div>
<input type="text" id="placemarkAddress" name="placemarkAddress" placeholder="Adress:"/>
</div>
<div>
<input type="text" id="placemarkTag" name="placemarkTag" placeholder="Tags:"/>
</div>
<div>
<textarea id="placemarkDescription" name="placemarkDescription" placeholder="Description" rows="1" cols="1"></textarea>
</div>
<div>
<input id="latitude" type="text" name="latitude"/>
</div>
<div>
<input id="longtitude" type="text" name="longtitude"/>
</div>
<button class="md-close" id="savePlacemark" onclick="createPlacemark();"/>Save</button>
</form>
<button class="md-close">Cancel</button>
<script src="my_script.js" type="text/javascript"></script>
</div>
As you see I have the action set to createPlacemark.php which takes input from these fields and saves it to my DB, which works fine!! However since this should work without redirecting or resubmitting the page, meaning ajax! I include my_script.js which looks like this:
$("#savePlacemark").click( function() {
$.post( $("#savePlacemarkForm").attr("action"),
$("#savePlacemarkForm :input").serializeArray();
});
clearInput();
});
$("#savePlacemarkForm").submit( function() {
return false;
});
function clearInput() {
$("#savePlacemarkForm :input").each( function() {
$(this).val('');
});
}
As you see it does the post for me, which works, but for some reason the return false; doesnt seem to work for me, as I am continuously redirected to the before mentioned php file.
Any help would be greatly appreciated! thx!
Try the following. The .submit() function actually triggers a submit for the form. Take this out of the script since you don't need it when you've already posted the values with $.post.
$("#savePlacemark").click( function() {
$.post( $("#savePlacemarkForm").attr("action"),
$("#savePlacemarkForm :input").serializeArray();
});
clearInput();
});
function clearInput() {
$("#savePlacemarkForm :input").each( function() {
$(this).val('');
});
}
try this
<button onclick="return createPlacemark();">Save</button>
it may help you.

Form in JSP Page not Submitting

I have a jsp page which has a form embedded and I'm submitting the form via JavaScript.
When the page has say aroung 10-50 items the submit is working fine but if the page has aroud 500 items or more its not submitting.
After I click the submit button the page just stays in the current page and it just keeps loading.
How can I solve this issue.
A sample code is shown below:
<html>
<script type="text/javascript">
function submitChecked() {
var approveStr="";
var approveArr=new Array();
if(document.frmReleaseDetail.checkBoxVer.length != undefined)
{
for(var i=0; i < document.frmReleaseDetail.checkBoxVer.length; i++)
{
if(document.frmReleaseDetail.checkBoxVer[i].checked)
{
approveStr +=document.frmReleaseDetail.checkBoxVer[i].value + ",";
approveArr.push(document.frmReleaseDetail.checkBoxVer[i].value);
}
}
if(approveStr=="")
alert("Please make a selection by clicking atleast one checkbox");
else
{
document.getElementById("passCheckVerVal").value=approveArr;
document.forms["newForm"].submit();
}
} //end of if checking multiple checkboxes
else //if the page has only one checkbox(version)
{
if(document.frmReleaseDetail.checkBoxVer.checked)
{
window.location = "process.jsp?passCheckVer="+document.frmReleaseDetail.checkBoxVer.value+'&u_trackingRequestID=<%=request.getParameter("u_trackingRequestID")%>';
}
else
alert("Please make a selection by clicking atleast one checkbox");
}
}
</script>
<body>
<%
String newTrackingReqId=request.getParameter("u_trackingRequestID");
%>
<form name=frmReleaseDetail>
//jdbc code
//100's checkbox named checkBoxVer
//button to invoke submitChecked javascript function
</form>
<form name=newForm" id="newForm" action="process.jsp" method="post">
<input type="hidden" name="passCheckVer" id="passCheckVerVal"/>
<input type="hidden" name="u_trackingRequestID" id="u_trackingRequestIDVal" value="<%=newTrackingReqId%>"/>
</form>
</body>
</html>
You need to change the form method to POST.
<form name=frmReleaseDetail method="post">
By default the method is GET. More informations here. You have quantity of data limitation lot smaller in GET.
EDIT :
Code suggestion with only one form :
<html>
<script type="text/javascript">
function submitChecked() {
var checked = false;
for(var i=0; i < document.frmReleaseDetail.checkBoxVer.length; i++)
{
if(document.frmReleaseDetail.checkBoxVer[i].checked)
{
checked = true;
break;
}
}
if((document.frmReleaseDetail.checkBoxVer.length != undefined and checked) or (document.frmReleaseDetail.checkBoxVer.checked))
{
document.forms["frmReleaseDetail"].submit();
}
else
{
alert("Please make a selection by clicking atleast one checkbox");
}
</script>
<body>
<%
String newTrackingReqId=request.getParameter("u_trackingRequestID");
%>
<form id="frmReleaseDetail" name="frmReleaseDetail" action="process.jsp" method="post">
<input type="hidden" name="u_trackingRequestID" id="u_trackingRequestIDVal" value="<%=newTrackingReqId%>"/>
//jdbc code
//100's checkbox named checkBoxVer
//button to invoke submitChecked javascript function
</form>
</body>
</html>
For anyone making noob (newbie) mistakes:
1: Type is "submit" NOT "button"
GOOD/CORRECT:----------------------------------------------
<input type="submit" value="some_button_label" />
BAD/INCORRECT:----------------------------------------------
<input type="button" value="some_button_label" />
2: Submit button needs to be nested inside the form.
GOOD/CORRECT:----------------------------------------------
<form action="cookies-personalize-response.jsp">
SEL_YOUR_FAV_PROG_LANG
<select name="fav_lan">
<option>LANG_01</option>
<option>LANG_02</option>
<option>LANG_03</option>
</select>
<input
type ="submit"
value="some_button_label"
/>
</form>
BAD/INCORRECT:------------------------------------------------
<form action="cookies-personalize-response.jsp">
SEL_YOUR_FAV_PROG_LANG
<select name="fav_lan">
<option>LANG_01</option>
<option>LANG_02</option>
<option>LANG_03</option>
<option>LANG_04</option>
</select>
</form>
<input
type ="submit"
value="some_button_label"
/>
3: Referesh page after fix, view source in browser to make sure actually changed.
As silly as the last answer is, it is actually the one that I got stuck on the longest.

Categories

Resources