We Keep Coding

How can I get the source code of a specific div on radio oncheck?

I'd like to get the source code of a div, so example if a div contains some tags I'd like to get them as they are in html format and update it on a textfield.
JsFiddle : https://jsfiddle.net/Lindow/g1sp1ms3/2/
HTML :
<form>
<label class="tp_box_1">
<input type="radio" name="selected_layout" class="selected_layout" value="layout_1">
<div class="box_1">
<h3>box_one</h3>
<p>1</p>
</div>
</label>
<br><hr><br>
<label class="tp_box_2">
<input type="radio" name="selected_layout" class="selected_layout" value="layout_2">
<div class="box_2">
<h3>box_two</h3>
<p>2</p>
</div>
</label>
<textarea id="mytextarea"></textarea>
<input id="submit_form" type="button" value="Send">
</form>
JavaScript :
$('input[type="radio"][name="selected_layout"]').change(function() {
if(this.checked) {
// get the specific div children of $this
var selected_layout = $(this).find('.selected_layout');
// get source code of what's inside the selected_layout
/* example :
<h3>box_two</h3>
<p>2</p>
and put it in someVariable.
*/
// and put in into textarea (all this need to happens when a radio is changed with the source code of the checked div)
var someVariable = ...
$('textarea').val(someVariable);
}
});
How can I achieve this ? How can I get the source code inside a specific div ?

