I am currently working on a website, where you are able to upload a file:
<input type="file" name="file" id="file" class="form-control" />
I then have a button which you can press to upload the selected file:
<button class="btn btn-primary" type="submit">Upload CV</button>
Here I would like the button to be clickable ONLY if a file has been selected. Is this possible using JS, and how?
Thanks in advance!
Using Jquery:
$(document).ready(
function(){
$('input:file').change(
function(){
if ($(this).val()) {
$('input:submit').attr('disabled',false);
// or, as has been pointed out elsewhere:
// $('input:submit').removeAttr('disabled');
}
}
);
});
Add disabled attribute in button tag.
You can use JQuery as FullOfQuestions said, but it would be also good to verify that the file was selected before executing button code!
<input type="file" name="file" id="myFile"/>
<!--Add disabled attribute to the button so that is appears disabled at page load-->
<button id="myBtn" type="submit" disabled>Upload CV</button>
<script type="text/javascript">
$(function () {
//when input's value changes
$("#myFile").change(function () {
if($(this).val())
{
$("#myBtn").prop("disabled", false);
}
else
{
$("#myBtn").prop("disabled", true);
}
});
//when button is clicked
$("#myBtn").click(function () {
if($("#myFile").val())
{
console.log("file selected");
}
});
});
</script>
You can do this with native JS below. The button is enabled when a file has been selected, but if a file has not been selected, the button is disabled.
var button = document.querySelector('button[type=submit]');
button.disabled = true;
document.getElementById('file').addEventListener('change', function () {
if (this.value.length > 0) {
button.disabled = false;
} else {
button.disabled = true;
}
});
<input type="file" name="file" id="file" class="form-control" />
<button class="btn btn-primary" type="submit">Upload CV</button>
Related
I created a button with file input. If I click on the button, I can choose a file from my computer. My problem is that I want to add alert if I select a file. How can I do this? I tried to solve this, but the alert appears when I click again on the button.
function openfileDialog() {
$("#fileLoader").click();
if($("#fileLoader").val() !== ""){
alert("You selected a file!");
}
}
#fileLoader
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="fileLoader" name="files" title="Load File" />
<input type="button" id="btnOpenFileDialog" value = "Click Me !!!" onclick="openfileDialog();" />
Try this:
<input type="file" id="fileLoader" name="files" title="Load File" onchange="alert('selected');" />
Use change event for this but one about this is It will fire only when you pick different file if you pick same file that you already selected It won't fire again.
function openfileDialog() {
$("#fileLoader").click();
}
$("#fileLoader").on("change", function(e){
if($("#fileLoader").val() !== ""){
alert("You selected a file!");
}
});
#fileLoader
{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="fileLoader" name="files" title="Load File" />
<input type="button" id="btnOpenFileDialog" value = "Click Me !!!" onclick="openfileDialog();" />
Hi this might helpfull,
function openfileDialog() {
$("#fileLoader").click();
$('#fileLoader').change(function(){
if($(this).val() != ""){
alert("You selected a file!");
}
})
}
Use following code. Basically, you need to use onchange event. (Fiddle - https://jsfiddle.net/o2gxgz9r/65577/)
$(document).ready(function() {
var openfileDialog = function() {
$("#fileLoader").click();
}
$('#btnOpenFileDialog').click(openfileDialog);
$("#fileLoader").change(function() {
if ($("#fileLoader").val() !== "") {
alert("You selected a file!");
}
})
});
Note - alert will appear only when file is selected initially and later if a new file is selected. If you want it to appear even if same file is selected, then you need to modify the value property of the #fileLoader in openfileDialog function
I have two forms (consist with input,textarea,checkbox) in a page. I want check emptiness of these forms separately on click seperate button.
I use the following script. But it shows empty message if any of these form input is empty.
$('#submit').click(function(e) {
var empty = false;
$('input, textarea').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
alert("empty");
e.preventDefault();
}
else {
document.getElementById("contact").submit();
}
})()
Never assign stuff to submit buttons
Do not submit a form from a submit button if you have chosen to use preventDefault if something wrong. It could submit the form twice
$(function() {
// on the submit event NOT the button click
$('form').on("submit", function(e) { // any form - use .formClass if necessary to specific forms
var empty = false;
$("input, textarea", this).each(function() { // this form's inputs incl submit
if ($.trim($(this).val()) == "") { // trim it too
console.log(this.name,"empty")
empty = true;
return false; // no need to continue
}
});
if (empty) {
alert(this.id + " is empty"); // or set a class on the div
e.preventDefault(); // cancel submission
}
});
});
div {
border: 1px solid black;
width:500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<form id="form1">
<div>
<input type="text" value="" name="field1" /><br/>
<textarea name="field2"></textarea><br/>
<input type="submit" value="Submit" />
</div>
</form>
<hr/>
<form id="form2">
<div>
<input type="text" value="" name="field3" /><br/>
<textarea name="field4"></textarea><br/>
<input type="submit" value="Submit" />
</div>
</form>
You could also add required to the fields
You need to restrain the handler to the form containing the clicked button:
$('#submit').click(function(e) {
var form = $(this).parents('form:first');
var empty = false;
$('input, textarea', form).each(function() {
// the rest is the same
I'd also like to point out that you cannot have the same ID on multiple controls, so
$('#submit')
should always return exactly one button. You should do something like this, where you distinguish the buttons by class instead:
<input type="submit" id="submitA" class="submitButton">
<input type="submit" id="submitB" class="submitButton">
and select with
$('.submitButton')
you know you can also use jquery to reset the form like so
form.resetForm();
I want to disable submit button once it has clicked for send.this is my submit button code
<button title="<?PHP echo getTranslatedString('LBL_SAVE_ALT'); ?>" accessKey="S" class="btn btn-primary" value="<?PHP echo getTranslatedString('LBL_SAVE_LAPTOP'); ?>" id="formSave" type="submit" name="button" onclick="return checkform();">
Save detail
and this is onclick function code
function checkform() {
var incvfr = $("#invoice").val();
var inseridf = $("#invserial").val();
if (incvfr == 1) {
if (inseridf == '') {
alert("Please enter invoice number");
return false;
}
} else {
document.save.submit();
document.getElementById('formSave').setAttribute("disabled", "disabled");
}
}
when i disable submit button then form not send for save just disable button how to do it.
when i use disable code after save.submit(); then form submit but save button not disable
Try one() method in jQuery, it will run once for an element and might simplify your code.
jQuery Solution:
$(function(){
$('#formSave').one('click', function() {
$(this).attr('disabled','disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input title="" accessKey="S" class="btn btn-primary" value="Save detail" id="formSave" type="submit" name="button" onclick="">
JavaScript Solution:
Use setAttribute() method.
function disable(){
document.getElementById('formSave').setAttribute("disabled", "disabled");
}
<input title="" accessKey="S" class="btn btn-primary" value="Save detail" id="formSave" type="submit" name="button" onclick="disable()">
As I can see that you re using jQuery so when you are saving after that you can use jQuery hide function to hide your button by passing button id
function checkform(){
var incvfr=$("#invoice").val();
var inseridf=$("#invserial").val();
if(incvfr== 1) {
if(inseridf==''){
alert("Please enter invoice number");
return false;
}
} else {
document.save.submit();
$("#formSave").hide();
}
}
You can disable submit button using
$("#formSave").attr('disabled',true);
or
$("#formSave").prop('disabled',true);
add property disable
$("#formSave").prop('disabled',true);
if you want revert it use
$("#formSave").prop('disabled',false);
I have two buttons:
<input type="button" name="hideAll" value="Hide Descriptions"/>
<input type="button" name="showAll" value="Show Descriptions"/>
Using jQuery, how do I tell which button was clicked?
Add a class that your buttons share...
<input class="mybutton" type="button" name="hideAll" value="Hide Descriptions"/>
<input class="mybutton" type="button" name="showAll" value="Show Descriptions"/>
$(function() {
$('.mybutton').on('click', function() {
var isClicked = this.attr('name');
if (isClicked === 'hideAll') {
...
}
if (isClicked === 'showAll') {
...
}
});
});
Depending on your needs and scope, you could also make isClicked a global variable which will be available outside the click event.
isClicked = this.attr('name');
$('input[type="button"]').on('click', function() {
// which button was clicked?
alert($(this).attr('name') + ' was clicked');
});
i have a jquery for file selection
http://jsfiddle.net/parvathy/e8wr5/
please look the fiddle. when i am clicking on the text box, that jquery is worked .. but when clicking on the "browse" button that is not worked.i am using boot strap css for button and input text please help me..
<input type="text" name="fake_section" id="fake_section" class="form-control" style="float:left;">
<button type="button" id="fake_section" class="btn btn-primary" ">Browse</button>
$(document).ready(function () {
$('#fake_section').click(function (e) {
e.preventDefault();
$('#file').trigger('click');
});
$('#file').change(function (e) {
var filename = $(this).val();
var ext = filename.split('.').pop().toLowerCase();
if ($.inArray(ext, ['xls', 'xlsx']) == -1) {
alert('Only add Excel Files!');
}
else {
$('input[name="fake_section"]').val(filename);
}
});
});
Because you have 2 elements with the id fake_section, use class instead - when you use an id selector it selects the first element with the given id
<input type="text" name="fake_section" class="fake_section form-control" style="float:left;">
<button type="button" class="fake_section btn btn-primary" style="margin-left:10px;">Browse-</button>
then
$('.fake_section').click(function (e) {
e.preventDefault();
$('#file').trigger('click');
});
Demo: Fiddle
Be attention on the ids, your mistake were the same id in two controls. Some IDEs help you with a warning when you have many controls with the same Ids.
<input type="text" name="fake_section" id="fake_section2" class="form-control" style="float:left;">
<button type="button" id="fake_section1" class="btn btn-primary" ">Browse</button>
$(document).ready(function () {
$('#fake_section1').click(function (e) {
e.preventDefault();
$('#file').trigger('click');
});