Develop Reference

Append an element to a new one in the same position

THE PROBLEM IS NOT THE LABEL FOR ATTRIBUTE, IT WORKS, MY PROBLEM IS THAT I NEED TO RENDER THE DOCUMENT AS EXPECTED
Getting crazy on this code! Why it doesn't works?
<div>
<input type="checkbox" name="tonino" />
</div>
<script>
var $el=$('input[name="tonino"]');
var el=$el.prop('name');
$el.before('<label for="'+el+'" />');
$el.appendTo($el.parent().find('label:first'));
</script>
I'm expecting:
<div>
<label for="tonino">
<input type="checkbox" name="tonino" />
</label>
</div>

A straightforward approach using $.wrap() http://api.jquery.com/wrap/
var cb = $('input[name="tonino"]');
cb.wrap($('<label />', {
'for': cb.attr('name')
}));

I think you want like below (check HTML through browser console to see code working properly or not?):-
var el=$('input[name="tonino"]');
el.before('<label for="'+el.attr('name')+'" />'+el.attr('name')+'<label>');
el.appendTo(el.parent().find('label:first'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="checkbox" name="tonino" />
</div>
Note:- jquery library needed too.

jQuery multiple id sets multiple patterns

OK, sure this is really simple, but I'm new to Java / jQuery so all help knowledge is greatly appreciated!
I have three sets of information, but i want each set to behave the same way, when I check a box, I want a certain div to appear, then disappear when the checkbox is unchecked...
Started with this, and it works...
//Set 1 #mod_1 toggles #sec_mod_1..
$('#sec_mod_1').change(function() {
$('#mod_1').toggle(this.checked);
}).change();
//Set 2
$('#sec_mod_2').change(function() {
$('#mod_2').toggle(this.checked);
}).change();
//Set 3
$('#sec_mod_3').change(function() {
$('#mod_3').toggle(this.checked);
}).change();
Now this is a little long winded, and I know there has to be a shorter way... Thinking something like this...
$('[id^="sec_mod_"]').change(function() {
$('[id^="mod_"]').toggle(this.checked);
}).change();
However, I don't know how to make this function for each separate set, was thinking the "this" keyword...?
Like I said all help would be greatly appreciated...

Use a simple class selector:
$('.trigger').change(function() {
var $checkbox = $(this);
var id = $checkbox.attr('id'); // eg. sec_mod_1
var numb = id.substring(id.lastIndexOf('_') + 1); // eg. 1
$('#mod_' + numb).toggle(this.checked); // toggle #mod_1
}).change();
Add trigger as the class to the elements that needs this functionality.
Working jsfiddle

You may use:
$('#mode_' + this.id.replace('sec_mod_', ''), this).toggle(this.checked);

You can use use the same markup with a handler like
$('input[id^="sec_mod_"]').change(function() {
console.log('d')
$('#mode_' + this.id.replace('sec_mod_', '')).toggle(this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="sec_mod_1" type="checkbox" />
<div id="mode_1">1</div>
<input id="sec_mod_2" type="checkbox" />
<div id="mode_2">2</div>
<input id="sec_mod_3" type="checkbox" />
<div id="mode_3">3</div>
Or if you can change the markup
$('.sec_mod').change(function() {
$($(this).data('target')).toggle(this.checked);
}).change();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input id="sec_mod_1" class="sec_mod" type="checkbox" data-target="#mode_1" />
<div id="mode_1">1</div>
<input id="sec_mod_2" class="sec_mod" type="checkbox" data-target="#mode_2" />
<div id="mode_2">2</div>
<input id="sec_mod_3" class="sec_mod" type="checkbox" data-target="#mode_3" />
<div id="mode_3">3</div>

How to check the radio button in which id field is blank using javascript

Here is sample html code
<div class="radioOff">
<input id="" class="hidden" type="radio">
<label for="">already a member</label>
<span class="identity">identify</span>
</div>
I tried using
document.getElementById("").checked = true;
its not working.
I can not do any change in code .
Here is that third party website where I need to select radio button
http://www.degriftour-selection.fr/login.html

Try:
$(".hidden[id='']").prop("checked",true);
DEMO here.

Can you try this,
$(function(){
$(".hidden").attr("checked", true);
});
You have used empty id="", you can add id value or you can use to get using classname.
<input id="myRadio" class="hidden" type="radio">
Jquery,
$("#myRadio").attr("checked", true);
Javascript:
document.getElementById("myRadio").checked = true;

try this
$('document').ready(function () {
$(".hidden").attr("checked", true);
});

There is no possibility to reference to empty ID because it'll be ignored in DOM.
One option is to use getElementsByClassName() to get all elements and then iterate through them. Second option (better) will be adding proper ID attribute and use it then.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<div class="radioOff">
<input id="" class="hidden" type="radio">
<label for="">already a member</label>
<span class="identity">identify</span>
</div>
<script>
$('#document').ready(function () {
$(".hidden").attr("checked", true);
});
</script>

You can make use of this code in ur js:
return ($('input[type=radio]:checked').size() > 0);
Or
if(document.getElementsByClassName("hidden").checked)

You could do something like this, I believe the querySelector is supported from IE8+ and on all other major browsers.
var elem = document.querySelector(".radioOff"),
radio = (elem.firstElementChild||elem.firstChild);
radio.checked = true;
JSFiddle
Updated according to comment. To select the checkbox déjà membr you could use the JQuery selector (as the page includes JQuery 1.7.2)
$('.radioOff').find('input[type=radio]').prop('checked', true);

I have tried this and it is working perfectly.... please try from your side...
<div class="radioOff">
<input id="" class="hidden" type="radio" />
<label for="">already a member</label>
<span class="identity">identify</span>
</div>
and then after use below jquery code (you also need to add jQuery file reference)...
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(".hidden").attr("checked", true);
});
</script>

How to add dynamic data in source of html using Javascript

I am using a simple Javascript toggle function with the following code.
<script>
function add_more(){
if (document.form.more[0].checked==true)
{
document.getElementById('moreTxt').style.display="block";
}
else if (document.form.more[1].checked==true)
{
document.getElementById('moreTxt').style.display="none";
}
}
</script>
do want to enter something more ?
<form name="form">
<input type="radio" value="yes" name="more" onclick="add_more()" /> Yes
<input type="radio" value="No" name="more" onclick="add_more()" /> No
<div id="moreTxt" style="display:none">
hi you can enter more here
<textarea rows="3" cols="4">
</textarea>
</div>
</form>
The Problem is if I click on 'yes', and for some reason I refresh the page, then the 'yes' radio button remains checked but moreTxt div hides (i.e. its default visiblity mode).
How should I tackle this problem?

Check the value of the control on document ready and adjust the div visibility accordingly.

This will reset all your input on load:
<script>
function resetChkBox() {
var e=document.getElementsByTagName('input');
var i=0;
while(i<e.length) {
if(e[i++].type=='radio') {
e[i].checked=false;
}
}
}
</script>
<body onload="resetChkBox()">

you should perform you add_more function onDucomentReady
Assuming you're using jquery:
$(document).ready(function() {
add_more();
}
)
or use plain javascript equivalent of document.ready()

If this is to be performed without jquery which should be the case since including jquery for such small thing will be overkill :
document.attachEvent("onDOMContentLoaded", function(){
ready()
});
In ready function check the value of the radio button.

JavaScript click function null value in text box

I need to null the value in text box on click, currently I have written a code as such:
<div class="keyword_non">
<h1>Keywords : <a class="someClass question_off" title="Keywords "></a></h1>
<h2><input type="text" name="kw1" value="one" /></h2>
<h2><input type="text" name="kw2" value="two" /></h2>
<h2><input type="text" name="kw3" value="three" /></h2>
<h2><input type="text" name="kw4" value="four" /></h2>
</div>
<script type="text/javascript" src="/functions/javascript/custom/non_profit_edit.js"></script>
<script type="text/javascript" src="/functions/javascript/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/functions/javascript/custom/jquery-ui-1.8.7.custom.min.js"></script>
Inside non_profit_edit.js i have written as such
$(document).ready(function(){
$(".kw1").click(function() {
$(".kw1").val(" ");
});
$(".kw2").click(function() {
$(".kw2").val(" ");
});
$(".kw3").click(function() {
$(".kw3").val(" ");
});
$(".kw4").click(function() {
$(".kw4").val(" ");
});
});
But write now its not working properly. Is this any browser issues or error in code?

In the selector the '.' indicates a class. For names use
$('[name="kw1"]'). //

Error in code.
Your selector ".kw1" selects an element with kw1 as the class attribute. None of your inputs have a class, they just have names. Add classes to them or replace the selector in your jQuery to this format: $('[name="kw1"]')
You can also simplify your function by doing this:
$('.keyword_non')
.on('click', 'input[type="text"]', function(e) {
this.value = ''; // input that was clicked on
}

This is a syntax error in your code.you does not use dot(.) in click function.Dot(.) will use for class. when kw1 is name in your input