First, you don't want selected_layout to be equal to: $(this).find('.selected_layout') because this already points to that element. You want it to point to the next element that comes after it.
I think this is what you are looking for:
$('input[type="radio"][name="selected_layout"]').change(function() {
if(this.checked) {
// get the index within the set of radio buttons for the radio button that was clicked
var idx = $("[type=radio][class=selected_layout]").index(this);
// Get the div structure that corresponds to the same index
var test = $("[class^='box_']")[idx];
// Now, just make that the value of the textarea
$('textarea').val(test.innerHTML);
}
});
textarea { width:100%; height:75px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label class="tp_box_1">
<input type="radio" name="selected_layout" id="sl1" class="selected_layout" value="layout_1">
<div class="box_1">
<h3>box_one</h3>
<p>1</p>
</div>
</label>
<label class="tp_box_2">
<input type="radio" name="selected_layout" id="sl2" class="selected_layout" value="layout_2">
<div class="box_2">
<h3>box_two</h3>
<p>2</p>
</div>
</label>
<textarea id="mytextarea"></textarea>
<input id="submit_form" type="button" value="Send">
</form>

Create div element with:
Template inside
class or id for identifying
Set inputs' value to desired template class/id, then on input change find the template element base on input's value and extract the innerHTML of it by using jQuery's .html() method. Then put this HTML as an new value of textarea using also the.html() method on textarea element.
HTML:
<div id="template1" style="display:none;">
<h1>Hi!</h1>
</div>
<input type="radio" onchange="findTemplate(event)" value="template1" />
<textarea class="texta"></textarea>
jQuery:
var findTemplate = function(event) {
var target = $(event.target);
var templateName = target.val();
var template = $("#"+templateName);
var template = template.html();
var textarea = $(".texta");
textarea.html(template);
};
Working fiddle: https://jsfiddle.net/rsvvx6da/1/

Input will not fade away when I click the radio button

I am trying to write a html css js code. in one part of it I have a one group of radio buttons (including 2 items). I want this to happen: if I click the first radio, textbox1 appears, if I click the second one, textbox1 disappears and textbox2 appears and vice versa.
this scenario is happening when I click on one of them, but it is not working when I click the second one.
this is my html code:
<label>Which one do you want to enter?</label>
<br/>
<label>Budget:</label>
<input name = "submethod" id = "submethodbudget" type="radio" value = "bud"/>
<div id = "smethod" style="display:none">
<input type="text" name = "budgetsub">
</div>
<label>Number of Clicks per Month:</label>
<input name = "submethod" id= "submethodclicks" type="radio" value = "clckno"/>
<div id = "smethod2" style="display:none">
<input type="text" name = "clicksnosub">
</div>
<br/>
and this is my js :
<script type="text/javascript">
$("#submethodbudget").click(function() {
$("#smethod").show("300");
$('#smethod').css('display', ($(this).val() === 'bud') ? 'block':'none');
});
$("#submethodbudget").click(function() {
$("#smethod2").hide("300");
});
</script>
<script type="text/javascript">
$("#submethodclicks").click(function() {
$("#smethod2").show("300");
$('#smethod2').css('display', ($(this).val() === 'clckno') ? 'block':'none');
});
$("#submethodclicks").click(function() {
$("smethod").hide("300");
});
</script>
can you tell me what am i doing wrong?

change
$("smethod").hide("300");
to :
$("#smethod").hide("300");
I edit your code :
<html>
<head>
</head>
<body>
<label>Which one do you want to enter?</label>
<br/>
<label>Budget:</label><input name = "submethod" id = "submethodbudget" type="radio" value = "bud"/>
<div id = "smethod" style="display:none">
<input type="text" name = "budgetsub">
</div>
<label>Number of Clicks per Month:</label><input name = "submethod" id= "submethodclicks" type="radio" value = "clckno"/>
<div id = "smethod2" style="display:none">
<input type="text" name = "clicksnosub">
</div>
<br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$("#submethodbudget").click(function() {
$("#smethod").show("300");
$('#smethod').css('display', ($(this).val() === 'bud') ? 'block':'none');
$("#smethod2").hide("300");
});
$("#submethodclicks").click(function() {
$("#smethod2").show("300");
$('#smethod2').css('display', ($(this).val() === 'clckno') ? 'block':'none');
$("#smethod").hide("300");
});
</script>
</body>
</html>

Try this,
$(document).ready(function(){
$("#submethodbudget").click(function(){
$("#smethod").show(200);
$("#smethod2").hide(200);
});
$("#submethodclicks").click(function(){
$("#smethod2").show(200);
$("#smethod").hide(200);
});
});
You can even try this using jquery - css method.

Your code is correct ! I have some smart code for that ,have a try it.
$("input[name=submethod]").click(function() {
$('div').hide("300");
$(this).next("div").show("300");
});

Jquery get element attribute and insert it to an input text

I need help for this issue.
I have a list of file and in each one a checkbox input. So i need to check one of that checkboxes and when click on "Insert" button, get the attribute value and insert it to that text input.
I appreciate your help.
here is my html code link:
http://jsfiddle.net/Qd3n5/4/
<div class="download_list">
<div>
<p class="name"> samle-image.gif
</p>
</div>
<div class="size-text">
<input type="checkbox" name="delete" value="1" class="toggle">
</div>
</div>
<div class="download_list">
<div>
<p class="name"> favicon.ico
</p>
</div>
<div class="size-text">
<input type="checkbox" name="delete" value="1" class="toggle">
</div>
</div>
<div class="download_list">
<div>
<p class="name"> freedown.jpg
</p>
</div>
<div class="size-text">
<input type="checkbox" name="delete" value="1" class="toggle">
</div>
</div>
<div class="fileupload">
<button type="button" id="Inser_btn" class="btn btn-primary Inser_btn"> <i class="UpIcon icon-remove"></i>
<span>Insert</span>
</button>
</div>
<div class="test">
<input type="text" name="banners_image_local" value="some-text.png" size="51" maxlength="64">
</div>

You can try this :
$(function(){
$('#Inser_btn').click(function(){
var title='';
$('input[name="delete"]:checked').each(function(){
title+=$(this).closest('.size-text').prev().find('a').attr('title');
});
$('input[name="banners_image_local"]').val(title);
});
});
Demo

Use this piece of Code
$("#Inser_btn").click(function(){
var val = $(".toggle:checked").parent().siblings().eq(0).find("p a").text();
$(".test input").val(val);
});
JSFIDDLE

By doing so:
$(document).ready(function(){
$('#Inser_btn').click(function(){
$('.download_list').each(function(){
var checked = $(this).find('.toggle');
if(checked.is(':checked')){
$('input[name="banners_image_local"]').val($(this).find('a').html());
return false;
}
});
});
});
Here is a demo Fiddle

here is your code , have updated your JSFiddle
used jQuery for doing this click here
$(function(){
$("button").on('click', function(){
var checked = $("input[type='checkbox']:checked");
if(checked.length >0)
{
var value = checked.val();
$("input[name='banners_image_local']").val(value);
}
});
});

I am not sure whether this code works for you. Give it a try. (untested code)
$('#Inser_btn').on('click', function () {
$('input[name="banners_image_local"]').val('');
var ckText = $('input[name="delete"]:checked').val();
var textBox = $('input[name="banners_image_local"]').val();
textBox = textBox + " " + ckText;
$('input[name="banners_image_local"]').val(textBox);
});

If you want to get the checked checkboxes value in the input field this should do with jQuery:
$("#Inser_btn").click(function(){
$("#banners_image_local").val("");
$('input[name="delete"]:checked').each(function() {
$("#banners_image_local").val($("#banners_image_local").val() + ($(this).attr('value')));
});
});
Also set the input text to id="banners_image_local"
Best.

Try this:
$('#Inser_btn').click(function () {
$('input[name=banners_image_local]').val($('.toggle:checked').parent().prev().find('.File_Name').attr('title'));
});
Working Fiddle
Having a class name to input text would be better.

foreach radio button show more info

I am trying to make for each radio button, when it is clicked on to show the div with more infos about that clicked title, when another radio button is clicked then the to show info about that radio button and hide the other one that was clicked on:
HTML:
<input type="radio" id="1" />
<div class="event1">
content..
</div>
<input type="radio" id="2" />
<div class="event2">
content..
</div>
<input type="radio" id="3" />
<div class="event3">
content..
</div>
jQuery:
var i = 1;
while(i < 10) {
$('.event' + i).hide();
$("#" + i).click(function() {
$('.event' + i).show();
});
i++;
}

HTML
<input type="radio" name="radio" id="1" />
<div class="event">
content.. 1
</div>
<input type="radio" name="radio" id="2" />
<div class="event">
content.. 2
</div>
<input type="radio" name="radio" id="3" />
<div class="event">
content.. 3
</div>
JS
$('input[name=radio]').click(function() {
$('.event').hide();
$(this).next('.event').show();
});
CSS
.event {
display: none;
}
Fiddle
http://jsfiddle.net/UKn6D/

You can try changing your loop with "each"
$(function(){
$("input[type='radio']").each(function(){
$(this).change(function(){
if ($(this).is(':checked'))
$(this).next().show();
else
$(this).next().hide();
});
});
});
It would be preferrable if you assign a class to radio elements to focus specifically on them. Something like "radioElements" should be enough. Or you can also use id with a starter: "radio_1","radio_2" and then use the input[id^='radio_'].
In all the case you can use "each" function.
More deeply, if you want that all other radio "info" cut off change it to:
$(function(){
$("input[type='radio']").each(function(){
$(this).change(function(){
if ($(this).is(':checked')) {
$("input[type='radio']").next().hide();
$(this).next().show();
}
});
});
});

$('input[type="radio"]').on('change', function() {
var id = $(this).attr('id'); //Get the ID from the selected radio button
$('div:visible').hide(); //Hide visible Divs
$('div.event' + id).show(); //Show matched Div
});
You'll want to give the divs an additional class name and update the jQuery code here. You'll also want to make sure to assign a name attribute to the input elements so that they are all part of the same group -- assuming they are.

instead of having a while look like that why not simply have
<div id="input-container">
<input class="clickable" />
<div class="content"></div>
</div>
This will then work with multiple and the jQuery can just be like this
$('#input-container input.clickable').click(function() {
$(this).parent().find('div.content').hide();
$(this).next('div.content').show();
});
I haven't actually tested the above but I believe it should work for you & the reason to have the container ID is just to speed your jQuery up as it is faster to attach via #elementID first

Checkbox new state not reflecting

I have shown the problem at http://jsfiddle.net/7ZpCW/1/
I have implemented the code such that when I click on checkbox or text next to it, checkbox should be selected/de-selected depending upon its previous state.
The problem is when I click on text, though checkbox is getting checked but the alert message is getting executed only the number of times the previous checkboxes were selected.
While when I click on checkbox alert message is executed based on current state.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<span id="MYARRAYloader_collapse" class = "w195" style="display:block">
<div class="sp15"> </div>
<div class="lf fs12 lh15" style="padding-left:10px;">
<input type="checkbox" name="MYARRAY[]" id="MYARRAY0" value="ALL" checked class="chbx checkbox-selector1">
All
<br>
<input type="checkbox" name="MYARRAY[]" value="V" class="chbx checkbox-selector1">
Opt1
<span class="gray t11">(42)</span>
<br>
<input type="checkbox" name="MYARRAY[]" value="N" class="chbx checkbox-selector1">
Opt2
<span class="gray t11">(38)</span>
<br>
</div>
<div class="sp12"> </div>
</span>
<script>
$('.checkbox-selector').click(function() {
var chb = $(this).prev();
chb.click();
return false;
})
$('.checkbox-selector1').click(function() {
var chb , chb1 , action;
chb= $(this);
clusterName = chb.attr('name');
clusterVal = chb.attr('value');
var array = new Array();
$('input[name="'+clusterName+'"]:checked').each(function(i,el){
alert('Count Me');
chb1 = $(this);
if(clusterVal == 'ALL')
{
if(chb1.attr('value')!='ALL')
{
chb1.attr("checked","");
}
else
array.push($(el).val());
}
else
{
if(chb1.attr('value')=='ALL')
{
chb1.attr("checked","");
}
else
{
array.push($(el).val());
}
}
});
});
</script>

You are seriously convoluting this problem. You can make the text clickable simply by wrapping the checkbox and text in a label.
<label><input type="checkbox" /> This is some text</label>
<label><input type="checkbox" /> This is some text</label>
<label><input type="checkbox" /> This is some text</label>
jsFiddle: http://jsfiddle.net/7ZpCW/
​
You should really format your code like this to make it more semantic. But you won't. So you can fix your code by replacing this:
$('.checkbox-selector1').click( ... );
with this:
$('.checkbox-selector1').change( ... );
jsFiddle: http://jsfiddle.net/7ZpCW/2/