Determine when an input of file contains a value - javascript

I have this application with a file input and a submit input. I want the submit input to be disabled until the file input has a value. How do I check this kind of information with JS? I tried adding a "required" to the file input, but it still doesn't work...
Should I just use PHP and check if $_FILE isset()?

Should I just use PHP and check if $_FILE isset()?
It is good practice to ensure that the server gets what is expected. So yes, additional checks for a file and eventual mischiefs should also be done on the server.
Here is an example of what you want on the client-side.
JSFiddle
HTML
<form name="fileForm" onchange="changed()">
<input type="file" name="image">
<input type="submit" name="submit" disabled>
</form>
JavaScript
function changed() {
var form = document.forms.fileForm;
if(form.image.value.length > 0) {
form.submit.removeAttribute("disabled");
} else {
form.submit.setAttribute("disabled", "");
}
}

Try this
<form name="form1">
<input type="file" name="image" id="file_upload">
<input type="submit" name="submit" id="btn_submit" >
</form>
jQuery(document).ready(function()
{
/*To disable the button on load*/
jQuery("#btn_submit").attr('disabled','disabled');
jQuery("#file_upload").change(function()
{
var file_value= jQuery(this).val();
if(jQuery(this).val() === '')
{
jQuery("#btn_submit").attr('disabled','disabled');
}
else
{
jQuery("#btn_submit").removeAttr('disabled');
}
});
});

Related

fill and submit form using javascript from console

Here is my form:
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" >
</form>
And need to fill it from console.
just to use it in my app,
Will inject javascript with data to local html file.
I tried to make the form without a submit button like so:
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
</form>
<script>
htmlString.oninput = function(){
///do some stuff
}
</script>
</body>
Expecting that :
document.getElementById('htmlString').value="moo" ;
It automatically submit the form, because here oninput used.
But it just stayed filled with inputs and not proceed further.
Tried with other solution:
form = document.getElementById("myForm")
form.submit()
But it just refreshed the page and not submitted the form.
The need is just one filed without else, and inject my string to it with javascript to run functions embedded in the html.
Try making the input button hidden.
<body>
<form id="myForm">
<input id="htmlString" type="text" name="htmlField" ><br>
<input type="Submit" value="Submit" style="display: none" >
</form>
<button onclick="simulateConsole()">Try it</button>
<script>
htmlString.oninput = function(){
if(this.value === "moo") {
myForm.submit();
}
}
// This event will be triggered even if you use console
htmlString.onsubmit = function(){
if(this.value === "moo") {
// do something onSubmit
}
}
function simulateConsole() {
// you can simulate this in console
htmlString.value = "moo";
myForm.submit();
}
</script>
</body>
I hope it helps.
You need to supply an action to the form, otherwise it will just reload the page.
See more here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

Onsubmit event after javascript form submit

I have an upload file form, and i try to upload the file when it's selected,so i tried something like this:
<form enctype="multipart/form-data" method="POST" onsubmit="return
UploadFile(this);">
<input id="upfile" type="file" onchange="this.form.submit();"/>
</form>
The form.submit() works , but of course i need to do some validation on submit,so i tried to run a function:
function UploadFile(file){
alert('Bleah');
return false;
}
On normal circumstances it should return false, and the form shouldn't reload the page,but this doesn't happens.
If i add a submit input into the form, it works as expected:
<form enctype="multipart/form-data" method="POST" onsubmit="return
UploadFile(this);">
<input type="submit" name="upload" value="Upload">
<input id="upfile" type="file"/>
</form>
Can anyone explain me what is wrong please?
Try this:
function UploadFile(file) {
if (file.value === '') {
alert("Invalid File");
} else {
alert('Form will be submitted now!');
document.getElementById('myForm').submit();
}
}
<form enctype="multipart/form-data" method="POST" id="myForm">
<input id="upfile" name="upfile" type="file" onchange="UploadFile(this);" />
</form>
To upload the file when it's selected, you must call UploadFile() function on the input change, not on the form change tag. If you submit on input change, the page gets reloaded.
So, you'd better use something like this:
$('#upfile').onchange(function(){
if(UploadFile(this.parent('form'))){
this.parent('form').submit();
}
})
And you won't need onchange and onsubmit inside the tags any more.
Solution:
<form id="formname" enctype="multipart/form-data" method="POST" action="test.html">
<input id="upfile" type="file" onchange="sendForm()"/>
</form>
<script>
function sendForm() {
var field = document.getElementById("upfile");
if (field) {
console.log("the is a file and the form will be sent");
document.forms["formname"].submit();
}
}
</script>
OLD--
I dont understand, how would you like to submit the form without a submit button? or at least, handle the submission in javascript "object.addEventListener("keydown", myScript);"
--
ok, I read it once again and I understand the question
You need to handle this on javascript and detect the selection of the file. Look at this thread:
how to check if a file is selected using javascript?

