i have a problem in creating radio buttons dynamically, i have a text box and a button, i asked the user to input a value in the text field then i retrieve the text box value and use it to create a radio button when he press a button, i tried this code in javaScript but it doesn't create a radio button on clicking the specified button:
<script type="text/javascript" >
function createRadioElement(value, checked) {
var radioHtml = '<input type="radio" value="' + value + '"';
if ( checked ) {
radioHtml += ' checked="checked"';
}
radioHtml += '/>';
var radioFragment = document.createElement('div');
radioFragment.innerHTML = radioHtml;
return radioFragment.firstChild;
}
$( '#admin' ).live( 'pageinit',function(event){
$( "#AddButton" ).bind( "click", function(event, ui) {
var x=document.getElementById('option').value
createRadioElement(x, checked);
});
});
</script>
`
Try the following for the creation of a radio input:
function createRadioElement(elem, value, checked) {
var input = document.createElement('input');
input.type = 'radio';
input.value = value;
if (checked) {
input.checked = 'checked';
}
elem.parentNode.insertBefore(input, elem.nextSibling);
}
JS Fiddle demo.
References:
createElement().
insertBefore().
parentNode.
Here are the problems as I can see them:
In your #AddButton click function, you pass a variable checked which does not exist.
You don't pass the element returned from createRadioElement to anything that will insert it into the DOM
I fixed those by basically changing your #AddButton click function to the following:
$("#AddButton").bind("click", function(event) {
var x = document.getElementById('option').value,
$ra = $('#RadioArea');
$ra.html(createRadioElement(x, true));
});
You'll probably want to change this so it appends the radio button to the end of whatever your #RadioArea element is instead of replacing the contents completely.
See demo
Related
How can I fire those functions when I click buttons? I need to run it when some text has change. but I have a button on my page.. when I type it changes but when I use buttons to change the value it doesnt fire the functions(codes)
$(document).ready(function(){
var text1 = $(':text'),
text2 = $(':text'),
text3 = $(':text'),
text4 = $(':text'),
activeInput = text1;
activeInput.focus();
$(':text').on('focus', function(){
activeInput = $(this);
});
$(':button').on('click', function(){
activeInput.val(activeInput.val()+ $(this).val());
$('#dec').change(function(){
fromdecimal();
})
$('#bin').bind('change click ', function(){
frombinary();
})
$('#hex').bind('change click',function(){
fromhexadecimal();
})
$('#oct').bind('change click',function(){
fromoctal();
})
});
});
are you using :(colon) to select class?? if yes then you are doing wrong.
use . (dot) to select class like
var text = $('.text');
for any other issue , show your html code.
I have a form with some radio buttons and checkboxes. Some checkboxes/radio have some hidden dividers next to them. The hidden dividers should only become visible when a user select the corresponding radio/checkbox.
Each radio/checkbox has a value in this format 123:456 the corresponding hidden divider will have an id attribute equal to group_123_456
I am able to find the divider id's value that I needs to visible/hide from the value of each item (checkbox or radio.)
I thought I can get a way by utilizing the change() event. I thought I can evaluate each item. If the item is check, show the corresponding div otherwise hide it.
Here is what I have done
$("input[type='radio'], input[type='checkbox']").change(function(e) {
$(this).each(function(index, item){
var newGroupName = '';
if( $(item).is(':checked') ){
console.log( $(item).val() + ' is checked' );
newGroupName = getGroupElement( $(this).val() );
$('#' + newGroupName).show();
} else {
console.log( $(item).val() + ' is NOT checked' );
newGroupName = getGroupElement( $(this).val() );
$('#' + newGroupName).hide();
}
});
}).change();
The above code works for the checkboxes but it does not work for the radio buttons.
I create a fiddle to give you a good idea of what I am trying to do here https://jsfiddle.net/oke8qLwg/2/
How can I show/hide the correct divider everytime the use change the input's value?
https://jsfiddle.net/oke8qLwg/
Here is what I did to correct this problem
$(":radio").change(function(e) {
var name = $(this).attr('name');
$('input[name='+name+']').each(function(index, item){
applyLogic(item);
});
});
$(":checkbox").change(function(e) {
applyLogic( $(this) );
});
function applyLogic(item)
{
var newGroupName = getGroupElement( $(item).val() );
if( $(item).is(':checked') ){
$('#' + newGroupName).show();
} else {
$('#' + newGroupName).hide();
}
}
every time a radio button is change, I loop through the buttons that have the same input name, then I apply the show/hide logic.
I currently have a selection of buttons and on click of a button I want to add the text from the button into a text-box. Every time I click on the button I want to be able to append on to whatever I have in the input field.
What I currently have
$('#js-AddFilterOpenBracket').click(function () {
$('#js-FilterString').val($(this).text());
});
What I'm Aiming for
$('#js-AddFilterOpenBracket').click(function () {
$(this).text().appendTo($('#js-FilterString'));
});
No need to use appendTo as it should be used for elements. Rather, manually append to the current value then set it
$('#js-AddFilterOpenBracket').click(function () {
var currentVal = $('#js-FilterString').val();
var newVal = currentVal + $(this).text();
$('#js-FilterString').val(newVal);
});
May not be the bast way but you could do this
$('#js-AddFilterOpenBracket').click(function () {
$('#js-FilterString').val($('#js-FilterString').val() + $(this).text());
});
I am building a dynamic small lenght converter that contains 3 input[text]s. Like so
<input type='text' class='bx' id='cm'> Centimeter<br>
<input type='text' class='bx' id='m'> Meter<br>
<input type='text' class='bx' id='km'> Kilometer<br>
The effect is the following: if you click on "Meter" the value becomes '' and if you type a value the "Centimeter" and "Kilometer" value will be equal to a value(...).
Example
The jquery is like so:
$(function() {
var selected = ????;
// do i need something here to empty the input it is focused on?
$("#cm").val(selected * 545);
$("#km").val(selected * 545);
$("#m").val(selected * 453);
})
I want the var selected to be equal to the value of the text input it is focused on.
How can i do this?
The calculation in examples are informative.
You can use jQuery focus to get selected input field.
$(function() {
$("input.bx").focus({
var selected =parseInt(this.value, 10);
this.value = ''; //this line will remove text from selected input.
$("#cm").val(selected * 545);
$("#km").val(selected * 545);
$("#m").val(selected * 453);
});
})
var selected = $(this).val();
// // The code you have written will only work fro the first time your page loads. If you want it to work on every click of it you need to handle the focus event of the input..
$('#cm , #km , #m').on('focus', function() {
var selected = parseInt($(this).val() , 10) ; // Will convert to a Int
$("#cm").val(selected * 545);
$("#km").val(selected * 545);
$("#m").val(selected * 453);
});
But I think a blur event makes more sense here instead of a focus event..
FIDDLE
Which will point to the value of the selected input
You have to implement a listener that listens for the focus event.
check this out:
http://api.jquery.com/focus/
$('.bx').focus(function() {
var id = $(this).attr("id");
if (id === "cm") {
alert('Handler for .focus() called cm');
}
else if (id === "m") {
alert('Handler for .focus() called m');
}
else if (id === "km") {
alert('Handler for .focus() called km');
}
});
You need an event handler, in this case for the focus event:
$(function() {
$(".bx").focus(function(e) {
var selectedval = this.value,
selectedtype = this.id;
…
});
});
I have two checkboxes:
<input id="outside" type="checkbox" value="1" data-gid="41820122" />
<input id="inside" type="checkbox" value="1" data-gid="41820122" />
I've made them mutually exclusive with:
$(function(){
//mutually exclusive checkboxes
$("input[data-gid]").click(function(){
var gid = $(this).attr('data-gid');
var fid = $(this).attr('id');
var checkboxes = $("input[data-gid=" + gid + "][id!=" + fid + "]");
checkboxes.attr("checked", false);
});
});
This works fine. But I also want to add additional click functionality to the 'inside' checkbox. I want it to enable/disable a textarea on the same form, so I've done this:
$('#application_inside').click(function() {
if ($(this).is(':checked')) {
return $('textarea').removeAttr('disabled');
} else {
return $('textarea').attr('disabled', 'disabled');
}
});
So, if the 'inside' checkbox is checked, the textarea will be enabled, if it's not checked, the textarea should be disabled.
The problem is that if the 'inside' checkbox is checked, and the user then checks the 'outside' checkbox, the 'inside' becomes unchecked (as it should be), but the textarea remains enabled. This appears to be because the 'inside' checkbox was never actually clicked by the user.
I've tried working around this with the following:
$(function(){
//mutually exclusive checkboxes
$("input[data-gid]").click(function(){
var gid = $(this).attr('data-gid');
var fid = $(this).attr('id');
var checkboxes = $("input[data-gid=" + gid + "][id!=" + fid + "]");
checkboxes.attr("checked", false);
checkboxes.triggerHandler("click"); //new code to fire any click code associated with unchecked boxes
});
});
But this just throws the browser in a loop, since the two different click events end up calling each other.
How can I keep my mutually exclusive code while still allowing the enable/disable code for the 'inside' checkbox to work?
You can create a custom event that you trigger when you click on #application_inside. Also you will fire this custom event when you uncheck other boxes because of the exclusiveness.
Here is an example: http://jsfiddle.net/gs78t/2/
you may try something like this
var insideChanged = function() {
if ($('#inside').is(':checked')) {
return $('textarea').removeAttr('disabled');
} else {
return $('textarea').attr('disabled', 'disabled');
}
};
$('#application_inside').click(insideChanged);
$(function(){
//mutually exclusive checkboxes
$("input[data-gid]").click(function(){
var gid = $(this).attr('data-gid');
var fid = $(this).attr('id');
var checkboxes = $("input[data-gid=" + gid + "][id!=" + fid + "]");
checkboxes.attr("checked", false);
insideChanged(); //new code to fire any click code associated with unchecked boxes
});
});