I tried to set color of element. but not succeed yet. Here i want to run 2 functions on click (addXXX,setcolor) too.
<div id="tweet">'.$tweet['text'].'</div>
<input type="radio" name="pos" value="POS"
onclick="addPOS(this.previousElementSibling.innerHTML+\' \');
$(#tweet).css(\'background-color\', \'red\');">
<span class="label label-success">Pos</span>
</input>
<input type="radio" name="pos" value="NON"
onclick="addNON(this.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML+\' \');
$(#tweet).css(\'background-color\', \'blue\');">
<span class="label label-warning">Non</span></input>
<input type="radio" name="pos" value="NEG"
onclick="addNEG(this.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.previousElementSibling.innerHTML+\' \');
$(#tweet).css(\'background-color\', \'yellow\');">
<span class="label label-important">Neg</span>
</input>';
Using Jquery,
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<div id="tweet">test</div>
<input type="radio" name="pos" value="POS" onclick="$('#tweet').css('background-color', 'yellow');">
If using normal javascript,
<div id="tweet">test</div>
<input type="radio" name="pos" value="POS" onclick="document.getElementById('tweet').style.background = 'yellow'">
Put the two functions into a separate function and call that method instead of running two method calls in the "onclick" property
<script>
function changeColor(param)
{
addPOS(param.previousElementSibling.innerHTML+\' \');
$(#tweet).css(\'background-color\', \'red\');
}
</script>
<input type="radio" name="pos" value="POS" onclick="changeColor(this)">
etc.
If you want to change the color on the div onclick.
try this.
<div id="tweet"></div>
<input type="button" onclick="document.getElementById('div').style.backgroundColor='red'"/>
Related
i'm using Uikit radio input (https://altair-html.tzdthemes.com/forms_regular.html).
The problem is the radio input is transforming between code and on site display
After load my form with Ajax, i want to alert value for radio choice after each change.
Here my code :
HTML :
<div class="uk-width-medium-1-2">
<h5>Radio set 1</h5>
<div class="uk-grid" data-uk-grid-margin>
<span class="icheck-inline">
<input type="radio" name="radio_opt" id="radio_opt_1" value="Yes" data-md-icheck />
<label for="radio_opt_1" class="inline-label">Oui</label>
</span>
<span class="icheck-inline">
<input type="radio" name="radio_opt" id="radio_opt_2" value="Non" data-md-icheck />
<label for="radio_opt_2" class="inline-label">No</label>
</span>
</div>
</div>
<div class="uk-width-medium-1-2">
<h5>Radio set 2</h5>
<div class="uk-grid" data-uk-grid-margin>
<span class="icheck-inline">
<input type="radio" name="radio_opt_second" id="radio_opt_3" value="Yes" data-md-icheck />
<label for="radio_opt_3" class="inline-label">Oui</label>
</span>
<span class="icheck-inline">
<input type="radio" name="radio_opt_second" id="radio_opt_4" value="Non" data-md-icheck />
<label for="radio_opt_4" class="inline-label">No</label>
</span>
</div>
</div>
Then here my JS (doesnt' work)
$(document).on('change', 'input:radio', function () {
alert('test');
});
That theme is using iCheck and according to the docs you should use:
$('input:radio').on('ifChecked', function(event) {
alert('test');
});
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
I am trying to trigger a click on radio buttons. I have done this successfully on another project so I cannot see why it is not working in this case.
Here is my HTML (taken from Contact form 7):
<span class="wpcf7-list-item first">
<label>
<span class="wpcf7-list-item-label">Yes</span>
<input type="radio" name="example-name" value="Yes" checked="checked">
</label>
</span>
<span class="wpcf7-list-item last">
<label>
<span class="wpcf7-list-item-label">No</span>
<input type="radio" name="example-name" value="No">
</label>
</span>
And here is my jQuery:
jQuery(document).ready(function () {
jQuery("#yes-btn").click(function () {
jQuery(this).addClass('checked');
jQuery("input[value='Yes']").trigger('click').addClass("working");
});
jQuery("#no-btn").click(function () {
jQuery(this).addClass('checked');
jQuery("input[value='No']").trigger('click').addClass("working");
});
});
I know the selector is working correctly because the .addClass() works just fine.
I have also tried .prop("checked", true) instead of trigger("click") without success.
I am using jQuery 3.3.1.
How to fix this?
It works when you change the 'single quotes' from around yes and no to "double quotes". Also works with no quotes around the Yes and No, must not like single quotes in the selector.
jQuery(document).ready(function() {
jQuery("#yes-btn").click(function() {
jQuery(this).addClass('checked');
jQuery('input[value="Yes"]').trigger('click').addClass("working");
});
jQuery("#no-btn").click(function() {
jQuery(this).addClass('checked');
jQuery('input[value="No"]').trigger('click').addClass("working");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="wpcf7-list-item first">
<label>
<span class="wpcf7-list-item-label">Yes</span>
<input type="radio" name="example-name" value="Yes" checked="checked">
</label>
</span>
<span class="wpcf7-list-item last">
<label>
<span class="wpcf7-list-item-label">No</span>
<input type="radio" name="example-name" value="No">
</label>
</span>
<button id="yes-btn">Yes</button>
<button id="no-btn">No</button>
Using Jquery with Ruby on Rails and the Simple Form Gem I can successfully show / hide a div on changing a radio button, however despite numerous attempts I can't get this to work on page load - divs are always showing, whether the radio button is true or false. Any help would be great thanks.
jQuery(document).ready(function() {
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
UPDATE - HTML OUTPUT OF RADIO BUTTONS:
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: block;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>
Your code above adds an event handler for the change event on the radio button. Aside from that, you need to check the value of the :checked radio button on page load, and show/hide based on that.
Note: To prevent flickering, give the element an initial style of display: none.
jQuery(document).ready(function() {
if ( jQuery('[name="user[nurse_attributes][qualified]"]:checked').val() !== 'true' ) {
jQuery('#denied-quote-one').show();
}
jQuery('[name="user[nurse_attributes][qualified]"]').on('change', function() {
if (jQuery(this).val() == 'true' ) {
jQuery('#denied-quote-one').hide();
} else {
jQuery('#denied-quote-one').show();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group radio_buttons optional user_nurse_qualified">
<input type="hidden" name="user[nurse_attributes][qualified]" value="">
<span class="radio">
<label for="user_nurse_attributes_qualified_true">
<input class="radio_buttons optional" type="radio" value="true" checked="checked" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_true">Yes
</label>
</span>
<span class="radio">
<label for="user_nurse_attributes_qualified_false">
<input class="radio_buttons optional" readonly="readonly" type="radio" value="false" name="user[nurse_attributes][qualified]" id="user_nurse_attributes_qualified_false">No
</label>
</span>
</div>
<div id="denied-quote-one" style="display: none;">
<p class="p-red">Unfortunately we cannot give you a quote if your answer to this question is no. You will not be able to move forward.
</p>
</div>
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/