Develop Reference

jquery radio button click and change function not working

I want to hide and show div according to radio buttons value.
HTML code is,
<div id="share_to_others">
<input type="radio" value="33" id="fx_sharepl_type" name="fx_sharepl_type">
<input type="radio" value="22" id="fx_sharepl_type" name="fx_sharepl_type">
<input type="radio" value="11" id="fx_sharepl_type" name="fx_sharepl_type">
</div>
And jquery code that i tried is,
$("#share_to_others input[name='fx_sharepl_type']").click(function () {
alert("test");
});
$("#share_to_others input[name='fx_sharepl_type']").change(function () {
alert("test");
});
$("#fx_sharepl_type").change(function () {
alert("asdas");
});
$("input[name=fx_sharepl_type]:radio").change(function () {
alert("click fired");
});
$(document).on('change', 'input:radio[name=fx_sharepl_type"]', function (event) {
alert("click fired");
});
Many of them from jsfiddle working demo, But not working for me, i dont know why.
Am i doing anything wrong?

You have to give unique id to each radio button then after do like this way.
$("#r1, #r2, #r3").change(function () {

$(function() { // DOM loaded event handler
var show_duration = 0;
var content_33 = $("#content_33");
var content_22 = $("#content_22");
var content_11 = $("#content_11");
var bloc_radio_share = $("#share_to_others");
// Take an html element in parameter and show it
function show_content(content_id) {
content_id.show(show_duration);
}
// Take an html element in parameter and hide it
function hide_content(content_id) {
content_id.hide(0);
}
hide_content(content_22);
hide_content(content_11);
bloc_radio_share.change(function() {
var radio_checked_val = $('input[name=fx_sharepl_type]:checked', '#share_to_others').val();
if (radio_checked_val == 33) {
hide_content(content_22);
hide_content(content_11);
show_content(content_33);
}
else if (radio_checked_val == 22) {
hide_content(content_33);
hide_content(content_11);
show_content(content_22);
}
else { // case content == 11
hide_content(content_33);
hide_content(content_22);
show_content(content_11);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="share_to_others">
<label>
<input type="radio" value="33" id="fx_sharepl_type" name="fx_sharepl_type" checked />
33
</label>
<label>
<input type="radio" value="22" id="fx_sharepl_type" name="fx_sharepl_type" />
22
</label>
<label>
<input type="radio" value="11" id="fx_sharepl_type" name="fx_sharepl_type" />
11
</label>
</div>
<div id="content_33">
This div is displayed because of click on radio button 33
</div>
<div id="content_22">
Radio button 22 has been clicked so I appear
</div>
<div id="content_11">
If you click on radio button 11 you'll see me, like now
</div>
Here is an example of algorithm that fits your need. Logic may be not the best or the fastest but that is a begin.

Your code wors but you forgot to include a JQuery source version located to the left side of the JSFiddle window.
Selecting any version of JQuery will make your code work.

Why won't the newly created input tags stay on page?

Im trying to create new input tags based on the number the user enters. My code will create the correct amount of tags, but they get removed almost immediately. Why?
<form>
<input type='text' id='input' />
<button>Submit</button>
</form>
<div id="box">
</div>
<script>
$(document).ready(function() {
$('button').click(function() {
var x = $('#input').val();
for(var i=0 ; i < x; i++) {
$('<input type="text" /><br>').prependTo('#box');
};
});
});
</script>

call preventDefault on the event to stop the button action from firing
$('button').click(function(e) {
e.preventDefault();
var x = $('#input').val();
for(var i=0 ; i < x; i++) {
$('<input type="text" /><br>').prependTo('#box');
};
});
FIDDLE

Change your existing button to an input with an id and use the id in the JS. Your problem is the form is being submitted when you click button.
http://jsfiddle.net/Delorian/65gLvfdx/
<input type="button" id="update" value="Submit" />

JavaScript Array need to display many hidden fields

Fiddle link here
<script>
function show1() {
if (document.getElementById("check1").checked == true) {
document.getElementById("info1").style.display="inline";
} else {
if (document.getElementById("check1").checked == false)
document.getElementById("info1").style.display="none";
}
}
</script>
<input type="checkbox" id="check1" name="check1" value="" onclick="show1();">
<style>
#info1, #info2 {
display: none;
}
</style>
What I need to do about 20 times is to show hidden fields info1, info2 etc. when check1, check2 is selected.

First it is always a good idea to find handlers in Javascript instead of inline events.
Second give all your inputs the same class to do so.
Have a data-* attribute that will store the corresponding input message.
You HTML would look like
HTML
<div class="container">
<div>
<input type="checkbox" id="check1" name="check1" value="" data-id="info1" class="checkbox"/>
<label for="check1">Click here for more information</label>
</div>
<div id="info1" class="info">Hidden information here will now appear onclick check1</div>
</div>
<div class="container">
<div>
<input type="checkbox" id="check2" name="check3" value="" data-id="info2" class="checkbox"/>
<label for="check2">Click here for more information</label>
</div>
<div id="info2" class="info">Hidden information here will now appear onclick check2</div>
</div>
<div class="container">
<div>
<input type="checkbox" id="check3" name="check3" value="" data-id="info3" class="checkbox"/>
<label for="check3">Click here for more information</label>
</div>
<div id="info3" class="info">Hidden information here will now appear onclick check3</div>
</div>
JS
// Get all the checkbox elements
var elems = document.getElementsByClassName('checkbox');
// iterate over and bind the event
for(var i=0; i< elems.length; i++) {
elems[i].addEventListener('change', show);
}
function show() {
// this corresponds to the element in there
// Get the info attribute id
var infoId = this.getAttribute('data-id');
if (this.checked) {
document.getElementById(infoId).style.display = "inline";
} else {
document.getElementById(infoId).style.display = "none";
}
}
Check Fiddle
This is one way of doing this.

I've updated your jsfiddle:
document.addEventListener('change', function(e) {
var id = e.target.getAttribute('data-info-id');
var checked = e.target.checked;
if (id) {
var div = document.getElementById(id);
if (div) div.style.display = checked ? 'block' : 'none';
}
});
Instead of creating an if ... else block for every checkbox, which becomes hard to maintain, I've associated every check with its DIV via the custom attribute data-info-id, which is set to the id of the aforementioned DIV.
I bind the 'change' event to the document (event delegation) and when it fires I check the source element has a data-info-id attribute. Then, I get the DIV with such id and show or hide it based on the value of the checked property.
The obvious advantage of doing it this way, via custom attributes, is that you don't depend of the position of the div, and you can change which checks shows what DIV in a declarative way, just changing the HTML.

Maybe you are looking for a javascript only solution, but there's a pretty simple solution in CSS
HTML
<div>
<input type="checkbox" id="check1" name="check1" value="" />
<label for="check1"> Click here for more information</label>
<div id="info1">Hidden information here will now appear onclick </div>
</div>
<div>
<input type="checkbox" id="check2" name="check2" value=""/>
<label for="check2"> Click here for more information</label>
<div id="info2">Hidden information here will now appear onclick </div>
</div>
CSS
input[type=checkbox] ~ div {
display: none;
}
input[type=checkbox]:checked ~ div {
display: block;
}
Fiddle here

Looks for an input with the data-enable attribute that matches to the id of the element being shown/hidden.
HTML
<input type="checkbox" data-enable="info0" name="check[]"/>
<input type="text" id="info0" name="info[]"/>
Javascript
function toggleEl(evt) {
var checkbox = evt.target;
var target = checkbox.getAttribute('data-enable');
var targetEl = document.getElementById(target);
// if checked, use backed-up type; otherwise hide
targetEl.type = (checkbox.checked)
? targetEl.getAttribute('data-type')
: 'hidden';
}
var inputs = document.getElementsByTagName('input');
for(var i=0,l=inputs.length;i<l;i++) {
var input = inputs[i];
var target = input.getAttribute('data-enable');
if(target!==null) {
var targetEl = document.getElementById(target);
// back-up type
targetEl.setAttribute('data-type',targetEl.type);
// hide it if the checkbox is not checked by default
if(!input.checked)
{ targetEl.type = 'hidden'; }
// add behavior
input.addEventListener('change',toggleEl,false);
}
}

Check out the following JSFiddle .
//<![CDATA[
// common.js
var doc = document, bod = doc.body, IE = parseFloat(navigator.appVersion.split('MSIE')[1]);
bod.className = 'js';
function gteIE(version, className){
if(IE >= version)bod.className = className;
}
function E(e){
return doc.getElementById(e);
}
//]]>
//<![CDATA[
// adjust numbers as needed
for(var i=1; i<2; i++){
(function(i){
E('check'+i).onclick = function(){
var a = E('info'+i).style.display = this.checked ? 'block' : 'none';
}
})(i);
}
//]]>

how to disable DIV element and everything inside [duplicate]

This question already has answers here:
How to disable all div content
(29 answers)
Closed 9 years ago.
I need to disable a DIV and all it's content using Javascript. I can swear that doing a simple
<div disabled="true">
was working for me before, but for some reason it no longer works. I don't understand why.
In IE10: the text "Click Me" is not greyed out and click handler still works.
I actually need this working for IE10. Below is my code.
<html>
<script>
function disableTest(){
document.getElementById("test").disabled = true;
var nodes = document.getElementById("test").getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++){
nodes[i].disabled = true;
}
}
</script>
<body onload="disableTest();">
<div id="test">
<div onclick="alert('hello');">
Click Me
</div>
</div>
</body>
</html>

The following css statement disables click events
pointer-events:none;

Try this!
$("#test *").attr("disabled", "disabled").off('click');
I don't see you using jquery above, but you have it listed as a tag.

pure javascript no jQuery
function sah() {
$("#div2").attr("disabled", "disabled").off('click');
var x1=$("#div2").hasClass("disabledDiv");
(x1==true)?$("#div2").removeClass("disabledDiv"):$("#div2").addClass("disabledDiv");
sah1(document.getElementById("div1"));
}
function sah1(el) {
try {
el.disabled = el.disabled ? false : true;
} catch (E) {}
if (el.childNodes && el.childNodes.length > 0) {
for (var x = 0; x < el.childNodes.length; x++) {
sah1(el.childNodes[x]);
}
}
}
#div2{
padding:5px 10px;
background-color:#777;
width:150px;
margin-bottom:20px;
}
.disabledDiv {
pointer-events: none;
opacity: 0.4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="div1">
<div id="div2" onclick="alert('Hello')">Click me</div>
<input type="text" value="SAH Computer" />
<br />
<input type="button" value="SAH Computer" />
<br />
<input type="radio" name="sex" value="Male" />Male
<Br />
<input type="radio" name="sex" value="Female" />Female
<Br />
</div>
<Br />
<Br />
<input type="button" value="Click" onclick="sah()" />

I think inline scripts are hard to stop instead you can try with this:
<div id="test">
<div>Click Me</div>
</div>
and script:
$(function () {
$('#test').children().click(function(){
alert('hello');
});
$('#test').children().off('click');
});
CHEKOUT FIDDLE AND SEE IT HELPS
Read More about .off()

You can't use "disable" to disable a click event. I don't know how or if it worked in IE6-9, but it didn't work on Chrome, and it shouldn't work on IE10 like that.
You can disable the onclick event, too, by attaching an event that cancels:
;(function () {
function cancel () { return false; };
document.getElementById("test").disabled = true;
var nodes = document.getElementById("test").getElementsByTagName('*');
console.log(nodes);
for (var i = 0; i < nodes.length; i++) {
nodes[i].setAttribute('disabled', true);
nodes[i].onclick = cancel;
}
}());
Furthermore, setting "disabled" on a node directly doesn't necessarily add the attribute- using setAttribute does.
http://jsfiddle.net/2fPZu/

Get the active field ID using javascript

I have about 30 input all text, I have a button that I want to get the ID of the focused one when the button press.
How can I get that?

Focus is tricky. As soon as some other element (like a button is clicked), the focus my have already moved so you can't see what input field was last active by looking at the focus.
You could attach event handlers for the focus event to each input element and keep track yourself of which one last received the focus and then use that variable when the button is pressed.
Perhaps if you describe the actual problem you're trying to solve, we could offer an even better solution.
You can see an example here of remembering the last active input field: http://jsfiddle.net/jfriend00/XmqPe/. Click the button and the last active field will be highlighted in red.
var lastInput;
function gotInput() {
lastInput = this;
}
function addEvent(elem, event, fn) {
if (elem.addEventListener) {
elem.addEventListener(event, fn);
} else {
elem.attachEvent("on" + event, function() {
fn.call(elem, window.event);
});
}
}
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
addEvent(inputs[i], 'focus', gotInput);
}
addEvent(document.getElementById('test'), 'click', function() {
for (var i = 0; i < inputs.length; i++) {
inputs[i].style.borderColor = '#000';
}
if (lastInput) {
lastInput.style.borderColor = '#F00';
}
});​

You can try this workaround to get the last input with focus in a button press:
Example using jquery:
<script type="text/javascript">
$(document).ready(function () {
var lastId = null;
$(".inputTest").focus(function () {
//put the last input id in a "global" variable:
lastId = $(this).attr("id");
});
$("#btnTest").click(function () {
if (lastId) {
//if exists, do something:
alert(lastId);
}
});
});
</script>
Html example:
<body>
<input type="text" name="test1" id="test1" class="inputTest" />
<input type="text" name="test2" id="test2" class="inputTest"/>
<input type="text" name="test3" id="test3" class="inputTest" />
<input type="text" name="test4" id="test4" class="inputTest" />
<input type="text" name="test5" id="test5" class="inputTest" />
<input type="text" name="test6" id="test6" class="inputTest" />
<input type="button" value="test" id="btnTest" />
</body>