I have a <input type = 'file'>. To enable/disable it I use jQuery("#my_input").prop('disabled' ,true/false).
If I disable it, then refresh the page, jQuery outputs:
console.log(jQuery("#my_input").prop('disabled' )) ==> true
even though the 'disabled' prop is not included in the html.
Clearing the cache does not fix it.
Firefox has long been saving input values through refreshes, and now the latest builds also save input / button's disabled status through refreshes.
I'm not sure whether this is intended or a bug, but for the time being an workaround is to just set the inputs' disabled status to their default ones inside a DOM ready handler.
jQuery(function($) {
$("#my_input").prop('disabled', false);
});
Demonstrating the issue: Fiddle (open with Firefox)
And now fixed with the snippet above: Fiddle
You can also apply autocomplete="off" to the element and its disabled status won't persist through refreshes.
Fiddle
Note that this will prevent any form of auto-completion in the element. Of course, this is an excellent solution for file inputs and buttons, however depending on your use case (e.g. when it involves text inputs) you may prefer the former solution. Thanks to #dsdsdsdsd for the tip!
p.s. This has been reported to Mozilla already: Bugzilla ticket.
Firefox should include it in html also.
What happens if you use:
jQuery("#my_input").attr('disabled' ,true)
Related
Let's say I gave this code:
<input type="hidden" id="field" name="field" value="1">
<button id="change">Change</button>
And this javascript:
alert($("#field").val());
$("#change").on("click", function(){
var newValue = parseInt($("#field").val()) + 1;
$("#field").val(newValue);
alert($("#field").val());
});
If I change the value, go to a different page and then use the back button, in chrome and firefox the latest value is shown while in IE the default value.
How to fix that without using sessionstorage?
Fiddle
This is not a standard practice, may be Firefox and Chrome are caching the values. But you should not rely on it.
If you refresh the page using Ctrl + F5, it will not work.
you can not persist the value in the page itself..., any full page reload will clear any values which you have changed... so unless you save the state to some sort of persist layer... depending on the bowser the back button will behave in different ways... some much older browsers with no caching will reload the whole page.
Some may cache the actual javascript before the modifications and therefore load the old javascript and with the old value form the cache as well.
It is better to handle this in some sort of persist layer
see:
Ajax, back button and DOM updates
Please try to set value with:
$("#field").attr("value", newValue);
Don't use .val() method. I have a similar issue and I solved with it because IE not refresh a hidden value with .val().
I have an issue perhaps very similar to
How do I make a required radio input optional in Firefox using JavaScript?
My example can be found here:
http://www.bradkent.com/?page=test/ff_radio
In a nutshell, I have an event viewer on a checkbox that toggles the visibility of a radio group. The radio group is initially required, but when hidden, I change the radio inputs' required property to false (node.required = false). When the group is re-shown, the required property is changed back to true.
the dom inspector confirms that neither the required attribute or property is set.
So why is it requiring an option to be selected?
What am I doing wrong, or overlooking?
Thank you
well, I figured out the issue
node.required = true/false vs node.setAttribute('required',1); and node.removeAttribute('required');
the former had been done earlier in the code and at that point node.removeAttribute('required'); node.removeProp('required'); etc were all of no use in removing the required property (in Firefox)
I am trying to add javascript to set Focus on a button, and hope to make the button look just the way it does when a user 'tabs' thru the HTML Form to reach the button.
The page that I am working on has an button element:
<input type="Submit" id="myBtn" class="myBtnClass >
In javascript function, I set focus to it using:
$("#myBtn").focus() When this function is invoked, I can see change of button image. Also, when I click 'Enter', the form does get submitted. However, in this case, when the image changes, I don't see the "Dotted inline" that generally appears on buttons.
but the dotted line Does appear when a user "tabs" to that button.
Am I expected to do anything other than $("#myBtn").focus()" ?
you can use css property:
`outline`
Could be running in IE7 compatibility mode, or using the wrong doctype.
See this similar question for more info and possible solutions: CSS 'outline' property in IE, and jQuery errors
I'm running this code in Firefox 11 on Windows 7. (See http://jsfiddle.net/QStkd/).
$('<div><input type="text" value="val" /></div>').dialog();
The value in the input isn't selected, which is does do in Chrome and IE, it also doesn't work if I manually call the select() method.
Is this a known problem? Is there any way to select it? Timers work but if I click run on jsfiddle after it loads it doesn't work anymore.
It looks like calling focus() (which jquery-ui does by default to the first tabbable element) on Chrome (can't test IE -- on OS X) focuses the box and selects the text within the box.
Taken from jquery.dialog.ui.js:
// set focus to the first tabbable element in the content area or the first button
// if there are no tabbable elements, set focus on the dialog itself
$(self.element.find(':tabbable').get().concat(
uiDialog.find('.ui-dialog-buttonpane :tabbable').get().concat(
uiDialog.get()))).eq(0).focus();
Firefox, on the other hand, seems to only place the cursor within the box when calling focus. Therefore, you must call implicitly call select after the dialog has been created in order to achieve what you're looking to do.
If you reload your timers fiddle (as opposed to clicking run), you'll notice the example works every time. I think that jsFiddle is actually the culprit here (possibly the hashchange event, or some focus event on one of the panes after you press 'run' -- I haven't dug that deeply).
EDIT: (sorry, it's late) Looks like the root cause of the "problem" is Firefox. Not sure if this is designed behavior or not, but from what I can see, it looks like Firefox will not allow text to be selected in two different input elements within different content panes at the same time on the same page. This doesn't seem to affect Chrome (and, assumingly, IE9).
I made a quick example locally that has two iframes side by side (let's call them left and right). Left contains a textarea, and right contains your jquery-ui dialog -- similar to the fiddle you posted. right has the following code:
<script type="text/javascript">
$('<div><input type="text" value="val" /></div>').dialog();
$('input').select();
</script>
left has the following code:
<script type="text/javascript">
setTimeout( function() {
$('textarea').focus();
}, 1000);
</script>
If you piece these together and check out the result in Firefox, you'll notice that the input is focused and selected until the textarea in left is focused. I suspect something akin to this is happening in jsFiddle.
Try to use open event of ui dialog.
This event is triggered when dialog is opened.
$('<div><input id="yourInput" type="text" value="val" /></div>').dialog({
open:function(){
$("#yourInput").focus().select();
}
}
)
http://jsfiddle.net/sergeir82/A6Wah/8/
http://jsbin.com/etivej/4/
This is a FF issue in the dom determining if you have set the DOCTYPE. There is not a great way to fix it, a timer to focus tends to be the "hack around". However there is another step, if your Doctype is set to w3 xhtml standards you can use this to get it selected on focus. Add onfocus="this.select();" as a property of your input, so that when it is focused, it is immediately selected.
I have a form, in which I am disabling the submit button until an user has typed in all the mandatory fields. I was initially using onkeyup to keep a tab on the mandatory fields and enable the button when all the mandatory fields are filled.
But I had users complaining that they filled in the form using AutoFill button on the Google toolbar and the submit button was still disabled.
I fixed this problem in IE by calling the onpropertychange event for each input element and it worked nicely.
But in Firefox, I couldn't find an event which will get triggered when the Google autofill button is clicked.
Help much appreciated.
Thanks for your answers. I had to respond quickly to this issue hence I used the 'setTimeOut()' function to check for mandatory fields and enable the submit button.
$().ready(function() {
CheckRequiredFields();
timeOutRtn = setTimeout("AutoMonitorMandatoryField()", "3000");
});
function AutoMonitorMandatoryField() {
if ($("#btnSave").attr("disabled")) {
CheckRequiredFields();
timeOutRtn = setTimeout("AutoMonitorMandatoryField()", "3000");
}
}
crescentfresh - I will look into the DOMAttrModified event and see if I can get it to work for me.Thanks
Judging from this google toolbar support thread, it seems autofill is not only a huge PITA for developers, but also very difficult to turn off. As of Aug 09 google claims it will honor the autocomplete="off" attribute on the containing form but as of today this feature does not seem to be released yet.
You used to be able to give your input elements non-sensical names (eg name="xx_Address_32423423") to confuse autofill (and thereby effectively disable it), but they've made autofill more "intelligent" by looking at substrings within your element names in order to determine if the field can be autofilled or not (again, judging from complaints in that thread).
In your case, you may as well roll with the punches and find an equivalent for onpropertychange for Firefox. Have a look at the DOMAttrModified event. Specifially, try checking the event.attrName property to see if the value has been changed by autofill:
function realOnChange(event) {
var attrName = event.propertyName || event.attrName;
if(attrName === 'value') {
// etc
}
}
The check for event.propertyName is to stay compatible with your current onpropertychange implementation (if that is even possible).
There's no need to add complex setTimeOut nor setInterval.
Just catch the "change" event of any refillable textbox of the form, go through every refillable field and if it's not empty hide the label