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 do I use this JQuery code to clean input fields of their content onclick of reset button?

Code:
<script type="text/javascript">
$(".reset_form").click(function() {
$(this).closest('form').find("input, textarea").val("");
});
</script>
Button:
<div class="reset_form">
<a class="anchor_link">
<span class="reset_button">
Reset
</span>
</a>
</div>
Using the code above I want to be able to clean input fields of their content when a user clicks on reset_form. However, being new to JS/JQuery I am unsure as to how to accomplish this since I am not using an input button but a div that looks like a button.
Question
How can i tweak my code so that when a user clicks on .reset_button that the fields will be cleared?

<div class="form-container">
<form>
<input type="text" />
<textarea></textarea>
</form>
<div class="clear-form">
<span class="reset_button">Reset form</span>
</div>
</div>
$(document).ready(function() {
$('.clear-form').on('click', function() {
$(this).closest('.form-container').find('input, textarea').val('');
});
});
Fiddle

In order to help you use the DOM traversal selectors like closest() and find(), it is first necessary to know roughly where your form is in relation to the .reset_form <div>, does it have an ID attribute (which makes it very easy to select the form), etc.
However, assuming there is only one form on the page, then this code will work:
Working jsFiddle example
$(".reset_form").click(function() {
$('form').find("input, textarea").val("");
});
As Jedediah mentions below, the above code will reset/clear all forms on the page. If you only wish to clear one specific form, then you can specify an ID in your form tag, thus:
<form id="justthisform"> ... </form>
You can clear only that form by modifying the active line as follows:
$('#justthisform').find("input, textarea").val("");

If you want to clear all elements in the form (radio reset to defaults, dropdowns, etc) you can use the native reset on the form DOM object but use jquery to find it like this:
<script type="text/javascript">
$(".reset_form").click(function() {
$(this).closest('form')[0].reset();
});
</script>

Well one thing to note is that HTML forms natively support resetting via a reset function in the browser:
$(".reset_form").click(function() {
$(this).closest('form')[0].reset();
});
But yeah if your function isn't working then it looks like your (fake) button isn't embedded within the form itself. jQuery's .closest() function will find the form if you do
$(this).closest("form")
So the only thing you need to fix is finding that form.

How do I make this Javascript checkbox trigger action work like my CSS only example

I'm using the following code to test for "if" a checkbox is checked on page load.
If it is, then a certain additional field will be shown (called myfield):
<style>
#myfield {
display: none;
}
</style>
<input type="checkbox" id="mycheckbox" name="mycheckbox" />
<input type='text' id='myfield' name='myfield' />
<script>
if ($("#mycheckbox").is(":checked")) {
document.getElementById("id").style.display="block";
}
</script>
However, this only works when the page loads and the checkbox is already checked. It doesn't work live when the box isn't checked on page load, and you go to click the box. I want the hidden field to show up right away when the box is "checked" without the page having to reload. I then want myfield to hide right away when the box is unchecked.
Can any anyone point out the better/proper way to do this?
Additionally:
Of note: I do know how to do this in CSS using labels, but I need to use javascript other times.
Here's what works fine in modern browsers using just CSS: http://jsfiddle.net/3KTC3/
Here's that CSS only jsfiddle code:
<style type="text/css">
.label-for-check {
display:none;
}
.check-with-label:checked + .label-for-check {
display:block;
}
</style>
<div>
<input type="checkbox" id="check" class="check-with-label" />
<label for="check" class="label-for-check">
<br /><br />MyField<br />
<input type='text' id='myfield' name='myfield' size='10' />
</label>
<div>

You need to attach a change event handler. Your posted code only executes when page is loaded, it doesn't watch over your element's state.
Here's a jQuery equivalent to your CSS version with classes and adjacent selector:
$('.check-with-label').change(function() {
$(this).next().toggle(this.checked);
}).change();
Fiddle
Explanation: this references the checkbox being clicked, get the next element (equivalent to your CSS + selector) and toggle its display based on the checked state of the checkbox.
Another version that works only with your 2 given IDs:
$('#mycheckbox').change(function() {
$('#myfield').toggle(this.checked);
}).change();
Fiddle
Note that your CSS version is compatible with all desktop browsers including IE7 and above. Consider whether it is necessary to use JS for this.
edit: You have to trigger the change handler after attaching it, so if the checkbox is already checked when the page is loaded, the triggered handler will display the field.

Your problem is that jQuery will only check one time (when you load the site) if your checkbox is checked.
The change handler will fire every time the user changes the checkbox, if it is cheked it will show #myfield
Do something like this:
$('#mycheckbox').change(function() {
if ($(this).is(":checked")) {
$('#myfield').show()
}
});

$(document).ready(function(){
if($("#mycheckbox").is(":checked")) $('#myfield').show();
$('#mycheckbox').on('change', function(){
if($(this).is(":checked")) {
$('#myfield').show();
} else {
$('#myfield').hide();
}
})
});

Javascript onclick not working on radio button

