I have 10 radio button/buttonset from jQuery. Of course every button has its own value, and I want to show the value beside the button, when the button is hovered.
How can I deal with it?
Illustration:
row1 : radio1.1 radio1.2 radio1.3 print value radio in here when
radio is hovered
row2 : radio2.1 radio2.2 radio2.3 print value radio in here when
radio is hovered
row3 : radio3.1 radio3.2 radio3.3 print value radio in here when
radio is hovered
I have used live function from jQuery to get event mouseover, but how can I specific place the value into specific row?
How can I get which radio is hovered, so I can get its value?
<!DOCTYPE html>
<html>
<head>
<link href="jslib/jquery_theme/jquery.ui.all.css" rel="stylesheet" type="text/css"/>
<script src="jslib/jquery-1.7.1.min.js"></script>
<script src="jslib/jquery-ui-1.8.18.custom.min.js"></script>
<script>
$(document).ready(function() {
$(".ter").buttonset();
});
$('.ter > label').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
document.getElementById('mydiv').innerHTML = "Hello World";
//this is when radio is hovered, it should show radio value beside the rwadio
} else {
document.getElementById('mydiv').innerHTML = "out";
//this is when mouse is out from radio
}
});
$(function() {
$("#radio :radio").change(function(e) {
alert(
"run ok"
);
});
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="radio">
<form name='tes' method='post' action='a.php'>
<?php for($I=0;$I<10;$I++){
echo"
<div class='ter' style='border:1px solid; width:400px; margin-bottom:5px;'>
<input type='radio' id='radio1.$I' name='radio.$I' value='4' /><label for='radio1.$I'> </label>
<input type='radio' id='radio2.$I' name='radio.$I' checked='checked' value='3' /><label for='radio2.$I'> </label>
<input type='radio' id='radio3.$I' name='radio.$I' value='2' /><label for='radio3.$I'> </label>
<input type='radio' id='radio4.$I' name='radio.$I' value='1'/><label for='radio4.$I'> </label>
<span id='mydiv'>aaaaaaaaaa</span>
</div> ";
} ?>
<div class='ter'>
<input type='submit' value ='submit'>
</div>
</form>
</div>
</body>
</html>
as i understand from your words, the event will be at the radio buttons
$('input[type=radio]').live({
mouseover:function(){
var value = $(this).attr('value');
$(this).next().html(value);
},
mouseout:function(){
$(this).next().html("");
}
});
when the radio button is hovered, then get it's value and print it in the label(next).
$('.ter > label').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
document.getElementById('mydiv').innerHTML = $("#"+$(this).attr("for")).val();
//this is when radio is hovered, it should show radio value beside the rwadio
} else {
document.getElementById('mydiv').innerHTML = "";
//this is when mouse is out from radio
}
This will put the radio value corresponding to the label, and now you can position the div accordingly.
You can achieve this effect without javascript, using only HTML and CSS:
HTML
<form>
<label><input type="radio" name="Test" value="Something"/></label>
<label><input type="radio" name="Test" value="Something else"/></label>
</form>
CSS
input:hover:after,
input:focus:after {
content: attr(value);
padding-left: 2em;
}
This takes advantage of the CSS content property to extract and display the values of elements it's applied to. You might need to work with the CSS to style it how you want - I'm thinking absolute positioning, relative to each row.
This won't work in older versions of IE. 8+ will definitely work - I'm not sure about 7 and below.
Related
What I'm trying to do is to set hidden div with inputs depended on checked radio input.
This is the logic:
If the first radio is checked the first div is shown, there I want to add hidden inputs with some values...
If the second radio is checked I want the input to be added with required..
And, it shouldn't be required if the 2nd radio isn't checked...
I've tried a few things over some time and got some effects but can't get it work as I want, Here is the code that i'm currently trying to work with, sorry but it's messed up and fails...
So Any help will be much appreciated...
/*
// this code is working but I messed the HTML while trying to get it work with the other code below...
$(document).ready(function() {
$("div.hiddendiv").hide();
check();
$("input[name$='name02']").change(check);
function check() {
var test = $("input[name$='name02']:checked").val();
$("div.hiddendiv").hide();
$("#" + test).show();
}
}
*/
// The code i'm trying to work with...
$(function() {
var radio = $("#closed");
var hidden = $("#hide");
hidden.hide();
checkbox.change(function() {
if (checkbox.is(':checked')) {
hidden.show();
//add required
$('#name02').prop('required', true);
} else {
hidden.hide();
//clear when hidden checked
$("#name02").val("");
//remove required
$('#name02').prop('required', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" id="closed" value="01"> Closed
<input type="radio" id="open" value="02"> Open
<div name="01" class="hiddendiv">
<input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
<input name="name02" type="text" value="">
</div>
Here is the JSFiddle,
try this code
give same name of radio button so it will work as a group and
also set id of input tag as name02 so its use as a #name02 in jquery
so it will work
$(function() {
var radio = $("#closed");
var hidden = $("#hide");
hidden.hide();
$(this).click(function() {
if ($('#closed').is(':checked')) {
hidden.show();
$('#name02').prop('required', true);
} else {
hidden.hide();
//clear when hidden checked
$("#name02").val("");
//remove required
$('#name02').prop('required', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name='btn' id="closed" value="01"> Closed
<input type="radio" name='btn' id="open" value="02"> Open
<div name="01" class="hiddendiv">
<input name="name01" type="hidden" value="code">
</div>
<div name="02" id="hide" class="hiddendiv">
<input name="name02" id="name02" type="text" value="">
</div>
Part of your problem is that you need to set the name attribute of your radio buttons to be the same value, otherwise the HTML won't know that they belong to the same group.
I've updated the JSfiddle here
https://jsfiddle.net/hba4d83k/2/
What i have done is add a change event handler to your the radio group and then did some conditional logic to show/hide the relevant inputs.
I am trying to implement a small part of my program where when an initial checkbox is clicked, it would open multiple checkboxes are opened up for selection. I don't want to use forloop (or dynamically) to create the multiple checkboxes but I need to manually create them.
My program is below and I am not sure why it doesn't work. If someone can kindly pleaes point me to my mistake, I would greatly appreciate. I am not skilled with PHP/JavaScript.
Thanks!
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
<script type="text/javascript">
$(document).ready(function() {
//set initial state.
$('#checkbox').val($(this).is(':unchecked'));
$('#checkbox').change(function() {
if($(this).is(":checked")) {
var box = document.createElement("div");
box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;
document.myForm.appendChild(box);
hasBox = true;
}
});
});
</script>
</head>
<body>
<p>Click on this paragraph.</p>
<form action="">
<input id="checkbox" name="click" type="checkbox" onclick="check(this)"/>initial checkbox<br>
</body>
</html>
You can also do this with CSS:
.secondary-checkboxes
{
display: none;
}
.primary-checkbox:checked ~ .secondary-checkboxes
{
display: initial;
}
<input type="checkbox" class="primary-checkbox"> Primary checkbox
<br>
<div class="secondary-checkboxes">
<input type="checkbox"> Secondary checkbox 1
<br>
<input type="checkbox"> Secondary checkbox 2
<br>
<input type="checkbox"> Secondary checkbox 3
<br>
</div>
Source: this Stack Overflow question
Your on the right track.
You have a few problems in your code.
1) You forgot to enclose your new checkbox tag within quotation marks.
box.innerHTML = <input type="chkbox" name="checkme"> 2nd checkbox;
should be:
box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";
Also note the change from type "chkbox" to "checkbox"
2) To set the initial state for a checkbox I would use the inbuilt prop function in JQuery. For example:
$('#checkbox').prop('checked', false);
rather than your code of:
$('#checkbox').val($(this).is(':unchecked'));
3) The last problem is when you append the new checkbox to the form. The way that i would do this is using JQuery again:
$("#myForm").append(box);
and give the form element an id of "myForm"
Please find below my full code which works to your requirements:
$(document).ready(function() {
//set initial state.
$('#checkbox').prop('checked', false);
$('#checkbox').on('click', function() {
if($(this).is(":checked")) {
var box = document.createElement("div");
box.innerHTML = "<input type=\"checkbox\" name=\"checkme\"> 2nd checkbox<br>";
$("#myForm").append(box);
hasBox = true;
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<p>Click on this paragraph.</p>
<form action="" id="myForm">
<input id="checkbox" name="click" type="checkbox"/>initial checkbox<br>
</form>
Hope that you found this useful.
I'm working on a little script that will disable a form field if certain radio button are ticked or if the input filed has characters to disable the radio buttons
So what I'm wanting my code to do is when the User enters the text field and adds at least one character of any type to disable the radio buttons and if that field is cleared to re-enable the radio buttons
For some reason when I'm doing either or, my "Enabled" alert keeps showing and the radio buttons aren't being disabled
to get the alert to pop, need to click outside of the input field, I would like this to be a mouseout if possible but I can work on that later
If the value is entered within the form directly, the radio buttons are disabled but I can't get them enabled once the filed is cleared
Steps:
Enter text in text field, if value isn't set in the form. Radio buttons stay disabled
Enter Value within the form, the text buttons stay disabled when the text field is cleared
Working Parts:
If radio btn "Yes" is ticked display "test" string and disable text field
If Radio btn "No" is ticked then enable text field
jQuery version in use: 1.9
Below is my JavaScript and below that is the HTML
Script:
$(function() {
var tlHeader = 'Test';
var f2 = $('#field_2').val();
// This function controls inpput box toggling on/off radio buttons
$( '#field_2' ).change(function() {
if(f2.length != 0) {
alert( "Disabled" )
$("input[name=toggle]").prop('disabled', true)
} else if(f2.length == 0) {
alert( "Enabled" )
$("input[name=toggle]").removeProp('disabled')
};
});
window.invalidate_input = function() {
// This function controls radio btn actions
if ($('input[name=toggle]:checked').val() == "Yes") {
$('#field_2').attr('disabled', 'disabled'),
$('#thgtLdr').html( tlHeader );
$('#thgtLdr').not("No").show();
} else if ($('input[name=toggle]:checked').val() == "No") {
$('#field_2').removeAttr('disabled'),
$('#thgtLdr').not("Yes").hide();
}
};
$("input[name=toggle]").change(invalidate_input);
invalidate_input();
});
</script>
HTML:
<body>
<div id=rdTest>
<div class="inputField">
<label>Focal Image:</label>
<input name="FocalImage" type="text" id="field_2" class='textbox' value="" />
</div> <!-- End input field -->
<div class="radioGroup">
<label>Test Page:</label>
<input type='radio' name='toggle' value='Yes' id="tglyes"/>Yes
<input type='radio' name='toggle' value='No' id="tglno"/>No
</div>
<div id="thgtLdr">
</div>
</div>
</body>
Your use case isnt entirely clear but I'll show you how to achieve the basic goal.
First, I would avoid the mouse events and use keyup with a timer so that my function is only called when the user stops typing and not after each typed letter. Then it's just a mater of checking the text and acting to enable or disable the elements. Here is an example:
var keyupDelay = (function(){
var timer = 0;
return function(callback, ms){
clearTimeout (timer);
timer = setTimeout(callback, ms);
};
})();
$('#field_2').keyup(function() {
var $this=$(this);
keyupDelay(function(){
var val=$this.val();
console.log(val);
if(val=='') $('#tglyes, #tglno').prop('disabled',true);
else $('#tglyes, #tglno').prop('disabled',false);
}, 400 ); // triggered after user stops typing for .4 seconds, adjust value as needed
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=rdTest>
<div class="inputField">
<label>Focal Image:</label>
<input name="FocalImage" type="text" id="field_2" class='textbox' value="" />
</div>
<!-- End input field -->
<div class="radioGroup">
<label>Test Page:</label>
<input type='radio' name='toggle' value='Yes' id="tglyes" disabled="true"/>Yes
<input type='radio' name='toggle' value='No' id="tglno" disabled="true"/>No
</div>
<div id="thgtLdr">
</div>
</div>
Try this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).on('click','.choice',function(){
if($(this).val() == 'yes')
{
$('.textfield').prop('disabled',true);
$('#string').html('Test Welcome');
}
else
{
$('.textfield').prop('disabled',false);
$('#string').html('');
}
});
$(document).on('keyup','.textfield',function(){
if($(this).val().length > 0)
{
$('.choice').each(function()
{
if($(this).is(':checked'))
{
$(this).attr('checked',false);
}
$(this).prop('disabled',true);
});
}
else
{
$('.choice').prop('disabled',false);
}
});
});
</script>
<body>
<form>
<input type="text" class="textfield" placeholder="enter text"/>
Yes<input type="radio" name="choice" class="choice" value="yes" />
No<input type="radio" name="choice" class="choice" value="no" />
<p id="string" ></p>
</form>
</body>
You can simplify your code in many ways.
The keyup event will be triggered every time the user releases a key on the text field. Inside the callback, you can get the value of the text field with this.value. From experience, it is best to use .prop() method when toggling certain input-related attributes like disabled and checked. You can enable/disable these attributes using booleans.
// cache the elements to avoid having retrieve the same elements many times
var $textbox = $('#field_2'),
$radios = $('input[name=toggle]'),
$div = $('#thgtLdr');
// everytime user presses a key...
$textbox.on('keyup', function() {
// check if a value was entered or not
// if so, disabled the radio buttons; otherwise enable the radio buttons
$radios.prop('disabled', this.value);
});
// when radio buttons change...
$radios.on('change', function () {
// check if value is Yes or No
if (this.value === 'Yes') {
$textbox.prop('disabled', true);
$div.text(this.value);
} else {
$textbox.prop('disabled', false);
$div.empty();
}
});
<div id=rdTest>
<div class="inputField">
<label>Focal Image:</label>
<input name="FocalImage" type="text" id="field_2" class="textbox" value="">
</div>
<div class="radioGroup">
<label>Test Page:</label>
<input type="radio" name="toggle" value="Yes" id="tglyes">Yes
<input type="radio" name="toggle" value='No' id="tglno">No
</div>
<div id="thgtLdr"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script> // place code here </script>
Also, get into the habit of caching your jQuery objects.
I have a question about a confusing jQuery validation with checkboxes problem.
I have a form that has two headings:
The issue: Under the "Heading 1", one option must be selected and under "Heading 2" one option must be selected.
<input type="checkbox" id="commjoin" name="commjoin"/> THROUGH <input type="checkbox" id="commjoin11" name="commjoin11"/> is under "Heading 1".
Heading 1
checkbox
checkbox
checkbox
checkbox
checkbox
checkbox
<input type="checkbox" id="commjoin12" name="commjoin12"/> THROUGH <input type="checkbox" id="commjoin50" name="commjoin50"/> is under "Heading 2".
Heading 2
checkbox
checkbox
checkbox
checkbox
checkbox
checkbox
This needs to be checked when the "Next" button is clicked <input type="submit" name="button" onclick="return ckFormJ(5); " runat=server id="button" value="Next >>">
To reiterate, under the "Heading 1" one option must be selected and under "Heading 2" one option must be selected.
I could see how to see if one box is checked maybe but to validate if at least one box is checked under each heading is a bit more difficult. How could I go about getting this to work?
Hi,
I wrapped each group in a div tag so that I can then check each group for at least one box checked but for some reason I can't get it working.
CODE BELOW NOT SHOWING UP RIGHT; How do I post HTML?
Chemistry/Urinalysis
$0.00
Education
$0.00
Generalist
$0.00
Hematology/Hemostasis
$0.00
Alabama State Society
$10.00
Alaska State Society
$0.00
Arizona/Nevada State Society
$0.00
Arkansas State Society
$0.00
JQUERY shows up fine:
$("input[type=submit]").click(function () {
var length1 = $('#Scientific Assembly input[type=checkbox]:checked').length;
alert("length1=" + length1);
var length2 = $('#State Societies input[type=checkbox]:checked').length;
alert("length2=" + length2);
if (length1 == 0) {
alert("Please select at least one Scientific Assembly checkbox");
return false;
}
if (length2 == 0) {
alert("Please select at least one State Societies checkbox");
return false;
}
return true;
});
The question is not worded well. Nonetheless, the OP is asking if you have a checkbox group spread across different heading tags...how do you make sure at lease one box is selected per heading.
Solution
Wrap checkbox sections in a tag
checkbox onchange check length of selected checkboxes per section
compare selection.length >= 1 per section
do something on valid
Live Example
http://codepen.io/anon/pen/RagaML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test</title>
</head>
<body>
<h1>heading 1</h1>
<fieldset id="area1">
<input type="checkbox" name="test"> Box1
<input type="checkbox" name="test"> Box2
</fieldset>
<h1>heading 2</h1>
<fieldset id="area2">
<input type="checkbox" name="test"> Box3
<input type="checkbox" name="test"> Box4
</fieldset>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>
$("input[name=test]").change(function () {
// check if child box is checked in first section
var area1 = $("#area1").children("input[name=test]:checked");
// check if child box is checked in second section
var area2 = $("#area2").children("input[name=test]:checked");
var isValid = (area1.length >= 1 && area2.length >= 1);
if (isValid)
alert("valid");
});
</script>
</body>
</html>
Try substituting input type="radio" element for input type="checkbox" elements; use fieldset element to contain input elements, add disabled attribute to input type="submit" element and input type="radio" elements that are not :checked with .prop(); remove disabled attribute when an input within a fieldset is :checked using .is() to check state of input type="radio" elements within a given fieldset parent element.
$(".next").prop("disabled", true);
$("fieldset").each(function() {
if (!$(":checked", this).is("*")) {
$(this).addClass("notChecked")
}
});
$("form").change(function() {
var bool = false;
var checked = $(".req").each(function(i, el) {
bool = $(":radio", this).is(":checked")
});
if (bool) {
$(".next[type=submit]").prop("disabled", false);
};
$("fieldset:has(:checked)").removeClass("notChecked")
});
fieldset {
width: 150px;
}
fieldset.notChecked {
border: 1px solid red;
}
fieldset.notChecked:after {
content: "Required";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form>
<fieldset class="req">
<label>Heading 1</label><br>
<input type="radio" />
<input type="radio" />
<input type="radio" />
</fieldset>
<fieldset class="req">
<label>Heading 2</label><br>
<input type="radio" />
<input type="radio" />
<input type="radio" />
</fieldset>
<input class="next" type="submit" />
</form>
I have been using the following code to change the color of <p> depending upon the radio button checked.
I have been using two classes red and blue,
but its not working.
So kindly help me out.
<html>
<head>
<script type="text/javascript">
var ele = document.getElementsByName('color');
if (ele[0].checked) { //index has to be j.
$("p").toggleClass("blue");
}
else {
$("p").toggleClass("red");
}
</script>
<style type="text/css">
.blue
{
color:blue;
}
.red
{
color:red;
}
</style>
</head>
<body>
<input type="radio" name="color" value="blue">blue<br>
<input type="radio" name="color" value="red">red
<p>When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>
</body>
</html>
As such, your javascript will be executed before your elements even exist in the DOM. You should put your javascript code at the very end of the body, or include it in an event handler triggered when your document is loaded.
The HTML :
<input type="radio" name="color" value="blue">blue<br>
<input type="radio" name="color" value="red">red
<p id="myParagraph">When a user clicks on a radio-button, it becomes checked, and all other radio-buttons with equal name become unchecked.</p>
In Vanilla JS :
document.addEventListener('DOMContentLoaded', function() {
var radioButtons = document.getElementsByName('color');
var paragraph = document.getElementById('myParagraph');
for(var i=0;i< radioButtons.length;i++)
{
var elem = radioButtons[i];
elem.addEventListener('change',function(e){
console.log(paragraph);
if(paragraph.className)
paragraph.className = this.value;
else
paragraph.classList.add(this.value);
}
,false);
}
});
Fiddle of this
Or, if you use jQuery and correctly include it in your page (which is not the case in your example) :
$('document').ready(function() {
$('input:radio').on('change',function(){
$('#myParagraph').addClass(this.value);
});
});
Fiddle of this