So I am using the PrintThis JQuery plugin in order to print a form field, but for some reason I am unable to have the plugin print out any changes made to the checkboxes. When I click "Print", the only checkbox that appears to change is one that has a "checked" property by default. Any ideas on how to fix this?
HTML:
<body>
<div id="print">
<form>
<input id="option" type="checkbox" checked>
<label class="checkbox" for="option"> You are 18 years or older</label>
<br><br>
<input id="option2" type="checkbox">
<label class="checkbox" for="option2"> You have tested positive for something in your blood</label>
<br><br>
<input id="option3" type="checkbox">
<label class="checkbox" for="option3"> You have health-related kidney problems</label>
<br><br>
<input id="option4" type="checkbox">
<label class="checkbox" for="option4"> You have health-related skin problems</label>
<br><br>
<input id="option5" type="checkbox">
<label class="checkbox" for="option5"> You have a low platelet count</label>
</form>
</div>
<br>
<br>
<input id="printButton" type="button" value="Click here to download and print this checklist to review with your doctor." />
</body>
JSFiddle: http://jsfiddle.net/Hybridx24/bxtpv26x/
Not sure what the problem might be here, but you can get around it by explicitly setting the checked attribute for the checkboxes that are checked.
$("input:button").click(function () {
$('input[type="checkbox"]').each(function() {
var $this = $(this);
if($this.is(':checked')) {
$this.attr('checked', true);
} else {
$this.removeAttr('checked');
}
});
$("#print").printThis({'importStyle': true});
});
Check Fiddle
So after skimming through the plugin's source. Looks like there's a property for form values. I added it in and it seems to work.
$('#selector').printThis({formValues:true});
http://jsfiddle.net/wzp0e9r9/
Related
checkbox default checked is not working!
I tried to fix it, but I can not find where is the error here?
so on page load that is checked, after page loadet that is unchecked!?
I tried that
<div class="onoffswitch" style="margin: 0 auto;">
<input type="checkbox" class="avacheckbox onoffswitch-checkbox" id="AvButtonAutoGames" checked="checked"/>
<label class="onoffswitch-label" for="AvButtonAutoGames">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
and that
<div class="onoffswitch" style="margin: 0 auto;">
<input type="checkbox" class="avacheckbox onoffswitch-checkbox" id="AvButtonAutoGames" checked/>
<label class="onoffswitch-label" for="AvButtonAutoGames">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
To specify the value, use the checked="true", otherwise do not specify the property.
Checked: <input type="checkbox" checked="true" /><br/>
Not checked: <input type="checkbox" />
It's hard to see, but you're using this syntax to define the checkbox value?
document.getElementById('AvButtonAutoGames').checked = true
If so, this isn't correct - but in the first JS example you have a correct the prop usage:
$('#AvButtonAutoGames').prop('checked', true)
as in HTML5, the syntax to apply is simply <input checked> or to expand for clarity <input checked="checked">. The absence of the checked attribute leads to an unchecked input field.
Simply convert your .checked=X to the functional calls and it should work
In my project, i have multiple check box (total 27).I am trying to select all the check box with a single button click and i am able to do it.But i want to deselect the same check box with the same button click.So the button should act like a selector and a de-selector.I can not use a check box instead of the button.
My html code is:
<div class="countryAll">
<span class="countrySelect_lngTrans_Translatable" title="Select All">
<input type="button" class="selectAllcountry" />
</span>
<span class="displayData">Select whole country</span>
</div>
In js:
$(self.element).on('click', '.selectAllcountry', function(e) {
debugger;
$('.chkCountry').trigger('click')
e.stopPropagation();
});
Using trigger will always toggle the state, so if some elements are checked and some aren't then it won't work fine.
Instead you can try something like
$(document).on('click', '.selectAllcountry', function(e) {
var $checks = $('.chkCountry');
$checks.prop('checked', !$checks.is(':checked'))
e.stopPropagation();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countryAll">
<span class="countrySelect_lngTrans_Translatable" title="Select All">
<input type="button" class="selectAllcountry" />
</span>
<span class="displayData">Select whole country</span>
</div>
<input class="chkCountry" type="checkbox" />
<input class="chkCountry" type="checkbox" />
<input class="chkCountry" type="checkbox" />
<input class="chkCountry" type="checkbox" />
Try this
$('.selectAllcountry').on('click', function(){
if ($('.selectAllcountry').is(':checked')) {
$('.chkCountry').find(':checkbox').prop('checked', true);
} else {
$('.chkCountry').find(':checkbox').prop('checked', false);
}
});
try this....
$(document).on('click', 'input.selectAllcountry', function(e) {
if ($('input.selectAllcountry').is(':checked'))
{
$('.chkCountry').prop('checked',true);
}
else
$('.chkCountry').prop('checked',false);
});
var chkStatus = true;
$('.selectAllcountry').click(function() {
$('.countryAll').find(':checkbox').prop('checked', chkStatus);
chkStatus = !chkStatus;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="countryAll">
<span class="countrySelect_lngTrans_Translatable" title="Select All">
<input type="button" class="selectAllcountry" />
</span>
<span class="displayData">Select whole country</span>
<br>
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
</div>
as you have done the portion of selection, now focus on Deselecting.
to remove all checkbox inputs at once
$('input:checkbox').removeAttr('checked');
or you can add class as identifier and then remove checked element on the basis of class.
for exa.
$('.chkCountry').removeAttr('checked');
I think you have made one mistake in your code you have used class attribute twise in html tag.I think that's why it take first class attribute and other are ignored.
<div class="countryAll">
<span class="countrySelect_lngTrans_Translatable" title="Select All">
<input type="button" class="selectAllcountry" />
</span>
<span class="displayData">Select whole country</span>
</div>
please combine all class in single class attribute.
I think it will be helpful.
I want to show the text next to radio buttons in another element when the buttons are clicked.
My HTML:
<p>
<input type="radio" value="1" name="General">
I need a simple template
</p>
<p>
<input type="radio" value="2" name="General">
I need a simple template based
</p>
<p>
<input type="radio" value="3" name="General">
I need a simple template based type
</p>
I want to show the result in an element with the class display, so something like:
$('.display').val();
I tried this:
$('.display').val($('input[type=radio]:checked').closest('p').html());
I'm going to guess that what you want to do is put the text associated with the selected radio button in the .display element. If so, with your current HTML, you can use .text on the parent element to get the text, and then probably .text (not .val) on the .display element to show it (it would be .val if .display were a form field):
$("input[name=General]").on("click", function() {
var text = $(this).closest('p').text();
$(".display").text(text);
});
<p>
<input type="radio" value="1" name="General">
I need a simple template
</p>
<p>
<input type="radio" value="2" name="General">
I need a simple template based
</p>
<p>
<input type="radio" value="3" name="General">
I need a simple template based type
</p>
<p class="display"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
But, it's better to use label elements so the user can click on the words as well as the actual radio button:
$("input[name=General]").on("click", function() {
var text = $(this).closest('label').text();
$(".display").text(text);
});
<p>
<label>
<input type="radio" value="1" name="General">
I need a simple template
</label>
</p>
<p>
<label>
<input type="radio" value="2" name="General">
I need a simple template based
</label>
</p>
<p>
<label>
<input type="radio" value="3" name="General">
I need a simple template based type
</label>
</p>
<p class="display"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
This is the solution of the problem with getting the associated text of check Box in separate Line when the name is same.
HTML Code-
<p><input name="SiteLayoutDesign" value="5" type="checkbox"> I do not need any unique graphics designed (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="6" type="checkbox"> I will supply images (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="7" type="checkbox"> I have a template but it needs minor customization (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="8" type="checkbox"> I need a template customized (0 Hours)</p>
<p><input name="SiteLayoutDesign" value="9" type="checkbox"> I would like a custom design created for my site (0 Hours)</p>
jQuery Code-
$(document).ready(function(){
$('input').click(function(){
var $check = $('input[type=checkbox]:checked');
$check.each(function(){
var id = $(this).val();
var did = $('input[type=checkbox][value='+id+']:checked').closest('p').text();
});
});
});
The did variable store the associated text with respect to value of that checkBox.
All,
Have used this site a few times before and had some great replies so hopefully someone can help again. I want a set of radio buttons, so that when you click a button - you get another set below it. Then again, when you click one of the 2nd set of buttons, you'll get a third etc. Currently I have the following:
<html>
<head>
<title>My Wizard</title>
<script language="javascript">
function Display(question) {
h1=document.getElementById("yes");
h2=document.getElementById("no");
h3=document.getElementById("dk");
h4=document.getElementById("yes2");
if (question=="yes") h1.style.display="block";
else h1.style.display="none";
if (question=="no") h2.style.display="block";
else h2.style.display="none";
if (question=="dk") h3.style.display="block";
else h3.style.display="none";
if (question=="yes2") h4.style.display="block";
else h4.style.display="none";
}
</script>
</head>
<body>
<hr>
<form name="form1">
<p>Do you like the colour blue?</p>
<input type="radio" name="type" value="yes" checked
onClick="Display('yes');">
Yes
<input type="radio" name="type" value="no"
onClick="Display('no');">
No
<input type="radio" name="type" value="dk"
onClick="Display('dk');">
Don't know
<br>
<div ID="yes" style="display:none;">
<hr>
<p>Do you like the colour red?</p>
<input type="radio" name="type" value="yes2" checked
onClick="Display('yes2')">
Yes
<input type="radio" name="type" value="no2"
onClick="Display('no2');">
No
</div>
<div ID="yes2" style="display:none">
I want this to appear beneath the 2nd set of buttons, not replacing it!
</div>
<div ID="no2" style="display:none">
test2
</div>
<div ID="no" style="display:none">
<b>this is my no box:</b>
<input type="text" name="no" size="25">
</div>
<div ID="dk" style="display:none">
<b>dk:</b>
<input type="text" name="dk" size="15">
</div>
</form>
</body>
</html>
So basically, i'm trying to make a little wizard - so something that will ask the user a question, and based on this - it will ask them another. I dont want to use server side applications so am trying something simple like this - but whenever the user selects an option from the 2nd set of buttons, the text which goes with it replaces the 2nd set of buttons. What am i doing wrong?
Please select 'yes' and 'yes' again to see what i mean. Any help will be appreciated!
Joe
Radio input elements are grouped by their name attribute. You should assign a different name to the other sets of radio input elements.
Visual example:
[x] name=favColor [ ] name=favRed
[ ] name=favColor [x] name=favRed
[ ] name=favColor [ ] name-favRed
See also: https://developer.mozilla.org/en/HTML/Element/input
Your if statement is wrong. You ask again and again this: if (question=="yes") h1.style.display="block";
else h1.style.display="none"; and the second time if is not true, so you set the h1 to be hidden.
here is one solution:
<html>
<head>
<title>My Wizard</title>
<script language="javascript">
function Display(question, i) {
h1=document.getElementById("yes");
h2=document.getElementById("no");
h3=document.getElementById("dk");
h4=document.getElementById("yes2");
if(i==1){
if (question=="yes") h1.style.display="block";
else h1.style.display="none";
if (question=="no") h2.style.display="block";
else h2.style.display="none";
}else if(i==2){
if (question=="dk") h3.style.display="block";
else h3.style.display="none";
if (question=="yes2") h4.style.display="block";
else h4.style.display="none";
}
}
</script>
</head>
<body>
<hr>
<form name="form1">
<p>Do you like the colour blue?</p>
<input type="radio" name="type" value="yes" checked
onClick="Display('yes', 1);">
Yes
<input type="radio" name="type" value="no"
onClick="Display('no', 1);">
No
<input type="radio" name="type" value="dk"
onClick="Display('dk', 1);">
Don't know
<br>
<div ID="yes" style="display:none;">
<hr>
<p>Do you like the colour red?</p>
<input type="radio" name="type" value="yes2" checked
onClick="Display('yes2', 2)">
Yes
<input type="radio" name="type" value="no2"
onClick="Display('no2', 2);">
No
</div>
<div ID="yes2" style="display:none">
I want this to appear beneath the 2nd set of buttons, not replacing it!
</div>
<div ID="no2" style="display:none">
test2
</div>
<div ID="no" style="display:none">
<b>this is my no box:</b>
<input type="text" name="no" size="25">
</div>
<div ID="dk" style="display:none">
<b>dk:</b>
<input type="text" name="dk" size="15">
</div>
</form>
</body>
</html>
I have a form which changes the inputfields depending on a radio-button.
for text there appears a textbox
for textarea there appear additional 2 fields for cols And rows
for select, checkbox and radio there appear additional fields with appendchild
have a look here:
http://joomla.byethost16.com/php.php
Now what i want is to let the user add more params, param2, param3, etc.
Unfortunately i made the js functions that trigger the fields according to the radio-button like this
function textarea(){
if (document.getElementById('option2').checked = true){
document.getElementById('feld').style.display = '';
document.getElementById('feld2').style.display = '';
document.getElementById('feld4').style.display = 'none';
}}
So that means i have no dynamics in my form since the id in this function is not yet dynamic and onclick will trigger anything or only always the first param1.
all params should be like this but somehow increasing numbers and the Js-function for the radio should take them too
<td>Param_1</td>
<td><p>
<input type="radio" onclick='text()' name="option0" id="option0" value="text" checked="yes">text
<input type="radio" onclick='spacer()' name="option0" id="option1" value="spacer">spacer
<input type="radio" onclick='textarea()' name="option0" id="option2" value="textarea">textarea
<input type="radio" onclick='selecta()' name="option0" id="option3" value="select">select
<input type="radio" onclick='radio()' name="option0" id="option4" value="radio">radio
<input type="radio" onclick='checkbox()' name="option0" id="option5" value="checkbox">checkbox</br>
<input type="hidden" name="fields" value="1" id="fields" />
<div id="feld">
Name <input type="text" name="param1" id="param1" size="40" maxlength="40">
Default<input type="text" name="paramdef1" id="paramdef1" size="40" maxlength="40">
<div id="feld4" style="display:none;">
<input type="text" name="param11" size="40" value="value1" style="display: inline">
<a href=# onclick='add(1)'>add</a> <a href=# onclick='reset()'>reset</a></div>
</div>
<div id="feld2" style="display:none;">
Columns<input type="text" name="cols1" size="20" maxlength="40">Rows<input type="text" name="rows1" size="20" maxlength="40"></div>
</td>
</tr>
How do i do that my form gets dynamically (like i did the "add/reset" at checkboxes) and people can add more params?
For the complete code please go here and view source:
http://joomla.byethost16.com/php.php
thx so much for help on this
i solved it by using $(this) with a "click" bind to each class which sits on the buttons.
another solution would be to use a plugin, for example http://www.mdelrosso.com/sheepit/index.php?lng=en_GB which is very good but relys on a certain structure (you have to define an index at the form, which has to be resorted in processing under most cases since some index_vars can be skipped userwise.)