if(document.getElementById('3w').checked) {
alert('3w');
}else if(document.getElementById('6w').checked) {
alert('6w');
}
<input type="radio" name="pnltype" id="3w" value="3w" /> 3W
<input type="radio" name="pnltype" id="6w" value="6w" checked /> 6W
My problem:
this will run perfectly in firefox. For example, if I tick 3w and than choose "reload", I get alert '3w'
But not in Chrome.
In Chrome although I check 3W, and then manually "reload" the page, 'the alert will be '6w'.
What is the reason?
In previous versions I used the onClick option in the radio buttons and this function:
function radioClick() { window.location.reload(); }
And again - in firefox it behave as expected, not in chrome
Thanks for any help.
remove the checked attribute in the second input.
I feel using jquery will be easy for this kind of things. give it a try
http://code.jquery.com/jquery-1.11.1.min.js
<input type="radio" class="any-name" name="pnltype" id="3w" value="3w" /> 3W
<input type="radio" class="any-name" name="pnltype" id="6w" value="6w"/> 6W
$('.any-name').on('click', function(){
alert($(this).val());
});
http://jsfiddle.net/yasithao3/j1ujhetd/1/
try this without reload it should work:
<script>
function check(){
if(document.getElementById('3w').checked) {
alert('3w');
}else if(document.getElementById('6w').checked) {
alert('6w');
}
}
</script>
<body onload="check()">
<input type="radio" name="pnltype" id="3w" value="3w" onclick="check()"/> 3W
<input type="radio" name="pnltype" id="6w" value="6w" checked onclick="check()"/> 6W
</body>
Please refer following code
<title>Test</title>
<script>
function ClickEvent()
{
if(document.getElementById('3w').checked) {
alert('3w');
}
if(document.getElementById('6w').checked) {
alert('6w');
}
}
</script>
<body>
<input type="radio" name="pnltype" id="3w" value="3w" onclick=" ClickEvent()" /> 3W
<input type="radio" name="pnltype" id="6w" value="6w" checked onclick="ClickEvent()" /> 6W
</body>
Related
i use this code to show some text (Checked) when click on 1 or more checkboxes.
I use the on because the checkboxes are dynamically created.
It seems that only IE Edge can not deal with it. I have to click twice on a checkbox to show the Checked text. In all other browsers it works immediately.
Really don't know what is wrong with the code
<input type="checkbox" class="rafcheckbox" value="1" />
<input type="checkbox" class="rafcheckbox" value="2" />
<input type="checkbox" class="rafcheckbox" value="3" />
<div class="cb-buttons" style="display:none">Checked</div>
<script>
$(document).on('click','.rafcheckbox',function() {
var $checkboxes = $('.rafcheckbox').change(function() {
var anyChecked = $checkboxes.filter(':checked').length != 0;
$(".cb-buttons").toggle(anyChecked);
});
});
</script>
Fiddle: https://jsfiddle.net/g5tp4kjm/
Since you already have the delegate for the elements, just change it to a change event handler.
Inside that logic, toggle the hide class, but force it to have the hide class if no elements are checked.
$(document).on('change','.rafcheckbox',function() {
$('.cb-buttons').toggleClass('hide', $('.rafcheckbox:checked').length < 1);
});
.hide { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" class="rafcheckbox" value="1" />
<input type="checkbox" class="rafcheckbox" value="2" />
<input type="checkbox" class="rafcheckbox" value="3" />
<div class="cb-buttons hide">Checked</div>
Lets try it another way.
$(document).on('click','.rafcheckbox',function() {
if($('.rafcheckbox').is(':checked'))
{
//do whatever you want
}
else
{
//do the opposite
}
});
I am new to html
I am trying to add a onclick event with radio button but it is not working. I am unable to figure out the reason. Please help.
Example code
<script>
function select(btn)
{
var1=document.getElementById("radio1");
var2=document.getElementById("radio2");
var3=document.getElementById("radio3");
if(var1.checked==true)
{
document.myform.action="A.html";
}
elseif(var2.checked==true)
{
document.myform.action="B.html";
}
else
{
document.myform.action="C.html";
}
}
</script>
function test()
{
alert('Testing')
}
{% block radio_buttons %}
<br><br><br>
<!-- <input type="radio" id="radio1" name="project_type" value=0 checked onclick="alert('yes')"><label>Projects I own</label> -->
<input type="radio" id="radio1" name="project_type" value=0 checked onclick="select('this')"><label>Projects I own</label>
<br>
<input type="radio" id="radio2" name="project_type" value=1 onclick="test()"><label>Projects I manage</label>
<br>
<input type="radio" id="radio3" name="project_type" value=1 onclick="select()"><label>Projects I can edit</label>
<br>
{% endblock %}
This code I have added in templates. I tried adding alerts. Alert get exceuted but not onclick event
The select function contains a syntax error and is therefore never executed.
Write:
else if (var2.checked==true)
instead of
elseif (var2.checked==true)
To avoid these kind of errors open the developer console of your browser and check if syntax errors are shown.
Second the choice of select for the function name is unfortunate, since input elements have a select function which is called instead of your function.
To avoid this rename your function (e.g. radioSelect) and call it accordingly (onclick="radioSelect(this);").
Also your test function is placed outside of a script element which is not a good idea.
You have quite a few syntax errors in your code. And you don't need the (btn) after your select in your function. You have omitted a few semi-colons, not least the one after the testing alert.
This code works
<head>
<script>
function select() {
var1 = document.getElementById("radio1");
var2 = document.getElementById("radio2");
var3 = document.getElementById("radio3");
if (var1.selected === true) {
document.myform.action = "A.html";
}
else if(var2.selected === true) {
document.myform.action = "B.html";
} else {
document.myform.action = "C.html";
}
}
function test() {
alert('Testing');
}
</script>
</head>
<body>
<br>
<br>
<br>
<!-- <input type="radio" id="radio1" name="project_type" value=0 checked onclick="alert('yes')"><label>Projects I own</label> -->
<input type="radio" id="radio1" name="project_type" value=0 checked onclick="select();">
<label>Projects I own</label>
<br>
<input type="radio" id="radio2" name="project_type" value=1 onclick="test();">
<label>Projects I manage</label>
<br>
<input type="radio" id="radio3" name="project_type" value=1 onclick="select();">
<label>Projects I can edit</label>
</body>
Here is a fiddle
I'm constructing this webpage and i want to change the label and mas of an input depending on the radio button selected by the user.
I have read all the posts from people with the same problem, like jQuery .focus() and .blur() not working in Chrome or Safari or http://juristr.com/blog/2008/06/attaching-client-side-event-handler-to/ but the solutions proposed don't seem to be working!
Here's the javascript:
$(document).ready(function() {
$("#cep").mask("99999-999");
$("#jur", "#fis").click(function() {
docProcess(this.value);
});
function docProcess(value) {
alert("hi");
if (value == "jur") {
$("#docLabel").value = "CNPJ: ";
$("#docLabel").mask("99.999.999/9999-99");
} else {
$("#docLabel").value = "CPF: ";
$("#docLabel").mask("999.999.999-80");
}
}
});
and here is the html:
<label for="clientType">Tipo de cliente: </label>
<input class"radioButton" type="radio" name="clientType" id="jur" value="jur" />
<label class="radioButton" for="clientType">Jurídico</label>
<input class"radioButton" type="radio" name="clientType" id="fis" value="fis" />
<label class="radioButton" for="clientType">Físico</label>
<label for="doc" id="docLabel">CNPJ: </label>
<input type="text" id="doc" name="doc" />
Any help?
Instead of writing $("#docLabel").value = "CNPJ: ";, write $("#docLabel").text("CNPJ: ");.
Multiple selectors are delimited by a comma within the string. Update your selector to $("#jur, #fis") and it will work fine.
For more info regarding multi select statements reference jQuery Multiple Selector
$(document).ready(function() {
//$("#cep").mask("99999-999");
$("#jur, #fis").click(function() {
docProcess(this.value);
});
function docProcess(value) {
alert("hi");
if (value == "jur") {
$("#docLabel").value = "CNPJ: ";
//$("#docLabel").mask("99.999.999/9999-99");
} else {
$("#docLabel").value = "CPF: ";
//$("#docLabel").mask("999.999.999-80");
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<label for="clientType">Tipo de cliente:</label>
<input class "radioButton" type="radio" name="clientType" id="jur" value="jur" />
<label class="radioButton" for="clientType">Jurídico</label>
<input class "radioButton" type="radio" name="clientType" id="fis" value="fis" />
<label class="radioButton" for="clientType">Físico</label>
<label for="doc" id="docLabel">CNPJ:</label>
<input type="text" id="doc" name="doc" />
Thanks all, so it was a bit of help from adeneo and pierre!
changed the access to $("#jur, #fis") and the prop change $("#docLabel").text("CNPJ: ") and it worked like a charm! ty!
I have a radio button called "other," and when checked, I want a input field called "other-text" to show up. It's fairly simple, but I've been failing all morning.
<input name="ocalls" type="radio" name="other" id="other-radio" value="Yes"><b>Other</b><br />
<input type="text" name="other-text" id="other-text" style="display:none" />
Here is my javascript:
jQuery(function(){
jQuery("input[name=other]").change(function(){
if ($(this).val() == "Yes") {
jQuery("#other-text").show()
}
else {
jQuery("#other-text").hide();
}
});
});
JSFiddle of the failure. http://jsfiddle.net/Wpt3Y/532/
This works
jQuery("#other-radio").change(function(){...
Just updated your jsfiddle: http://jsfiddle.net/Wpt3Y/539/
<pre><input type="radio" name="other" id="other-radio" value="Yes"><b>Other</b></pre>
Your code works, you simply mistyped your radio input, it had two name attributes.
I suggest to go this way. Tried to use prop() but realised you use old version of jquery
jQuery("input:radio[name='ocalls']").change(function(){
if ($(this).attr("checked") == true) {
jQuery("#other-text").show();
}
else {
jQuery("#other-text").hide();
}
});
example with radio
Instead you can use checkbox:
html
<input name="ocalls" type="checkbox" name="other" id="other-radio" value="Yes"><b>Other</b><br />
<input type="text" name="other-text" id="other-text" style="display:none" />
js
jQuery("input:checkbox[name='ocalls']").change(function(){
if ($(this).attr("checked") == true) {
jQuery("#other-text").show();
}
else {
jQuery("#other-text").hide();
}
});
example with checkbox
<form>
<input name="ocalls" type="radio" name="other" id="other-radio" value="Yes">
<b>Other</b><br />
</input>
<input type="text" name="other-text" id="other-text" style="display: none;" />
</form>
jQuery(function(){
jQuery("#other-radio").change(function(){
if ($(this).val() == "Yes") {
jQuery("#other-text").show()
}
else {
jQuery("#other-text").hide();
}
});
});
Try this.
If you want that toggle effect you can use this code with the checkbox.
jQuery(function(){
jQuery("input[name=ocalls]").change(function(){
if($(this).attr("checked"))
{
$("#other-text").show();
}
else
{
$("#other-text").hide();
}
});
});
Your code is not working because you have name attribute twice in radio button.
use this:
<input type="radio" name="other" id="other-radio" value="Yes">
remove name="ocalls" attribute.
I have looked all over the place and have tried all kind of scripts but i keep running into the same problem.
I am trying to disable or hide a submit button until a checkbox is checked.
The problem I am having is that nothing is working in IE10 unless I have the compatibility turned on, and they do not work in FF 20.0.1 most of the time.
Here is what I have tried so far.
<input type="checkbox" name="agree" value="yes" onclick="agreed.disabled = !this.checked" />Do you Agree?
<input type="submit" name="agreed" id="agreed" value="{L_AGREE}" class="button1" disabled="disabled" />
<script type="text/javascript">
function checkSubmit(ele, id) {
x = document.getElementById(id);
if (ele.checked == true) x.disabled = false;
else x.disabled = true;
}
</script>
<input type="checkbox" name="myCheck" onclick="checkSubmit(this, 'agreed')" value="y" />Do you Agree?
<input type="submit" name="agreed" id="agreed" value="{L_AGREE}" class="button1" disabled="disabled" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$("#terms").click(function() {
if ($(this).is(':checked')) {
$('#agreed').removeAttr('disabled');
} else {
$('#agreed').attr('disabled', 'disabled');
}
});
});//]]>
</script>
<input type="checkbox" class="required" id="terms"/>Do you Agree?
<input type="submit" name="agreed" id="agreed" value="{L_AGREE}" class="button1" disabled="disabled" />
I have tried many many other ways to do it but still running into problems with either IE10 or FF.
What I need is help with getting something to work in all browsers.
The first example is more likely to work some browsers and not others depending on if they put elements on the window or document objects via their ID.
To fix it, use document.getElementById().
<input type="checkbox" name="agree" value="yes" onclick="document.getElementById('agreed').disabled = !this.checked" />Do you Agree?
<input type="submit" name="agreed" id="agreed" value="{L_AGREE}" class="button1" disabled="disabled" />
The second one should work in any browser as long as the function is global, though you can shorten it.
function checkSubmit(ele, id) {
document.getElementById(id).disabled = !ele.checked;
}