My boss needs either an html document or a word document. That when he goes to print the document it will only show the boxes that he has checked. There is a huge list of check boxes so he does not want to print the entire thing every time. Just the ones that matter for a particular client.
I have tried several methods of javascript, and css hidden neither of which have worked. Have also tried playing with the developers macros in microsoft word. None of those have given me what I am needing.
<form id="form1" name="form1" method="post" action="">
<p>
<label>
<input type="checkbox" name="CheckboxGroup1" value="checkbox" id="box" />
Main.</label>
<br />
<label>
<input type="checkbox" value="checkbox" name="CheckboxGroup1" id="boxchecked" />
Other.</label>
<br />
</p>
</form>
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script>
$(document).ready(function(){
$("#boxchecked").click(function (){
if ($("#boxchecked").prop("checked")){
$("#hidden").hide();
}else{
$("#hidden").show();
}
});
});
</script>
' Determine if there are any items checked.
If checkedListBox1.CheckedItems.Count <> 0 Then
' If so, loop through all checked items and print results.
Dim x As Integer
Dim s As String = ""
For x = 0 To checkedListBox1.CheckedItems.Count - 1
s = s & "Checked Item " & (x + 1).ToString & " = " & CheckedListBox1.CheckedItems(x).ToString & ControlChars.CrLf
Next x
MessageBox.Show (s)
End If
The logic in your script seems to be trying to hide or show some element with the id hidden, which I don't see in your HTML anywhere.
But regardless there's a much easier way to do this with CSS.
#media print {
input[type=checkbox]:not(:checked) {
display: none;
}
}
You would use something like the media query below but you want to make sure the browser being used is compatible.
https://www.w3schools.com/cssref/sel_checked.asp
#media print {
#boxchecked:not(:checked){ display: none; }
}
or in the case of a page with many checkbox elements you can create a css class and have the media query apply to all of them:
#media print {
.cbx:not(:checked){ display: none; }
}
Hope that helps! :)
Related
good morning guys,
I have 3 checkboxes created in php. one that i want to use as a controller
<p>
<?php $creates = array('name'=> 'single_obs_value','class' => 'singleobsyes','value'=> '1','style'=>' float: left; margin-right: 2px;'); ?>
<?=form_label('Single Observation : ');?>
<?=form_checkbox($creates);?>
<br>
</p>
And the other two are brought in from a database array variable.
<p>
<?php foreach($obsnames as $cp){ ?>
<?php $create = array('name'=> 'cms_permissions[]','class' => 'singleobs','value'=> $cp->id,'style'=>' float: left; margin-right: 10px;'); ?>
<span style="width:200px; float:left">
<?=form_checkbox($create ).' '.form_label($cp->field_name);?>
</span>
<?php } ?>
</p>
How do i first make the two brought in by the database invisible when the page loads. Then when the controller checkbox is ticked make the two checkboxes visible again. If possible with a jquery function that uses the class of the controller checkbox as such.
$('#singleobsyes').change(function(){
Rather than
$('input[type="checkbox"']
As i use other checkboxes on the page and i believe that may cause some conflict.
try this
$(document).ready(function(){
$('input[type="checkbox"]').not('.singleobsyes').hide();// hide all checkboxes other than controller
$('.singleobsyes').change(function(){
if($(this).is(':checked')
$('input[type="checkbox"]').not('.singleobsyes').show();
else
$('input[type="checkbox"]').not('.singleobsyes').hide();
});
});
update: see this fiddle
you can also do this with css selectors as
html
<input type="checkbox" class="singleobsyes" name="a"/>check to show others
<input type="checkbox" class="singleobs" name="b"/>
<input type="checkbox" class="singleobs" name="c"/>
css
.singleobs{
display:none;
}
.singleobsyes:checked ~ .singleobs{
display:block !important;
}
fiddle
you can use wrapper too
fiddle v2
To make the checkboxes invisible you can style="display:none"
Now you can put on the "main" check box an onchange="showem();" attribute.
function showem()
{
$('#checkbox1id').toggle();
$('#checkbox2id').toggle();
}
EDIT: Changes show to toogle
You can make it simple this way,
$(document).ready(function(){
$('input[type="checkbox"]').not('.singleobsyes').hide();
$('.singleobsyes').on("change", function(){
$('input[type="checkbox"]').not('.singleobsyes').toggle();
});
});
May be I'm not clear with my title, looks messy, so here is my code. Making a plugin in WordPress.
<script type="text/javascript">
$(document).ready(function() {
$("input[name$='radio_btn']").click(function() {
var test = $(this).val();
$("div.togglediv").hide();
$("#togglediv" + test).show();
});
});
</script>
I have two radio buttons in a form to input data:
<label><input type="radio" name="radio_btn" checked="checked" value="2"><strong>Paste a Code</strong></input></label>
, or
<label><input type="radio" name="radio_btn" value="3"><strong>Put an Image</strong></input></label>
And here are my two divs:
<div id="togglediv2" class="togglediv">div 1</div>
<div id="togglediv3" class="togglediv" style="display: none;">div 2</div>
Scenario: I'm using the same form for Inserting Data and Editing data as well. When inserting, I can toggle between the two divs, where the first one is checked by default. If I click on the other, then the divs are toggling nicely, I can use any one of them at a single time. So the inserting thing is fine.
Now, when I'm going to edit my data, I'm getting the data using $_GET[] and db query, and passing them to their fields accordingly and they are doing well too. But just the matter of toggling here, when data for <div id="togglediv2"> is isset showing, data for <div id="togglediv3"> is isset is also showing, but if not toggled by click the field is not visible you know. :(
I tried in a basic way swapping the HTML checked="checked" from one to another, I failed, because the jQuery isn't matching them.
So, I need to change the jQuery in a way so that, the toggling works when I'm inputting, as well as when editing my data. What are the changes I can do to change my jQuery to achieve this into my desired way?
You have 2 options:
1) Show/hide divs in your php
2) Pass value of "test" to javascript and add
$("#togglediv" + test).click();
In fact there is a 3th option, which I prefere. Create a .hidden css class and add in your php (to a togglediv which is hidden obvieusly) when you render the page. Then instead of hide()/show() use addClass('hidden') and removeClass('hidden'). I'm not sure if this will be slower/faster but I think it makes it more readable.
CSS
.hidden { display: none; }
JS
<script type="text/javascript">
$(document).ready(function() {
$("input[name$='radio_btn']").bind('change', function() {
var test = $(this).val();
$("div.togglediv").removeClass('hidden');
$("#togglediv" + test).addClass('hidden');
});
});
</script>
Give this a try (it worked for me).
It does not show the DIVs when initially loaded, they will show when a radio button is selected.
I added the jQuery library link I used, just in case.
<!DOCTYPE html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.togglediv").addClass('hidden');
$("input[name$='radio_btn']").click(function() {
var test = $(this).val();
$("div.togglediv").hide();
$("#togglediv" + test).show();
});
});
</script>
<style>
.hidden { display: none; }
</style>
</head>
<body>
<label><input type="radio" name="radio_btn" value="2"><strong>Paste a Code</strong></input></label>
, or
<label><input type="radio" name="radio_btn" value="3"><strong>Put an Image</strong></input></label>
<div id="togglediv2" class="togglediv">div 1</div>
<div id="togglediv3" class="togglediv">div 2</div>
</body>
</html>
I would use two hidden inputs that I would toggle the same ways as the divs to know which form is being submited, hiding the div in which the data is entered will still set the variables inside the div for php.
So I would have
$("input[name$='radio_btn']").click(function() {
var test = $(this).val();
$("div.togglediv").hide();
$("input.togglevalue").attr('disabled', 'disabled');
$("input#toggleinput" + test).removeAttr('disabled');
$("#togglediv" + test).show();
});
Then in php I would have these two inputs in each of the divs
<div id="togglediv2">
// The current div content
<input type="hidden" name="togglediv2" value="1" class="togglevalue" id="toggleinput2" />
</div>
and
<div id="togglediv3">
// The current div content
<input type="hidden" name="togglediv3" value="1" class="togglevalue" id="toggleinput3" />
</div>
Then in php I would check for these inputs if they are set so you have:
<?php
if (isset($_GET['togglediv2'])){
// Do actions for Paste a Code
} elseif (isset($_GET['togglediv3'])){
// Do actions for Put an Image
}
?>
In my validation logic in jQuery I have this:
if (strippedPN.length !== 10) {
$('#phoneNumber').after('<span color="red" id="errPhoneNumber">Phone number has to be 10 digits long. </span>');
proceed = false;
}
because I want the error message that displays next to the field, to be red.
It doesn't work. What's wrong?
Note: I tried using css() before after() but it changes the color of the text inside the field (as expected, btw). I also tried css() after the after() and it also doesn't work. Also tried addClass.
Here's the HTML:
<div>
<label for="phoneNumber" class="label">Phone Number</label>
<input name="phoneNumber" type="text" id="phoneNumber" size="13">
</div>
just give it a style..
<style>
#errPhoneNumber {color:red; }
</style>
Then apply it...
if (strippedPN.length !== 10) {
$('#phoneNumber').after('<span id="errPhoneNumber">Phone number has to be 10 digits long. </span>');
proceed = false;
}
Or if you wanna apply to multiple spans/error messages in general....a class is better.
<style>
.error {color:red;}
</style>
if (strippedPN.length !== 10) {
$('#phoneNumber').after('<span class="error" id="errPhoneNumber">Phone number has to be 10 digits long. </span>');
proceed = false;
}
You meant one of the two:
The deprecated font tag
color is an attribute of the <font> tag which is deprecated (=do not use it).
<font color="red">blah...</font>
A class attribute
<span class="red_text">blah...</span>
<!-- Of course you need to define styles for ".red_text" -->
<html>
<head>
<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script>
</head>
<body>
credit card
<a href="javascript:hideshow(document.getElementById('adiv123'))">
<input type="checkbox" />
</a>
<div id="adiv123" style="font:24px normal; style=display:block;">
check
<input type="text" name="check" class="styled"/>
</div>
</body>
</html>
The output of the program must be:
it should display the text when we check the checkbox and should hide the text when checkbox was unchecked.
In this case,when we open the output for the first time the text was displayed without checking the checkbox.
can anyone clarify why it was happening?
This happens because you don't run the hideshow function until you click on your checkbox (why did you wrap it into a link?). So after the pageload the adjacent div is always displayed, regardless of the state of the checkbox element.
Anyway, if you don't support IE8 and previous, you can achieve the same behaviour with css only. E.g.
html
<input type="checkbox" />
<fieldset>
<span>checked</span>
<input type="text" name="check" class="styled"/>
</fieldset>
Css
input + fieldset { display: none }
input:checked + fieldset { display: block }
have a look here: http://jsfiddle.net/Uhcxd/
CODE
document.getElementById("adiv123").style.display = "none";
document.getElementById("showHide").onchange = function(){
if(this.checked)
document.getElementById("adiv123").style.display = "block";
else
document.getElementById("adiv123").style.display = "none";
}
OR, based on your code: http://jsfiddle.net/Uhcxd/1/
I changed this:
<div id="adiv123" style="font:24px normal; style=display:block;">
to this
<div id="adiv123" style="font:24px normal;display:none;">
Well, for starters, your markup is invalid. Specifically, this:
style="font:24px normal; style=display:block;"
is wrong. I think you meant this:
style="font:24px normal; display:block;"
If you wanted the element hidden on page load, you actually wanted this:
style="font:24px normal; display:none;"
I'm trying to create a feature for the Script Encoder that I'm creating that will increase the font size of the textarea by one. This is what I got so far:
<script type="text/javascript">
var size=10 + "px";
var size2=10;
function add(){
size2++;
size=size2+"px";
}
if(typeof size2=="undefined"){size2="10";}
$('#panel').html("<form method='post' name='pad' align='center'><textarea class='look' rows='11' id='code1' style='font-size:"+size+";' name='text' cols='58'></textarea><br></form>")
</script>
<div id="panel"></div>
<br />
<input type="button" value="Font+" name="fontAdd" onclick="add();">
The problem is that the Textarea is not showing.
I ammended your solution here:
http://jsfiddle.net/H2J9Y/2/
The only 'gotcha' is that if there is text in the textbox when the size of the text is increased, it doesn't really stay inline properly until you start typing again. You'll see what I mean, but hopefully that's solved your main problem.
Edit: A bit of padding makes the issue a lot less noticable
http://jsfiddle.net/H2J9Y/3/
Try this instead
<div id="panel"></div>
<br>
<input type="button" value="Font+" name="fontAdd" id="fontAdd">
I added an id="fontAdd" and then referenced via click()
$('#fontAdd').click(function(){
size2++;
size=size2+"px";
if(typeof size2=="undefined"){size2="10";};
$('#panel').html("<form method='post' name='pad' align='center'><textarea class='look' rows='11' id='code1' style='font-size:"+size+";' name='text' cols='58'></textarea><br></form>");
});
Also, you were missing a few ;
Example: http://jsfiddle.net/jasongennaro/n3jGK/
**Keep clicking the font + button to see the increase.