Develop Reference

HTML input "disabled" attribute not working in Bootstrap modals

I have a webpage with an "edit" form that appears in a modal dialog using Bootstrap.
When the form appears, I would like one of the input fields to be disabled at first, and to be enabled if the user clicks a checkbox.
The problem is, my browser (Chrome) is not reflecting the disabled attribute for any form element within the modal dialog. Any form element outside the modal works fine.
This also works fine on another webpage I have with the exact same logic. It is only misbehaving on this page.
I have run the entire page source through the W3 Validator for HTML5 and get no errors back.
Code for the input element:
<form role="form" id="frmEdit" action="group_edit.php" method="post">
<!-- ... -->
<input type="text" id="txtEditAlternate" class="form-control" name="alternate" disabled />
<!-- ... -->
</form>
I even tried to brute force disable it with jQuery on document ready; this does not work:
$(document).ready(function() {
$("#txtEditAlternate").attr("disabled", true);
// ...
});
The only thing that does work when it comes to disabling the text field is when the checkbox is checked and then unchecked:
$("#chkbox").click(function() {
$("#txtEditAlternate").attr("disabled", !$(this).prop("checked"));
});
Although that kind of defeats the purpose, since the text field is supposed to be disabled until the checkbox is checked.
I have read that simply including disabled with no value is valid HTML5 (the validator did not even warn about this), and it works elsewhere.
I have tried everything I can think of, and can only speculate that it has something to do with the Bootstrap modal functionality. But like I said, the same logic works perfectly on another webpage I have.
And yes, I know Chrome likes to cache things. I have "hard-refreshed" many times, does not change anything.
Any suggestions?

try to use disabled="disabled":
<input type="text" id="txtEditAlternate" class="form-control" name="alternate" disabled="disabled" />

Use readonly attribute instead of disabled.

use prop instead of attr
$("#txtEditAlternate").prop("disabled", true);

How to re-disable (disable) the text box on clicking a button or a link?

I have a script that enables the disabled text box when clicking on a button. But, I just don't know how to re-disable the text box again.
The coding is below.
HTML:
<div class="input-group">
<label for="some-tbox" class="input-group-addon">Label:</label>
<input id="some-tbox" type="text" class="input-box" value="some value" disabled>
<span class="input-group-btn">
<button class="enable" type="button">button</button>
</span>
</div>
JS:
$(".enable").click(function(){
$(this).parent().parent().children(".input-box").removeAttr("disabled");
$(this).toggleClass("disable");
$(this).toggleClass("enable");
});
$(".disable").click(function(){
$(this).toggleClass("enable");
$(this).toggleClass("disable");
$(this).parent().parent().children(".input-box").attr("disabled", "disabled");
});
And I have made a fiddle out of it. But, It's not working. Here is the link.

Instead of messing with adding and removing classes, just toggle the disabled property with:
$(".enable").click(function() {
$(this).closest('.input-group').find('input').prop('disabled', !$(this).closest('.input-group').find('input').prop('disabled'))
});
jsFiddle example

The problem is this line $(".disable").click(function(){ ...})
You are binding a click event handler to a class named disabled which was not available initially during page load, it appears dynamically later.
You need to delegate the event handler to some parent which always exist and then handle the event there, in this case you can do this:
$(".input-group").on('click', '.disable', function(){
$(this).toggleClass("enable");
$(this).toggleClass("disable");
$(this).parent().parent().children(".input-box").attr("disabled", "disabled");
});
jQuery's on function

You cann't bind an element ".disable" that don't exist , In that case you can rebind it when you changed it's class. Code behind may help you:
$(".enable").on("click",enabledClick)
function enabledClick (argument) {
$(".enable").parent().parent().children(".input-box").removeAttr("disabled");
$(".enable").toggleClass("disable");
$(".enable").toggleClass("enable");
$(".disable").on("click",disabledClick)
}
function disabledClick (argument) {
$(".disable").parent().parent().children(".input-box").attr("disabled", "");
$(".disable").toggleClass("enable");
$(".disable").toggleClass("disable");
$(".enable").on("click",enabledClick)
}

How to set focus on text box whenever it appears on the screen

I've made a web application That starts from a specific amount and every time a donation is made it counts down and shows how much is needed. And at one time I might have about 10-20 of these counting down and I am always creating new ones. Now when I am doing that it would be nice that when I click the button it automatically focuses on the text field for ease of use. however I can't quite get that to work.
The window to set the countdown is shown using angularjs dialogs/modals. This means that when I click the a button it writes code onto the page that shows the dialog/modal and when I submit it it is removed from the page completely.
The first time around when I click the button it focuses on the text box and I can type the number and press enter and it's submitted, now I want to create a new one. I click the button, up comes the modal but now I have to grab the mouse, move it to the input and click it. Waste of time and not user friendly.
What I'm asking is for a way to have it focus on the text field when using modals every time I click the button.
here's the window:
<form name="formCountdown" novalidate class="css-form">
<div modal="showCountdownModal" close="showCountdownModal = false" options="opts" ng-cloak>
<div class="modal-header">
<h4>Enter Countdown Amount</h4>
</div>
<div class="modal-body">
<input id="focusbox" type="number" min="1" autofocus required ng-model="countDownAmount" name="countDownAmount" ui-keypress="{13:'setCountdown()'}" select-on-focus />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary cancel" ng-disabled="formCountdown.$invalid" ng-click="setCountdown()">Set</button>
</div>
</div>
</form>
I've tried using autofocus, and that works fine the first time you press the button after loading the page. but the second and up it does not.
I've also tried using this jquery code with no luck:
<script>
$("#focusbtn").click(function() {
$("#focusbox").focus();
});
</script>
And now I am completely lost and would really love it if someone could help me out here.

