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/

How to change label text using jquery

This is div tag
<div>
<label>some text 1</label>
<label>another text 1</label>
</div>
<button>button</button>
Whenever I click on the button, I will add the div tag. when the next div tag is added, it should change the digit in the label text.
For example: In the first div, it should be 1 and in the next div it should be 2.
I am getting the label text using
var labelValue = $('div').find('label').map(function() {
return $(this).text().replace(/\d/,2);
}).get();
What I want is to change digit in the label text to 2.
I am getting the value but the label value is not getting changed in the html.
How to get the updated label value?
Sorry if there are any mistakes

You can try this:
$('button').on('click', function(e) {
$('div:eq(0)').clone().insertAfter('div:last').find('label').filter(function(e) {
$(this).text($(this).text().replace(/\d/, $("div").length));
});
})
Fiddle Link

maybe that one you want DEMO
<div id="show_divz">
<div id="div_1">
<label>some text 1</label>
<label>another text 1</label>
</div>
</div>
<button>button</button>
in js
$(document).on('click','button',function(){
var getId = $(this).prev().find('div').last().attr('id');
getId = getId.split('_');
$("#show_divz").append('<div id="div_'+(parseInt(getId[1])+1)+'"><label>some text '+(parseInt(getId[1])+1)+'</label><label>another text '+(parseInt(getId[1])+1)+'</label> </div>');
});

Something like this:
$('div').find('label').each(function(){
$(this).text($(this).text().replace(/\d/,2));
});

make id for button and trigger the click event to achive it..
try this..
<div>
<label>some text 1</label>
<label>another text 1</label>
</div>
<button id="btn">button</button>
<script>
$('#btn').click(function(){
$('div').find('label').each(function(){
$(this).text($(this).text().replace(/\d/,2));
}); }); </script>
here is the fiddle.. http://jsfiddle.net/Sarathv15/0jbq7em3/

Hope this will be a help,
var count = 0;
$("#btn").click(function() {
count++;
$("#lbl").html(count);
}
</script>
<div><label id="lbl">1</label></div>
<button id="btn" type="button">Button</button>

Since you want to replace the HTML here use
$(this).html("new value");

How to use javascript to get input and put it on the page

I have the code below to get a date from a user and then put it in a variable but how do I add an event that once the user picks a date to then add it on the screen.
<div class="container" >
<div>
<h1>Welcome to this site</h1>
<p>Please select a date below.</p>
<p>Click Here: <input type="text" name="date" id="datepicker" /><p>
</div>
<div id='test'>
</div>
<script>
$("#datepicker").datepicker();
$("#datepicker").bind("change", function () {
$("#test").text($(this).val());
});
</script>
The code works this way.

Try this:
$("#datepicker").bind("change", function () {
$("#test").text($(this).val());
});
Working Demo on : JS Fiddle

try on onChange event :
var dateSelected ;
$("#datepicker").bind("change",function(){
//.. your code
dateSelected = document.getElementById('datepicker').value;
});

Jquery: Best way to pop-up a selection div

Greetings,
Assume that I have such hidden div:
<div id="option-dialog" style="display:none;">
First
Second
</div>
And I have a text input field:
<input type="text" id="myinput" />
When myinput field is clicked by mouse, I want the hidden div to appear close to the selected input field and once user selects a link from this div, div dissapears and the value selected is becomes the value of the text input field. How to achieve this?
I use jquery and jquery ui
Regards

You can use Cluetip to do this.

have you considered using JQueryUI: Autocomplete ?
This does exactly what you are looking for

$("#myinput").live("focus", function() {
$("#option-dialog").toggle();
});
$(".option").live("click", function() {
var opt_val = $(this).attr("value");
$("#myinput").val(opt_val);
$("#option-dialog").toggle();
});
add class="option" to your list items

Hi may be this what to you need?
$(function() {
$("#myinput").click(function(){
$(this).hide('slow');
$('#option-dialog').show('slow');
});
$('#option-dialog a').click(function(){
var a = $(this).text();
$(this).parent().hide('slow');
$("#myinput").val(a).show('slow');
});
});
<div id="option-dialog" style="display:none;">
First
Second
</div>
<input type="text" id="myinput" />

jQuery adding HTML element using before()

Here's my code:
$(document).on("click", "#add", function() {
console.log("clicked");
$(this).before('<lable>'+ current +'.</label><input type="text", id="option"><br>');
current = nextChar(current);
var string = $("label:last").text();
console.log(string);
});
using this, I'm trying to add some HTML element. But the behavior isn't exactly what I want it to be. The result should be something like
<lable>c.</lable>
<input type="text", id="option">
<br>
but everything is wrapped inside of lable and shows
<lable>c.<input type="text", id="option">
<br></lable>
I don't know why this is happening.

Put your element in a div with a certain id like myid
HTML:
<div id='myid'>
<input type="text" id="option">
</div>
JQUERY:
$(document).on("click", "#add", function() {
$('#myid').prepend('<lable>'+ current +'.</label>')
});