I really enjoy the disabling of entire fieldsets, it's quick and simple. While testing my code in the 5 major browsers, I realized that Safari and IE (sort of) do not support disabling entire field sets. http://www.w3schools.com/tags/att_fieldset_disabled.asp
Is there an alternative to this fieldset attribute? Maybe a way to disable all fields within a fieldset one by one? If so, how?
Thank you!
You can use JavaScript or jQuery to disable the inputs inside the fieldset.
jQuery Example (put this at the bottom of your page):
<script>
$(function () {
$("fieldset").find("input").attr("disabled", "disabled");
});
</script>
or if you want to disable a single class or id you can do:
$(".className").find("input").attr("disabled", "disabled");
$("#elementId").find("input").attr("disabled", "disabled");
To use with a radio button you can do something like this:
$("#radioButtonTrue").on("click", function () {
$("fieldset").find("input").attr("disabled", "disabled");
});
$("#radioButtonFalse").on("click", function () {
$("fieldset").find("input").removeAttr("disabled");
});
Related
how to do autocomplete="off" at form level in JSF?
The best and easiest way of doing this is this:
<h:form id="myForm">
<f:passThroughAttribute name="autocomplete" value="off"/>
...
</h:form>
Don't forget to add xmlns:f="http://xmlns.jcp.org/jsf/core" to your head attribite if you don't have already.
Why?
Because if you have an ajax event somewhere in your page that needs to update/render your form, it will not loose the autocomplete attribute.
Because it looks sexy (JS way looks ugly).
Tip: You can use f:passThroughAttribute for every JSF element which does not have any specific attribute of newer HTML specifications.
A real quick solution with Javascript would be (assuming you have got jQuery loaded):
<script>
$(function(){
$("#form").attr("autocomplete", "off");
});
</script>
If you want to stay with vanilla Javascript, you can do:
<script>
document.addEventListener("DOMContentLoaded", function(){
document.getElementById("form").setAttribute("autocomplete", "off");
});
</script>
Note: For the second solution make sure your browser is covered here: https://developer.mozilla.org/en-US/docs/DOM/Mozilla_event_reference/DOMContentLoaded#Browser_compatibility
If not you might be better off using the first solution.
I am trying to create a text box that when typed in it automatically adds that text right under the box. I know it sounds a bit pointless but I really need this and can't figure out how to do this. I would appreciate all help. I have come across
**HTML**
<input name="name" id="name" />
**jQuery**
$("#name").change(function() {
$("#idOfPElementWhichYouWantToEdit").text($(this).val());
});
But it doesn't work for me I've tried it.
Thanks!
Your code runs as expected (see this jsFiddle).
Some tips for you. When working with DOM elements, make sure that you wrap your jQuery code around the DOMReady event. You can use the $(function() { }); shortcut as follows:
$(function() {
$("#name").change(function() {
$("#idOfPElementWhichYouWantToEdit").text($(this).val());
});
});
You should also be advised that change() is only triggered when the input element is blurred (i.e. loses focus). For a 'live' change, consider using keyup() as follows:
$(function() {
$("#name").keyup(function() {
$("#idOfPElementWhichYouWantToEdit").text($(this).val());
});
});
You can see the above in action at this jsFiddle
Rather than using the change event, try the keyUp event for the input.
http://api.jquery.com/keyup/
The change event is not fired until the input loses focus, so that is why it isn't updating as you go.
You know those webcams you can control over the internet? When you push the button to go left, it moves to the left.. but nothing else happens on the page.. Thats what I need to create.
I have a page that allows me to control lights in my house. When I click the button, I now have it load the php script (that controls the light) in a separate frame.. but I want to get rid of this. So basically I want to create a link that will call the php in the background, but that link won't do anything to the page its on.
Any ideas?
Use a return false; in the click event:
Not Follow the Link
Explanation
The return value of an event handler determines whether or not the default browser behaviour should take place as well. In the case of clicking on links, this would be following the link, but the difference is most noticeable in form submit handlers, where you can cancel a form submission if the user has made a mistake entering the information.
The modern way of achieving this effect is to call event.preventDefault(), and this is specified in the DOM 2 Events specification.
You will need to use ajax to achieve such a behavior.
Links that don't do anything are basically HTML links where you bind the onclick event to a JavaScript function which returns false. This makes the links "do nothing" but still executes the JavaScript which tells the camera to go left/right.
HTML 5 let's you officially use anchor elements without a href attribute. But I would just bind a Javascript event listener to whatever element your already have. I'd even add these kind of interactive elements themselves to the DOM with Javascript, since they don't serve any purpose if a user has JS disabled.
...
will give you text that looks like a link.
If it's not really a link you may wish to consider a different kind of styling to emphasize the point and so that other underlined links show as links and this shows as something else. All depends on your needs and the situation.
I like jquery...
You will notice that the onclick function returns false. This is to stop the link from working...
<a onclick="do_it(this)" ...
then in your js
function do_it(anchor)
{
jQuery.ajax(
{
url : anchor.get_attribute('href'),
data : {whatever},
type : 'POST',
success : function(data)
{
alert('woo');
}
}
)
return false;
}
Pretty much what I'm doing here is:
So when the anchor is clicked jquery POSTs to the anchor's url. You can include data if you need to. This happens asynchronously so nothing happens on your page until jQuery gets response html(or whatever). If you want to do anything with the response you can get hold of it in the success function.
When the function returns it returns false, thus preventing the anchor from doing it's usual thing.
you talking about the javascript, create a onlick event / function and implement AJAX in specific DIV area
please check this out:
http://www.w3schools.com/ajax/ajax_examples.asp
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
//You need `ajax_info.txt` file with some content
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>
You can use the following jquery solution:
HTML:
Move lights to left
JQUERY:
<script type="text/javascript">
$(document).ready(function() {
$('#link1').click(function(e) {
e.preventDefault();
$.ajax( $(this).attr('href') );
});
});
</script>
Can't believe no one has posted this yet. just use javascript void:
some click function
Its one of the oldest tricks in the book!
You need Ajax to retrieve datas from PHP without loading another page.
To "disable" the link:
Link
Or:
Link
Or just write a normal link and use jQuery (or another library) to add the event:
$('a').click(function(event) {
// the code with ajax
event.preventDefault();
});
I have a recaptcha widget in my form and i want it to be made mandatory.
since i dont have any direct control over the widget in my html, i was wondering if i can add the required attribute to it after it has been rendered.
ie. if i add the folloing css
#recaptcha_response_field{background-color:#000000;}
it does color up the recaptcha widget text field. in the same vein, if there was some way of setting the required="required" attribute for input fields via css, i'd be able to make it mandatory.
Does the following work for you:
$(function() {
$("#recaptcha_response_field").attr('required','required');
});
If I understand you correctly, this should do the trick:
$(function() {
$("#recaptcha_response_field").css({background-color:#000000;});
});
Without jQuery:
document.onload = function() {
document.getElementById("recaptcha_response_field").style['background-color'] = '#000000';
};
I'm not 100% sure on the second one, but I can't test it right now.
I need to style disabled <select>elements to make them look like they're enabled. Can someone help?
PS. I am all-too-aware of the downsides of doing this sort of thing vis a vis HCI principles etc., but its a requirement so I've got to do it if it is possible ...
Thanks.
EDIT:
#AlexThomas' method works well when the elements are disabled in HTML code but unfortunately I'm doing the disabling/enabling with JQuery:
<select class='dayselector'>
<option>Monday</option>
<option>Tuesday</option>
<!-- .... etc. -->
</select>
$(".dayselector").attr("disabled",true);
$(".dayselector").attr("disabled",false);
So the selector:
$(".dayselector") //works and gets all the selects
and
$(".dayselector option") //works and gets all the selects' option items
but
$(".dayselector [disabled='true']") //doesn't return anything.
and
`$(".dayselector [disabled='false']") //doesn't return anything.
Is there something I'm missing?
You could either go with
select[disabled] { }
(not supported in <IE7)
or
select:disabled { }
(not supported in <IE9)
Maybe you should use readonly instead of disabled. This will make the input enabled, but without allowing the user to change its value.
Using jquery:
$('option[disabled="true"]').each(function () {
$(this).attr('style', 'color:red');
});
check it in action here http://jsfiddle.net/GfNve