Hello I have created this checkbox,how can I hide it?
<div class="checkbox">
<label for="sendEmail">
<g:checkBox name="sendEmail" checked="${sendEmail == 'on'}"
onchange="swapFieldsets(this, '#sa-email', '#sa-password')" />
<g:message code="onBoard.noAccessEmail" default="Send Access Email" />
</label>
</div>
You can also do it by javascript. Give your element an ID or hide it by name or class.
document.getElementById("checkbox").style.visibility = "hidden";
document.getElementsByName("checkbox").style.visibility = "hidden";
document.getElementsByClassName("checkbox").style.visibility = "hidden";
If you can use jquery this is also possible:
$('#checkbox').hide();
Take a look at this link for more information
take a look at this example to see what you want to do with your element. Then you can choose between the answers given. :)
in your style.css, add
.checkbox{
display:none;
}
note: this will hide all elements with the class .checkbox, so you might want to change it (or better: give it an id)
or do it inline:
<div class="checkbox" style="display:none;">
<label for="sendEmail">
<g:checkBox name="sendEmail" checked="${sendEmail == 'on'}"
onchange="swapFieldsets(this, '#sa-email', '#sa-password')" />
<g:message code="onBoard.noAccessEmail" default="Send Access Email" />
</label>
</div>
if you want to do it in javascript, it would look like this: (you would have to give the checkbox an id)
document.getElementById("checkboxid").style.display = 'none';
Related
I have two radio buttons "yes" and "no", on clicking "yes" two text fields should be shown and on clicking "no" another input text field should be generated. Previous input fields should be hidden, how to achieve this in HTML?
<input type="Radio" name="radio2text" value="Radiobutton1" onclick="javascript:radioWithText('yes')" checked="checked" />Yes
<input type="Radio" name="radio2text" value="Radiobutton2" onclick="javascript:radioWithText('no')" />No
<div id="Incident ID" style="display:visible;">
<br>Incident ID :<input type="Text" name="Incident ID"/></br>
</div>
<div id="Description" style="display:visible;">
<br>Description :<input type="Text" name="Description"/></br>
</div>
<div id=" Ref" style="display:visible;">
<br>Ref :<input type="Text" name="Ref"/></br>
</div>
<script type="text/javascript" language="JavaScript">
function radioWithText(d) {
if(d =='yes'){
document.getElementById('Incident ID').style.display = "visible";
document.getElementById('Description').style.display = "visible";
} else (d == 'no') {
document.getElementById('Ref').style.display = "visible";
}
}
</script>
What I need to change here to get the desired output? I'm getting all the input fields for both the radio buttons.
You had a large amount of typos and were not really setting up your code correctly. See the inline comments below for details:
<!DOCTYPE html>
<html>
<head>
<title>Your page title here</title>
<style>
/* This CSS class is applied, by default to all the labels and
textboxes. The JavaScript just adds or removes it as needed. */
.hidden { display:none; }
/* Give each element that uses this class a one line top and bottom margin to
separate it from other elements. */
.row { margin: 1em 0; }
</style>
</head>
<body>
<!-- Radio Buttons should have a value that describes the meaning of the button.
Here, yes and no will do it. Also, don't use inline HTML event attributes, such
as "onclick", ever. It's extremely outdated, can lead to bugs and duplicated
code and doesn't follow modern best-practices. Instead do your event handling
in JavaScript. -->
<input type="Radio" name="radio2text" value="yes" checked="checked">Yes
<input type="Radio" name="radio2text" value="no">No
<!-- All of the following is hidden by default. -->
<!-- Don't include spaces in element ID's -->
<div id="IncidentID" class="hidden row">
<!-- Don't use break tags for arbitrary line feeds. They are for breaking content
at a logical flow. Use CSS for layout. Also, don't use "/" at the end of
an opening tag as this syntax isn't needed and can cuase you to use it in
places where you shouldn't. You had </br> for example, which is incorrect. -->
Incident ID :<input type="Text" name="Incident ID">
</div>
<div id="Description" class="hidden row">
Description :<input type="Text" name="Description">
</div>
<div id="Ref" class="hidden row">
Ref :<input type="Text" name="Ref row">
</div>
<!-- no need for 'type="text/javascript"' and 'language=javascript' -->
<script>
// Get all the radio buttons and put them into an array
var radioButtons = Array.from(document.querySelectorAll("input[type='radio']"));
// Loop through the array of radio buttons
radioButtons.forEach(function(btn){
// Set up a click event handling function for each button
btn.addEventListener("click", radioWithText);
});
// No need to pass any data to this function because the button that triggers it
// ("this" in the code below) can just look at its own HTML value to know what the
// meaning of the button is.
function radioWithText() {
// Get references to the elements the function needs to work with.
var incident = document.getElementById('IncidentID');
var description = document.getElementById('Description');
var ref = document.getElementById('Ref');
if(this.value ==='yes'){
// Instead of gettting/setting inline styles with the style property, just add
// or remove pre-made CSS classes. Since all the textboxes and labels start out
// with the CSS "hidden" class applied to them, it's just a matter of adding that
// class or removing it as necessary.
incident.classList.remove("hidden");
description.classList.remove("hidden");
ref.classList.add("hidden");
} else {
incident.classList.add("hidden");
description.classList.add("hidden");
ref.classList.remove("hidden");
}
}
</script>
</body>
</html>
How do I add an ID for an input tag that doesn't have any ID or class? Is it possible like this:
<div id="1">hey all</div>
<input type="text" name="txt" />
<script>
document.querySelector('input[type="search"]').id = 'sinput';
document.getElementById("sinput").addEventListener("keypress", function() {
document.getElementById("1").style.display ="none";
});
</script>
Okay I haven't seen a answer that tells you the problem with your current source code and it doesn't appear you have acknowledged my comment so maybe you showing you a working snippet will do.
The only thing you need to change is the type attribute from text to search to match your selector 'input[type="search"]' or change your selector to match the input type 'input[type="text"]'.
Change input type=search
document.querySelector('input[type="search"]').id = 'sinput';
document.getElementById("sinput").addEventListener("keypress", function() {
document.getElementById("1").style.display ="none";
});
<div id="1">hey all</div>
<input type="search" name="txt" />
Or change the selector input[type="text"]
document.querySelector('input[type="text"]').id = 'sinput';
document.getElementById("sinput").addEventListener("keypress", function() {
document.getElementById("1").style.display ="none";
});
<div id="1">hey all</div>
<input type="text" name="txt" />
If you have any questions feel free to comment below and I will get back to you as soon as possible.
I hope this helps. Happy coding!
Obviously checkboxes can be selected in whatever order you want but I'm having issues with this breaking. I cannot get checkbox C to appear when I select in the following order: A-D-C or D-A-C. If you select in order or reverse order it works fine AND it always works in Firefox for some reason. You can view this anomaly Click here for weird fiddle.
Why is this? How can I work around it?
HTML
<input type="checkbox" id="Abox" data-info-id="infoa">
<label for="Abox"> Checkbox A</label><BR>
<input type="checkbox" id="Bbox" data-info-id="infob">
<label for="Bbox"> Checkbox B</label><BR>
<input type="checkbox" id="Cbox" data-info-id="infoc">
<label for="Cbox"> Checkbox C</label><BR>
<input type="checkbox" id="Dbox" data-info-id="infod">
<label for="Dbox"> Checkbox D</label><BR>
CHECK AN ITEM ABOVE IT SHOULD APPEAR BELOW<P>
<div style="background-color:silver;">
<div id="infoa">
<input type="checkbox" id="kwd2" >
<label for="kwd2"> ALPHA</label><BR>
</div>
<div id="infob">
<input type="checkbox" id="fff1">
<label for="fff1"> BETA</label><BR>
</div>
<div id="infoc">
<input type="checkbox" id="zzz3">
<label for="zzz3"> CHARLIE</label><BR>
</div>
<div id="infod">
<input type="checkbox" id="kwd5" >
<label for="kwd5"> DELTA</label><BR>
</div>
</div>
JAVASCRIPT
document.addEventListener('change', function(e) {
var id = e.target.getAttribute('data-info-id');
var checked = e.target.checked;
if (id) {
var div = document.getElementById(id);
if (div) div.style.display = checked ? 'inline' : 'none';
alert("bang");
}
});
CSS
[id^="info"] {
display: none;
}
Weird bug, seems to have something to do with having inline -> block -> inline divs.
Changing the display to "block" instead of "inline" will do the trick though.
if (div) div.style.display = checked ? 'block' : 'none';
It looks like a Webkit (doesn't work in Safari or Chrome) bug displaying the inline divs. C's block is "displayed," it just has 0 width and height. I'm not certain what the spec says about inline divs, but they're not conventional. If you use block instead of inline it works.
(Edit deleted, it was wrong.)
Edit: this appears to be a simple browser redraw bug. You can make the inner part
<span id="infoa">ALPHA<br></span><span id="infob"></span><span id="infoc">CHARLIE</span><span id="infod">DELTA</span>
and it fails the same way. The newline before the non-displayed #infob appears to trigger #infoc's display problem. Seems like this should be reported to the Webkit people.
Disclaimer:This is a unique situation and very hackish.
I have one set of radios that are visible to users and another set that is hidden. I need to pull the name from the hidden set and assign to the visible set.
Hidden radios:
<div class="productAttributeValue">
<div class="productOptionViewRadio">
<ul>
<li>
<label>
<input type="radio" class="validation" name="attribute[139]"
value="86" checked="checked" />
<span class="name">Standard Shipping</span>
</label>
</li>
etc etc...more li's
</ul>
</div>
</div>
A visible radio:
<label>
<input type="radio" class="validation" name="PUT OTHER NAME HERE" value="86" checked="checked" />
<span class="name">Standard Shipping</span>
<p class="rl-m"><small>Earliest Date of Delivery:</small>
<small><span id="delivery-date"></span></small></p>
</label>
So, in this case, I would like the name "attribute[139]" to somehow be gotten from the hidden radio and called to the name of the visible radio. I'm thinking of something like this:
<script>
$(function() {
var name = $(".productOptionViewRadio span.name:contains('(Standard)')").attr('name');
});
</script>
I'm not too sure about the script being the right way to go about this and also not sure how I would actually get the value from the one element to populate to the other element's name field.
Thank you very much.
Update: Fiddle http://jsfiddle.net/susan999/XBcaF/
Try
$('label input[type=radio]').attr('name',
$('.productOptionViewRadio input[type=radio]').attr('name'));
http://jsfiddle.net/XBcaF/5/
Try this
$('input:radio.validation:visible').attr('name',function(){
return $('input:radio.validation:hidden').attr('name')
})
Could improve the selectors if know more about parent classes of visible radios, or what elements are actualy being set as hidden
You can try something like this:
var checkboxCount = 0;
$("#visibleCheckboxes").find("input[type=checkbox]").each(function(){
$($("#hiddenCheckboxes").find("input[type=checkbox]").get(checkboxCount)).attr('name', $(this).attr('name'));
checkboxCount++;
});
I've prepared a Fiddle for you: http://jsfiddle.net/MJNeY/1/
I have 2 radio buttons no one of them checked by default and I want if any one of them checked a Div appear according to what radio button was checked.
( Divs have different content )
and if the selection changed the one which appeared now disappear and the other appear.
and when one of them appear there are another 2 radio to do the same thing for another one div ( one to show and one to hide )
Here what I tried to do
JavaScript
function haitham()
{
if(document.getElementById('s').checked == true)
{
document.getElementById('StudentData').style.display = "block";
document.getElementById('GraduateData').style.display = "none";
}
else if(document.getElementById('g').checked == true)
{
document.getElementById('GraduateData').style.display = "block";
document.getElementById('StudentData').style.display = "none";
}
}
function info()
{
if(document.getElementById('y').checked == true)
{
document.getElementById('MoreInfo').style.display = "block";
}
else if(document.getElementById('n').checked == true)
{
document.getElementById('MoreInfo').style.display = "none";
}
}
HTML
<input class="margin2" id="s" type="radio" name="kind" value="student" onchange="haitham()"
required="required" />Student
<input class="margin2" id="g" type="radio" name="kind" value="graduate" onchange="haitham()"
required="required" />Graduate
<div id="StudentData">
content 1
<input class="margin2" id="y" type="radio" name="info" value="yes" onchange="info()"
required="required" />Student
<input class="margin2" id="n" type="radio" name="info" value="no" onchange="info()"
required="required" />Graduate
</div>
<div id="GraduateData">
content 2
</div>
<div id="MoreInfo">
content 3
</div>
the first work good but the other 2 radio did not work although it should be the same
Thank you ...
Your problem wasn't a javascript or html one, it was actually a CSS issue. Your code was fine, aside from the fact that the values for display are "none" and "block" not "" and "hidden". I modified your code and updated the fiddle.
Here's the link:
http://jsfiddle.net/8JpSQ/4/
Just add a clicked event to the radio buttons, and through a Javascript function change the attribute of the respective DIV to hidden when required. To show it instead, remove the attribute 'hidden'. Also, we'd probably be able to help more if you can post some code showing what you tried/what went wrong. But what I suggested should be the general approach to make what you want happen.
I have no idea what your HTML is, so here's what I have:
$('input[type="checkbox"]').click(function() {
$('.divWrapper > div').eq($(this).index()).fadeOut().siblings().fadeIn();
});
I'm assuming this is your structure:
<form>
<checkbox>
<checkbox>
...
</form>
<div class="divWrapper">
<div>
<div>
...
</div>