jQuery - Auto submit form - javascript

I want to auto submit form which flow is like below.
input type = 'file' should not display.
if click on submit button choose file pop up should open.
after selecting a file form should auto submit with validation.
I complete most of this but facing problem while submitting form.
NOTE -> i hide input type = 'file' using css style.
Here is my HTMLfrom
<form method="post" class="form" action="<?php echo base_url('csv/store'); ?>" enctype="multipart/form-data">
<input type="file" id="myfile" name="myfile" accept=".csv" style="display:none">
<br/>
<input type="submit" class="submit btn btn-primary" value="Import csv"/>
</form>
This is my javaScript
<script>
$(document).ready(function(){
function validation() {
//validation here
}
$('.submit').click(function(event) {
event.preventDefault();
$('#myfile').click();
});
});
</script>

Is this what you want?
$(document).ready(function(){
function validation() {
//validation here
alert('in function validation')
$('#myForm').submit();
}
$('.submit').click(function(event) {
event.preventDefault();
$('#myfile').click();
});
$('#myfile').on('change',function(){
validation();
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" class="form" id="myForm" action="<?php echo base_url('csv/store'); ?>" enctype="multipart/form-data">
<input type="file" id="myfile" name="myfile" accept=".csv" style="display:none">
<br/>
<input type="submit" class="submit btn btn-primary" value="Import csv"/>
</form>

Instead of using the submit button, give the hidden input type="file" a <label> element and style that as a button. This will make it look like a submit button, but will instead prompt the file upload.
Then listen for the change event on the hidden file input. This event will be fired every time you upload a file. There you'll want to do validation. If the validation succeeds, manually submit the form with the jQuery .submit() method.
$(document).ready(function() {
function validation(files) {
//validation here, now returns true for demonstration.
return true;
}
$('#myfile').change(function(event) {
// Check if files are valid.
const isValid = validation(event.target.files);
// If the are..
if (isValid) {
// ..submit the form.
$('#myform').submit();
}
});
});
.btn {
display: inline-block;
padding: 0.5rem;
border: 1px solid #d0d0d0;
border-radius: 3px;
background-color: #f0f0f0;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="myform" method="post" class="form" action="<?php echo base_url('csv/store'); ?>" enctype="multipart/form-data">
<label for="myfile" class="submit btn btn-primary">Import CSV</label>
<input type="file" id="myfile" name="myfile" accept=".csv" style="display:none">
</form>

Related

Button enabling for multiple file uploads - HTML

I have this code in my html where I'm to upload three files. The submit button for all the corresponding file uploads is disabled unless a file is selected.
$(document).ready(
function() {
$('input:file').change(
function() {
if ($(this).val()) {
$('input:submit').attr('disabled', false);
}
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#" method="post">
<input type="file" name="fileInput1" id="fileInput1" />
<input type="submit" value="submit" disabled />
</form>
<form action="#" method="post">
<input type="file" name="fileInput2" id="fileInput2" />
<input type="submit" value="submit" disabled />
</form>
<form action="#" method="post">
<input type="file" name="fileInput3" id="fileInput3" />
<input type="submit" value="submit" disabled />
</form>
My concern is that, if I select a file for the first form, the submit button in the other forms too get enabled.
Option 1:
Regardless of the order of the elements, this will enable the wanted button:
$(document).ready(
function(){
$('form input:file').change(
function(){
if ($(this).val()) {
// Select button of this form
$(this).parent('form')
.children('input:submit')
.attr('disabled',false);
}
}
);
});
see this jsFiddle
Option 2: This will enable it in case Input-submit is always next to Input-File:
$(this).next().attr('disabled',false);
instead of this:
$('input:submit').attr('disabled',false);
see this jsFiddle
You need to use traversing, to find the right button within the right form.
$(document).ready(
function(){
$('input:file').change(
function(){
if ($(this).val()) {
$(this).siblings('input[type=submit]').attr('disabled',false);
}
}
);
});
This will look only for inputs that are siblings of the file input, which means that they are within the same parent element (in your case, the same form).

Form with two buttons

I am trying to create multiple forms which have two buttons, each will submit the form to different script, one via ajax and second one will just submit the form.
<?php foreach($objects as $object) : ?>
<div class="card-body">
<form id="edit-form" action="#" method="POST">
<input name="subject" value="<?=$object['subject']?>" type="text" id="title" class="input-xxlarge">
<textarea id="content" name="content" rows="25"><?=$object['content']?></textarea>
<button type="button" id="send-button" class="btn btn-primary">Send</button>
<input type="submit" id="submit-button" value="Submit"/>
</form>
</div>
<?php endforeach; ?>
First I am trying to get the current form, but I have problem with that. console.log shows something only on the first form, if I click on the buttons from other forms then It will do nothing.
$('#send-button').on('click', function(e) {
e.defaultPrevented;
$form = $(this);
$url = $form.attr('action');
$data = $form.serialize(); console.log($form);
console.log($url);
});
Is it because my button has same ID for every form ?
You shouln't use ID's multiple times on the same page. Try to use a class for that case. Also as stated in the comments use e.preventDefault(); to stop the event.
$(this) will result in the #send-button beeing targeted. To access the form you need to find the closest form element like this:
$form = $(this).closest('form');
html:
<form method="POST" action="#">
<input type="text">
<button type="button">send</button>
<input type="submit" value="submit" />
</form>
<form method="POST" action="#">
<input type="text">
<button type="button">send</button>
<input type="submit" value="submit" />
</form>
js:
$("form").each(function() {
var form = this;
$(form).find('button').on('click', function(e) {
e.preventDefault();
console.log(form);
console.log(this);
})
});
this will add events on every form you have on your page, button will submit form via script and submit will just submit it. also here's a fiddle to play with

PHP Stop Form Reload Show Error Js

I want to show my error if 'fileToUpload' is empty (show error with js) and stop reloading page if 'fileToUpload' is empty
<form method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input class='new_post' type="submit" value="Upload Image" name="submit">
</form>
$('.new_post').click(function() {
var get_photo = $('#fileToUpload').get(0).files.length;
// If 0 file show error
if (get_photo == 0) {
openandclose('.error_box' , 'emptyyyy.', 1700);
$('.error_box').focus();
return false;
}
});
Add an id to your form like this <form method="post" enctype="multipart/form-data" id="myform"> and in your javascript attach the checking function as callback to the form submit event rather than button click event like $('#myform').submit().
$('#myform').submit(function() {
var get_photo = $('#fileToUpload').get(0).files.length;
// If 0 file show error
if (get_photo == 0) {
/*
openandclose('.error_box', 'emptyyyy.', 1700);
$('.error_box').focus();
*/
alert("EMPTY!!");
return false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" enctype="multipart/form-data" id="myform">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input class='new_post' type="submit" value="Upload Image" name="submit">
</form>
This code might help you out.Upon clicking the button it checks for whether file is selected or not , and return True/False Accordingly.
<form method="post" enctype="multipart/form-data" onsubmit="return funccheck();">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input class='new_post' type="submit" value="Upload Image" name="submit"> </form>
<script>
function funccheck() {
var get_photo = $('#fileToUpload').get(0).files.length;
// If 0 file show error
if (get_photo == 0) {
openandclose('.error_box' , 'emptyyyy.', 1700);
$('.error_box').focus();
return false; //stops page loading
}
return true; // initiates page loading
});
</script>
Try this:
$('.new_post').click(function(e) { var get_photo = $('#fileToUpload').get(0).files.length; // If 0 file show error if (get_photo == 0) { openandclose('.error_box' , 'emptyyyy.', 1700); $('.error_box').focus();
e.preventDefault();
return false; } });
The variable e is the event, the function preventDefault will stop the form from submitting if there is no file.

Form Submit without Click Submit Button

Form Submit without Click Submit Button
<form id="formId" action="<?php echo Mage::getUrl('module/index/method') ?>" method="post"
enctype="multipart/form-data">
<input type="hidden" name="form_key" value="<?php echo Mage::getSingleton('core/session')->getFormKey() ?>">
<div id="upload-file-container">
<input id="img" type="file" name="img" onchange="this.form.submit()">
</div>
<input id="button" type="submit" value="Submit" name="submit" class="submit">
</form>
Use
document.getElementById("formId").submit();
Solution one:
You can call your form's submit method in the onchange event of your file input like this:
document.getElementById("file").onchange = function() {
document.getElementById("form").submit();
};
Here's a jsfiddle demo.
Solution Two:
You can also define the .submit with an onchange event inline:
<form action="http://your-url.com">
<input type="file" id="img" onChange="form.submit()" />
</form>
Here's a fiddle demo.
Solution Three:
The jQuery way of doing it:
$(function(){
$("#img").change(function(){
$("#form").submit();
});
});
document.getElementById("img").onchange = function() {
document.getElementById("formId").submit();
};
You can auto submit using this:
$(document).ready(function(){
setTimeout(function(){ $("#formId").submit(); }, 3000); });
Or specify exactly when you want to submit the form.

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>

Categories