Edit: forgot to put in the timeout, to make sure the browser is ready!
add the following line to your setCountDown() function:
$timeout(function (){
document.querySelector('#focusbox').focus();
},0)
You need to inject the $timeout in your controller
That will probably do the trick!
However, this will work, but dom manipulation should be done in a directive!

I copied your posted code together with the script and it works just fine. I'm not sure if I understood the problem but the autofocus works well in my end. Autofocus is present after the page has loaded or refreshed and even after the button has been clicked. Of course the autofocus will be removed if a click outside the input text has been triggered.
Morever, I think Autofocus is an attribute by HTML5. You might want to include in your HTML or maybe it is just a browser compatibility issue.
You can test or check if autofocus is supported by your browser at http://html5test.com/.
Hope this help somehow.
EDIT:
Try this on your script.
$(document).ready(function() {
$(".modalName").on('shown', function() {
$(this).find("[autofocus]:first").focus();
});
});

IDs not being recognized when placed in modals

I am creating a registration form where its contents are contained in DIV (hidden), then when the user clicks a button, the modal shows and the content is loaded through the ID of the DIV.
However, I am encountering a problem where the button of the DIV is not recognized in my script. I assigned a click event using jquery, but it doesn't work. Probably because the hidden DIV has conflicts with the DIV create in the modal (which will eventually have the same IDs).
Here is my script:
$('#addCollege').click(function(e){
modal.open({content: $('#addCollegeForm').html()});
e.preventDefault();`
});
This is the DIV
<div id="addCollegeForm" style="display:none">
<label>College:</label><br>
<input type="text" placeholder = "Enter college name here..." id = "collegeDescription" > <br>
<input type="button" value="Save" id= "addCollege">
</div>
Thanks and I appreciate your help.

I wrote a dialog plugin for bootstrap, and got a similar problem.
I want to pop up an existing dom element.
Here is solution:
$targetElement.detach().appendTo($window.find('.modal-body')) // $targetElement is an existing dom
Detach element and append it to container.
Don't forget to revert the element to old container.
Hope it helps.
Regards

Try moving the button that opens your dialog out of the dialog:
EDIT - something like this should work...
HTML...
<div id="addCollegeForm">things in your dialog</div>
<input type="button" value="open dialog" id="addCollege">
jquery...
$("#addCollegeForm").dialog({
autoOpen: false
});
$('#addCollege').click(function () {
$("#addCollegeForm").dialog("open");
});
http://jsfiddle.net/DTq6m/
http://api.jqueryui.com/dialog/#option-autoOpen

Firefox - hiding focus highlight when not on an input control

We have a requirement whereby a page can consist of a form with several sections. Sections can be added or removed. After the user chooses to add a section the form is submitted and a new page returned with the new section added. The browser should scroll to the top of the new section. This is fine and I have a generic jquery "scroll to anchor" solution working. However, in addition to simply setting window.location(), I also need to ensure that for keyboard users, hitting tab will take them to the next field after the anchor point. I'm using the solution to this question to do this.
This works fine in IE 8/9 but in firefox(15), I'm seeing a little focus square being rendered where the anchor tag is. I would like to suppress this, I tried setting display:none but of course this stops the scroll working. I tried to create a fiddle but jsFiddle doesn't demonstrate the problem as the fddle site itself is interfering with the focus setting - but the same code in the same browser running locally does.
here's a reduced version of my code that demonstrates the problem.
<html>
<head>
<title>test scroll</title>
</head>
<body>
<form>
<div>Blah</div>
<div>
<label for="a">Section 1: <input id="a" type="text" /></label>
</div>
<a id="scrollToAnchorSection2"></a>
<div>
<label for="b">Section 2: <input id="b" type="text" /></label>
</div>
</form>
</body>
</html>
and my jquery
$(document).ready(function() {
/* Find any "scroll to anchors" that have been set */
var anchors = $('[id*=scrollToAnchor]:first');
if (anchors.length == 1) {
window.location = "#" + anchors.attr("id");
// Set tab position
anchors.attr("tabindex", -1).focus();
}
});
and css
div {
margin-left:5em;
}

As requested...
the Blur function takes care of the input lost focus.
$('input').blur(function (){...})? isn't this what you need?
The jquery documentation has this interesting comment.
"The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as . In recent browsers, the domain of the event has been extended to include all element types."