cancel in confirm function submitting form in javascript

Got a form that requires users to input an amount to donate. On clicking submit, a function is called and the function is meant to display the amount specified and prompt the user to confirm if the amount typed is the actual amount or not.
The Cancel option in the Confirm() keeps submitting the form instead of returning false.
function donationFormSend(){
get_donation_amount = document.getElementById("get_donation_amt").value;
if(get_donation_amount != ''){
return confirm("You have specified "+get_donation_amount+" as the amount you wish to donate. \n\n Are you sure you want to proceed with the donation?");
}
else{
alert("Amount must be specified to process your donation.");
return false;
}
}
<form method="post" action="">
<div>
<div>Donation Amount:</div>
<input name="amount" type="text" id="get_donation_amt" required="required" />
</div>
<input name="donation_submit" type="submit" id="Submit" value="Proceed" onclick="return donationFormSend();" />
</form>
Jsfiddle link
Would be pleased getting help with this.
I updated your jsfiddle so it's in the expected format (loading the js in the head) and returning the confirm result
return confirm('blah blah')
works perfectly well for me in FF! Just make sure you clear your cache and reload your page.
A way to do do it might be:
form :
<form id='test' method="post" action="">
<div>
<div>Donation Amount:</div>
<input name="amount" type="text" id="get_donation_amt" required="required" />
</div>
<input type="submit" value="submit" onClick="form_submit(this.value)">
<input type="submit" value="cancel" onClick="form_submit(this.value)">
</form>
javascript:
document.getElementById('test').addEventListener('submit',function (event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
})
form_submit= function (submited_by) {
if(submited_by == 'submit'){
alert('Submited')
}else if (submited_by == 'cancel'){
alert('cancelled')
}
}
I'd rather use a switch statement to make it expandable in the future but this should work.
Also I'm using jquery mostly because I'm not sure how to stop default action without it.
here's a JSFiddle with the code running.
EDIT: Updated to not use Jquery.
EDIT: well, I feel stupid now, realised it wasn't cancel button in a submit form but in a confirmation form.
In your HTML use : onclick="return donationFormSend();"
In Your Javascript: return confirm("Are you sure ....blah blah blah")

Hide the upload submit button if field "file" is empty

With this simple example
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input type="file" name="images[]" multiple="multiple"> <input type="submit" name="submitImgs" value="Upload"/>
</form>
How can I hide the submit button until somthing's in the file field, I've tried to make a php script that look if the $_FILES['error'] == 4 or is_file_uploaded, etc and that don't work. So I want to simply hide the button until something is selected in the file field.
The answer could be in javascript, jQuery... I don't care :D
Thanks
The <input type="file"> element has a files property.
Simply check files.length.
jQuery example, which modifies the submit button on the fly:
// Select the <input type="file"> element
$('input[type=file][name="images[]"]').change(function(){
var hasNoFiles = this.files.length == 0;
$(this).closest('form') /* Select the form element */
.find('input[type=submit]') /* Get the submit button */
.prop('disabled', hasNoFiles); /* Disable the button. */
});
Use this. Attach the code on the change event of the file field.
$(function() {
$("input:file").change(function() {
var fileName = $(this).val();
if(filename != "") { $("#submitButtonId").show(); } //show the button
});
});
The default state of the submit should be hidden (CSS display: none)
And on change event of the file field, you show that submit button
Her's the code
<script>
$(function() {
$("#myfileinput").change(function() {
if($(this)).val() != "") $("submit").show();
});
});
</script/>
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input id="myfileinput" type="file" name="images[]" multiple="multiple">
<input type="submit" name="submitImgs" value="Upload" style="display:none"/>
</form>
<script>
function checkFile() {
var myFSO = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.upload.file.value;
var thefile = myFSO.getFile(filepath);
var size = thefile.size;
if(size > 0) {
document.getElementById('submit').style.display='block';
}
}
</script>
<form action="" method="post" enctype="multipart/form-data">
Upload images: <input type="file" onChange="checkFile()" name="images[]" multiple="multiple"> <input type="submit" style="display:none;" name="submitImgs" value="Upload" id="submit" />
</form>

Checking for attachments in JavaScript

Prior to submitting a form, I would like to check if a file has been attached and pop up a warning message saying that a file needs to be attached if it hasn't been. I was wondering how to accomplish this using JavaScript or Prototype or JQuery etc?
Assuming you are using an <input type="file"> field, you can simply check if the element's value is a non-empty string:
<form method="POST">
<input type="file" id="attachment" />
<input type="button" onClick="checkAttachment();" value="Send" />
</form>
<script type="text/javascript">
function checkAttachment() {
if (document.getElementById('attachment').value !== '') {
alert('File Attached');
}
else {
alert('No File Attached');
}
}
</script>

Categories