I have a problem with javascript. I have downloaded a rating star plugin , this one to be exact: http://www.fyneworks.com/jquery/star-rating/#tab-Testing
I have multiple things to rate on one page, so i thought i could use an onclick to send it to a function, that sends it to my database with ajax. The problem is, when a rating star is clicked nothing happens, ive tried it on a regular submit button and the function gets executed.
Here is the code :
<script type="text/javascript">
function postform(){
alert('Thing is clicked');
};
</script>
And the star is actually a radio button:
<input name="adv1" type="radio" class="star {split:4}" value="0.50" onclick="postform()"/>
I can't see what is wrong with the code, because when i test it on a regular button like this :
<input type="submit" value="testbutton" onclick="postform()"/>
It gives me the alert Thing is Clicked.
Somehow the star doesn't like the onclick stuff..
Ive tested it in IE, Chrome and FF, nothing ever happens
could someone help me out here?
Thanks alot!
Edit:
As requested by Lukas , i have this in my head :
<script type='text/javascript' src='jquery.min.js'></script>
<script src='jquery.MetaData.js' type="text/javascript"></script>
<script src='jquery.rating.js' type="text/javascript"></script>

That library is handling the onclick event of the radio button for you, so you cannot handle it by adding an attribute onclick to the input element.
According to their documentation you need to put some code like this in a script:
$('.auto-submit-star').rating({
callback: function(value, link){
alert(value);
}
});
Then add the class auto-submit-star to the class list of your radio button:
<input name="adv1" type="radio" class="auto-submit-star {split:4}" value="0.50" onclick="postform()"/>

Radio button inside anchor element is reset after jQuery click handler

I have a situation where an element, of type radio, is contained in an element. The anchor element has a href but I want to override that behaviour by adding a jQuery 'click' handler to the element.
The click handler makes the radio button inside it the selected one within the group. This all works when the anchor is clicked, however, when the radio button is clicked it appears that jQuery resets the selected radio to the previously selected one!
Here is a the simplified page that duplicates the issue:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#a1").click(function(event) {
anchorClicked("a1");
return false;
});
$("#a2").click(function(event) {
anchorClicked("a2");
return false;
});
});
function anchorClicked(anchorId) {
$('#' + anchorId + ' input:radio').attr("checked", true);
alert("Look at what is selected and what happens after the event when this dialog is closed!");
}
</script>
</head>
<body>
<form>
<ul>
<li id="li1">
<a id="a1" href="javascript:alert('default functionality')">
<input value="1" name="rb" type="radio" id="rb1">
<span>Details 1</span>
</a>
</li>
<li id="li2">
<a id="a2" href="javascript:alert('default functionality')">
<input value="2" name="rb" type="radio" id="rb2">
<span>Details 2</span>
</a>
</li>
</ul>
</form>
</body>
Does anyone have any idea how I can prevent jQuery for resetting the radio button?

<script type="text/javascript">
$(document).ready(function() {
$("input:radio").click(function(event){event.stopPropagation();});
});

This is a slightly strange way of doing things. You can get the effect you are after by first using a label element instead of the span like so:
<label><input value="1" name="rb" type="radio" id="rb1" /> Details One</label>
<label><input value="2" name="rb" type="radio" id="rb2" /> Details Two</label>
By doing this clicking anywhere in the label element will select the radio button.
From there you should watch for a change event on the radio buttons if you want to:
$('input:radio[name="rb"]').change(function() {
if (this.checked) {
alert('remember the deselected radio button changes also');
}
});

The easiest way I've found to solve this issue is to remove the href attribute from the anchor element during the click event:
$("#a1").click(function(event) {
this.removeAttribute("href");
anchorClicked("a1");
});
This means I no longer need to return false to prevent the default behaviour and the event can bubble up the DOM safely and everything then works.

The problem is that your "return false" to cancel the default anchor tag behaviour is also cancelling the behaviour of the clicking on the radio button so it sets it back to what it was originally, regardless of the actions of the click event. Setting the fucntions to return true exhibits the expected behaviour (as well as the default click function).
To fix it finally you want to get rid of the default click event completely. To do this you could very simply change the href to "#" so that it doesn't do much when actioned. See http://jsfiddle.net/FrcRx/1/ for an example of this in action.
the best way to do it would be to remove the href attribute completely. This of course makes most browsers not consider it a link so you would need to apply appropriate styling yourself to make them look like links still.
This is done with the removeAttr jquery function and the addClass function. See a demo of it here: http://jsfiddle.net/FrcRx/2/

$('input:radio').click(function(e) {
e.stopPropagation();
});
$('a[id^="a"]').click(function(e) {
$('input:radio:first', this).attr("checked", true);
return false;
});
The important part is stopping propagation of the click event when the radio button is clicked. However it seems that if you return false then the radio button is not select as you would expect it to be.
Next we bind the click event to any a tag which has an id starting with the letter "a". When clicked the first radio button input inside of the a tag is selected and then checked.
DEMO: http://jsfiddle.net/marcuswhybrow/mg66T/2/