I have an HTML file upload page and I need the submit button to be disabled until a file is selected. Then the submit button will be enabled and the user can upload. I assume I can use jQuery code to query the file upload field's value to see whether a file has been selected to upload. And I assume I can check that whenever focus has left the file upload field. My concern is that some browsers might act funny with this and then my users can't upload any files.
Is there a safe way to do this, preferably using jQuery, where I won't be in danger of having some users unable to upload?
This jQuery should work, and is tied to the file input's change() event. This code also applies the disabled attribute so, in the event the user has JavaScript disabled, it shouldn't prevent the form being used:
$(document).ready(
function(){
$('input:submit').attr('disabled',true);
$('input:file').change(
function(){
if ($(this).val()){
$('input:submit').removeAttr('disabled');
}
else {
$('input:submit').attr('disabled',true);
}
});
});
JS Fiddle demo.
A simpler way is to check the file field when the user actually submits the form... that way you won't have to look for form changes.
$(function() {
$('form').submit(function() {
if(!$("form input[type=file]").val()) {
alert('You must select a file!');
return false;
}
});
});
This code is Unobtrusive JavaScript and it won't mess up the form if the user does not support JS.
David Thomas's code can be set for button ID:
<script type="text/javascript">
$(document).ready(function () {
$('#<%=btInsert.ClientID %>').attr('disabled', true);
$('input:file').change(
function () {
if ($(this).val()) {
$('#<%=btInsert.ClientID %>').removeAttr('disabled');
}
else {
$('#<%=btInsert.ClientID %>').attr('disabled', true);
}
});
});
</script>
Related
I have created a form where user can create his profile, now I want that if user do not click on save/submit button on the page and clicks on any other available link other than save.
Then he should get confirm popup of JavaScript mentioning that you are aborting the creation of profile. I am unable to find any event via which I can achieve this.
Other links are navigation links available on my page.
If you are using button for submit and others as a link then you can find out like this:
$(document).ready(function() {
$(document).('on','click',function(){
var pressedButton = $(this).text();
if(pressedButon == "Submit" || pressedButton =="Save")
{
return false;
}
else
{
$("a").on('click',function() {
var confirmAns = confirm('Your message');
if(confirmAns == true)
{
// DO whatever you want...
}
else
{
//Do whatever you want...
}
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
You can use onblur event for it and you can achieve your goal. So when a user click anywhere in your web page then the onblur event automatically fire.
You should use onblur event on your save/submit button.
<button onblur="myFunction()" type="button">Save</button>
<script>
function myFunction() {
var txt;
var r = confirm("You are aborting the creation of profile");
if (r == true) {
return true;
} else {
return false;
}
}
</script>
Try using some plugin. There is one jQuery plugin "Are You Sure"
So you just need below code snippet
$('form').areYouSure();
// OR
$('form.my_form_class').areYouSure();
There are some advanced option available with plugin. Checkout its documentation.
If I understood right, you want this two possibilities:
1.User clicks submit button: form gets submitted
2.User clicks "a" link: get alert asking for confirmation to leave the registration process.
First point will be done automatically as it's a form submit button without the need of extra jQuery.
Second point would just need the following code in order to show the confirmation button:
<script>
$(document).ready(function(){
$('a').on('click',function(e){
if (!confirm("Are you sure you want to exit the registration process?")){
e.preventDefault();
return false;
}
});
});
</script>
I have this HTML code:
<input type="file" id="mysignature_upload" onChange="readURL();"/>
Javascript code:
function readURL(){
alert("Hello");
}
The problem with this code is, the function readURL only gets called when you select a different file, but if you select the same file over and over again, readURL cannot be executed. I want to know if there's an event that fires when you select and open a file even if the file selected is the same with the previous file selected.
Here is the fiddle: http://jsfiddle.net/vhevhangvhakhikhang/78zcp5u7/
I hope its satisfies your requirements: fiddle exapmle
<input type="file" id="mysignature_upload"/>
$("#mysignature_upload").click(function (event) {
$("#mysignature_upload").val("");
});
$("#mysignature_upload").on('change',function (event) {
alert("selected file: " + $("#mysignature_upload").val());
});
<script>
$(document).ready(function({
$("#mysignature_upload").click(function(event){
event.preventDefault();
$(this).val("");
});
});
</script>
As the name suggests, onchange is triggered only if the value of the field is changed. If you need to do something every time the user selects a file, probably, you could reset the field's value on click event.
$("#mysignature_upload").click(function() {
// clear the value
$(this).val("");
}
}
Now onchange will get triggered every time.
When selecting large files, there is a noticeable delay between clicking Open in the file dialog and the value of the (type file) input updating. While I use the following two events for showing and hiding a 'please wait' dialog, you could 'do other stuff' in these events as well:
// Fires upon click of the file input ('Choose File' button)
$('#selectedFile').on('click', function (event) {
// Shows before file selection dialog and remains behind
// the file selection dialog (which has a higher z-order)
ShowPleaseWait();
});
// Fires the moment that the file input value itself is updated.
// NOTE: This is NOT when the Open button is clicked ... this
// is when the value of the file input actually updates (there is
// a delay after clicking Open for a large file until the value
// of the input actually, finally, updates...)
$('#selectedFile').on('change', function (event) {
HidePleaseWait();
});
I need to disable or place a loading image over the form once the submit has been validated. Either one works for me. I have found numerous ways to disable the submit button after you click once, but this does not take in account for validation errors.
I've tried to look this up in many different ways but I can't seem to find something that works.
I am using the default prototype form Magento uses on my current form.
This is what I currently have:
var contactForm = new VarienForm('productcontactForm', true);
contactForm.submit = function(){
if (this.validator.validate()) {
$('#productcontactForm').submit(function(){
$('input[type=submit]', this).attr('enabled', 'enabled');
});
} else {
$('#productcontactForm').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
});
}
}.bind(contactForm);
I'm sorry, I don't run Magento, but I do see a problem. There is no such thing as an 'enabled' attribute in html, javascript or jquery. To enable an input use:
<..selector..>.removeAttr('disabled');
So to disable an input you add the 'disabled' attribute and to enable it again you remove that attribute.
I have a file upload system, after the upload button is clicked, the file is then uploaded through AJAX. While the file is uploaded I want to disable the click function that is on the "Select Images" button.
Currently this is the click function on the file-selection button:
$(document).ready(function() {
$("#file-button").click(function() {
$('#file').trigger('click');
});
});
That works fine, but I want to disable the click function in the progress phase of the XmlHttpRequest, and then re-enable the click function when I get a 200 response from the server. I have tried bind() and unbind() and it works fine in Chrome, but in firefox, during the upload, the button cannot be clicked, which is what I want, and then after I get a response from the server the button is re-enabled, but in firefox two file-selection dialogue windows open at the same time. This is because of the function above, and me binding the function again using bind(). Does anyone have any suggestions on how to enable, then disable the button without re-entering the code (function) of the click event.
Something like this would be preferable:
$('#file-button').disable();
$('#file-button').enable();
I have tried the on() and off() and they do not seem to work either.
SOLUTION -- thanks to Eric
I changed my initial click function to the following:
$(document).ready(function() {
$("#file-button").click(function() {
if ( $('#file-button').attr('disabled') == "disabled" ) {
return false;
}
else {
$('#file').trigger('click');
}
});
});
And I set the following to disable the button
$('#file-button').attr('disabled','disabled');
And this to re-enable it:
$('#file-button').removeAttr('disabled');
Disable the button using jQuery $.prop() function:
$("input[type=submit]").prop('disabled', true);
Add a conditional to the click handler to check if the button is disabled:
$("#file-button").click(function() {
if (!$(this).is(':disabled')) {
$('#file').trigger('click');
}
});
Later on re-enable the button:
$("input[type=submit]").prop('disabled', false);
Or you might be able to use the submit event instead of click, if there is a form involved:
$("#whatever-your-form-is").on('submit', function() {
$('#file').trigger('click');
});
Try Attr jQuery function.
$('#file-button').attr('disabled','disabled');
$('#file-button').removeAttr('disabled');
Tested Code
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#file-button").click(function(e)
{
e.preventDefault();
$(this).attr('disabled','disabled');
return false;
});
});
</script>
<input type="button" id="file-button" value="ClickMe" />
You have to refer input button in order to disable button ,
Something like below
$("input[type=submit]").prob('disabled', true);
$("inpur[type=submit]").prob('disabled', false);
ok i have a form on which i have some validation through dataannotation which is client side as well as server side validation like some field already exists. i have no javascript validations on the page. now my problem is that what should i do if the user presses the save button multiple times (he keeps pressing the button for 15 times,in my case the page stays there with field already exist message at the top ) . what do u guys do for that?
what i have done (this works fine in firefox but not in ie) it disable the button no matter what just after click in ie
$(document).ready(function () {
$("#btn").submit(function () {
$('#btn').attr('disabled', 'disabled');
});
});
Put an overlay above the whole page. The overlay prevents the user from clicking twice and gives some feedback. The blockUI plugin does this very well.
EDIT:
$(document).ready(function () {
$("#btn").click(function () {
$('#btn').attr('disabled', 'true'); // Disable the button if you like
$.blockUI(); // Blocking the page with a standard message.
});
});
try using .live or you could hide the button after it is pressed.
$(document).ready(function () {
$("#btn").live("click", function () {
$('#btn').attr('disabled', 'disabled');
//or
$('#btn').hide();
});
});