I have to greyout an entire form and make it disabled, if is possible using (controlled by a Javascript)
My idea was:
<div style="background-color: gray; opacity:0.7; z-index:2;">
<h:form prependId="false" id="login_form" style="x-index:1;">
...button
...inputBox
</h:form>
</div>
But it doesn't work properly, infact the grey of the DIV is only in the background and I want grey on ALL the object in the form (inputbox, button, text, etc...)
I prefer with just one DIV so I don't have to change the style of each object (button disabled, inputbox disabled, etc...)
Thanks
There are a number of ways this can be achieve - one simple, pure-CSS based approach would be to define a CSS class .disable-form and apply it to the <div/> that encloses your form when you want your form to be disabled.
You could do this like so:
.disable-form {
/* Make form elements appear disabled against grey background */
background-color: gray;
opacity:0.5;
/* Prevent user interaction with form while disabled */
pointer-events:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
<form prependId="false" id="login_form">
<div>
<label>Some field</label>
<input />
</div>
<label>Some field not wrapped in div</label>
<input />
</form>
</div>
<br>
<br>
<button id="toggle-disable">Click to toggle form disable</button>
<script>
document.getElementById('toggle-disable')
.addEventListener('click', function() {
document.getElementById('login_form')
.parentNode
.classList
.toggle('disable-form');
});
</script>
Note that I've adjusted the HTML in this code sample for the purpose of demonstrating the technqiue - the key here is defining and apply the disable-form CSS to achieve the desired affect on your form.
Related
I am trying to create a trigger in my form such that if someone double-clicks the empty part of textarea, it increases the height. I am trying the below code but it doesn't work.
What am I missing?
HTML
<div id="div_details" class="fields">
<label id="label_details" for="input_details" >Details</label><br/>
<textarea id="input_details" class="" name="details" disabled="disabled" >Customer can look more.</textarea>
JavaScript
$('#input_details').dblclick(function(){
$('#input_details').animate({height: '+=50'}, 500);
});
jsfiddle
The problem is that disabled form elements don't fire mouse events.
Your code would work if it were applied to a text area that wasn't in a disabled state.
One possible solution is to surround the text area in a container, which you animate instead, and have the text area set to fill the container.
An example:
$('.container').dblclick(function(){
$('.container').animate({height: '+=50'}, 500);
});
.container{
height:100px;
}
#input_details{
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div_details" class="fields">
<label id="label_details" for="input_details" >Details</label><br/>
<div class="container">
<textarea id="input_details" class="" name="details" disabled="disabled" >Customer can look more.</textarea>
</div>
Put a div around the textare and bind the event to this div.
It´s not possible to do this with a disabled textarea.
Example: (binded to your div)
$('#div_details').dblclick(function(){
$('#input_details').animate({height: '+=50'}, 500);
});
You've disabled your textarea, which means the double click event is never triggered.
A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element. (https://www.w3.org/TR/html5/forms.html#attr-fe-disabled)
Once you remove the disabled attribute, you'll see it starts working. I'd suggest to not use a textarea if you're not planning to make the element interactive.
Is it possible using jQuery to get whole div content(dynamically generated elements) with values? For example, child element may be a div, span, select, or input?
I am trying to save whole div content(generated on fly) with values as .html file. I tried with one div which has form and input elements.
HTML:
<div id="inputs">
<form class="mainForm">
<div style="height: 100%;" id="div1">
<label>Input1</label>
<input type="text" id="input1" name="input1"/>
</div>
</form>
</div>
<input id="addform" type="button" value="Click to add Input"/>
<input id="getform" type="button" value="Click to get html"/>
jQuery:
$(document).ready(function(){
$("input#addform").click(function(){
$("div#inputs").append($('form.mainForm').clone().html());
});
$("input#getform").click(function(){
alert($("div#inputs").clone().html());
});
});
FIDDLE:
http://jsfiddle.net/UhJfn/
How to get whole div#inputs content with values (entered by user) On click of Click to get html button?
Help would be appreciated.
P.S: Here I used only one input in form. But in my real case, we do have select, span, image, etc.
Try this,
You have to explicitly update the value attribute to achieve your need.
$(document).ready(function(){
$(document).on('keyup','input[type="text"]',function(){
$(this).attr('value',$(this).val());
});
$("input#addform").click(function(){
$("div#inputs").append($('form.mainForm').clone().html());
});
$("input#getform").click(function(){
alert($("div#inputs").clone().html());
});
});
DEMO
I am using this plugin to customize check boxes and radio buttons on a page.
These radio buttons are in a div#Main element which comprise of some other HTML elements also. I need to disable everything in this div on a button click (I am using jQuery). For this I have the following code,
HTML
<input type="button" id="DisableElements" value="Disable elements" />
<div id="Main">
<input type="radio" class="styled" name="reg-all"/>
<input type="radio" class="styled" name="reg-all"/>
<select id="MyList">
<option value="1">Choice-1</option>
<option value="2">Choice-2</option>
</select>
<textarea id="Comments" rows="4" cols="5"></textarea>
</div>
Script
$(function(){
$('#DisableElements').click(function(){
$('#Main').find('*').attr('disabled', 'disabled');
});
});
Issue: Everything got disabled correctly except the radio buttons.
Behind the scenes, the plugin script hides the actual radio button and
put a span over the radio buttons like a blanket. This span has
got a background image sprite with different states (on and off) which
gets updated accordingly on radio button selection. This was the
working of this plugin.
I could have used the inbuilt method of the plugin to disable/destroy the functionality but I did not find any method for this.
images loads with little delay after the DOM has finished loading,
so you can try calling your function in $(window).load().
hope it will help.
The solution i made can be thought of as a patch but works nice (for my scenario at least). What should have been the right approach for this would be using some existing API method to reflect the change, something like disable() or similar but i did not find such method or something like this.
Solution: Making the radio buttons appear like disable (non clickable).
Because i do not want to dig into the plugin js file. For this i made a transparent div with some width and height enough to cover the radio buttons and place it over them like a layer between radio buttons and cursor. This div is hidden by default and show this while making controls disable. keeping it short and sweet, here are the code changes.
HTML
<input type="button" id="DisableElements" value="Disable elements" />
<div id="Main">
<div id="Blanket"></div>
<input type="radio" class="styled" name="reg-all"/>
<input type="radio" class="styled" name="reg-all"/>
<select id="MyList">
<option value="1">Choice-1</option>
<option value="2">Choice-2</option>
</select>
<textarea id="Comments" rows="4" cols="5"></textarea>
</div>
CSS - for blanket div
#Blanket
{
position:absolute; /*Imp: otherwise it will disturb the UI*/
width:100px;
height:100px;
display:none;
/* top/left adjustments, if required! */
}
Script
$(function(){
$('#DisableElements').click(function(){
$('#Blanket').show();
$('#Main').find('*').attr('disabled', 'disabled');
});
});
This solution however needed to drop the fear of what if someone using developer tools to out smart the application but that does not matter any way. Besides, you can-not 100% block the user from using such tools.
Another solution which worked and looks more appropriate: Placing invisible blanket over input controls sounds like a patch and can be easily snapped. The plugin script adds a CSS class named styled and requires to add following styles to achieve customized look and feel.
input.styled
{
display: none; // hides the parent input element
}
Because of this, even if we switch button states to disable, the changes did not reflect because the parent element was hidden making the other listeners difficult to attach. By changing the styles to following, everything worked.
input.styled
{
position: absolute;
opacity: 0;
}
It makes the parent input element invisible but completely active on DOM behind the scenes.
I need to have an onclick/hover event on an input tag which is disabled.
Is there another way but to wrap it in another tag and give that tag the events?
<input type="checkbox" onclick="cant_choose('event')" disabled="disabled" value="2" name="enroll_to[event][]">
You could simulate it being disabled with JavaScript and CSS.
That is, blur all focus it receives, and add a class with something like so.
input.disabled {
background: #d4d0c8;
color: #888;
cursor: default;
}
Update
See it in comparison with the normal and browser disabled input box on JSbin.
You could wrap the input field inside a container and bind the click event on it.
<div id='input-container'>
<input id='myText' disabled />
</div>
<script>
$('#input-container').click(function() {
alert('test');
});
</script>
http://jsfiddle.net/M2EYH/
If you have multiple disabled fields, and don't want to make an unique ID for each container, you can give the containers a class name instead of an ID.
I want to show few text fields on click of a radio button ,how can i do it? without JavaScript or AJAX.
You must employ JavaScript for this.
The only other thing besides JavaScript that might work (I haven't tried it but it's something to investigate) is to use the :focus pseudo class in CSS. Even if it works it won't be cross browser probably, but since you're targeting specific mobile platforms it might be OK. It would work like this:
<style>
#bar { display:none; }
#foo:selected #bar { display:block; }
</style>
<input type="radio" id="foo">
<label for="foo"><div id="bar">Stuff goes here</div></label>
I don't know if :focus also applies to a form element's associated label, but it certainly may considering that clicking an element's label does activate the "click" event on the form element it's labeling.
Something to try anyway. If you're targeting mobile Safari that should have good support for these kind of selectors.
Yes, can you do this with a psudo-class selector but it certainly will not work cross browser. You can check:
http://www.quirksmode.org/css/contents.html
for a list of what browser support what selectors. IE 7 and lower do NOT support the :focus selector, although you could accomplish roughly what you want with :hover (although I imagine you don't want it to show only on hover).
The following example works in Firefox (3.5):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<style>
input { float: left; }
/* Make the text hidden when the page loads */
.text_to_show { display:none; }
/* This style affects element which immediately follows the focused class */
.trigger:focus + div.text_to_show { display: inline; }
</style>
</head>
<body>
<input type="radio" name="radio" class="trigger" />
<div class="text_to_show">This text is tied to the first radio button.</div>
<input type="radio" name="radio" class="trigger" />
<div class="text_to_show">This text is tied to the 2nd radio button</div>
</body>
</html>