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/

Move input between divs

Trying to move user input from one div to another via a move button, back and forth. Even if there is multiple inputs one can move selected input from one to the other.
So far it moves all inputs in "field1" to "field2". Im trying to move only a single line back and forth.
Tried various stuff, still learning this. Any pointers on what i need to look at in order to achieve this?`
Any help appreciated.
var number = [];
function myNotes() {
var x = document.getElementById("field1");
number.push(document.getElementById("input").value);
x.innerHTML = number.join('<input type="button" value="move" onclick="move();"/><br/>');
}
function move() {
$('#field1').appendTo('#field2')
}
form {
display: inline;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input id="input" type=text>
</form>
<input type=submit onclick="myNotes();" value="Send">
<br>
<span id='displaytitle'></span>
<h2>Field 1</h2>
<div id="field1"></div>
<h2>Field 2</h2>
<div id="field2"></div>
JSFIDDLE

You've got a mixture of javascript and jQuery going that's kind of hard to understand. I've whipped up an example of this using jQuery, since you seem to have it in your project anyway:
https://jsfiddle.net/j5mvq6L5/7/
HTML:
<form>
<input id="input" type=text>
</form>
<input type=submit id="btnSend" value="Send">
<br>
<span id='displaytitle'></span>
<h2>Field 1</h2>
<div id="field1" class="field"></div>
<h2>Field 2</h2>
<div id="field2" class="field"></div>
JS:
//listen for document ready
$(document).ready(function() {
//button click listener:
$("#btnSend").on("click", function(e) {
var $field1 = $("#field1"); //works like getElementById
//create a containing div for later
var $entry = $("<div></div>").addClass("entry");
//create a new button
var $btnMove = $("<input/>").attr("type", "button").attr("value", "move").addClass("btnMove");
//click listener for the new button
$btnMove.click(function(){
//find "sibling" field (I added a class to both), append this button's parent div
$(this).parents(".field").siblings(".field").append($(this).parent());
});
//append entry parts
$entry.append($("#input").val())
.append($btnMove);
//append entry to #field1
$field1.append($entry);
});
});
CSS:
form {
display: inline;
}
.btnMove {
margin-left: .5em;
}

How to get the value of user text input of user created input, jQuery

I have created a button that lets the user create a new text input. I am trying to get the value of the text input of the newly created input.
HTML
<div class='pop-up-box-radio' Title="Edit Radios">
<div style="display: inline; float: left; margin-left: 5%;">
<div style="clear: both;">
<ul class="new-radios"></ul>
</div>
<p style="padding-top: 15px;">
<input type="button" class="add-radio" value="New Radio" />
</p>
<p>
<input type="button" class="values" value="Values" />
</p>
<p class="theValues"></p>
</div>
</div>
jQuery
// ADD RADIO
$('.add-radio').click(function(){
$("ul.new-radios").append("<li class='radioLi'><div style='dispaly: inline;'><input class='added-radio' type='text' style='width: 150px;' /><input type='button' class='deleteRadio' value='X' /></div></li>");
});
// GET VALUE OF INPUT
var newRadio = $('input.added-radio').val();
$('.values').click(function(){
$("p.theValues").append("<p>" + newRadio + "</p>");
});
// DELETE RADIO
$('div.pop-up-box-radio').on('click', 'input.deleteRadio', function() {
var clickedButton = $(this);
clickedButton.parent().remove();
});
When the value button is clicked, the only response I get is 'undefined'.
JSfiddle

You need a slight amendment to your JS to be able to find the new element you have found.
Firstly, var newRadio will run on browser load and not on the click function to create a new input. Your best option is to run it when clicking the .values button.
Secondly, .click() cannot find dynamically created elements. If you change this out be a .on('click' function, it will be able to find the dynamically added element.
Third and lastly, this will only find one element and not find all of them. If you make an each() function and loop through, you will be able to find all of the inputs.
// ADD RADIO
$('.add-radio').click(function() {
$("ul.new-radios").append("<li class='radioLi'><div style='dispaly: inline;'><input class='added-radio' type='text' style='width: 150px;' /><input type='button' class='deleteRadio' value='X' /></div></li>");
});
$('.values').on('click', function() {
var list = ''; // create list variable
$('input.added-radio').each(function() { // start each loop
var curRadio = $(this).val(); // get value of current item
list += curRadio + ' - '; // append it to the list
}); // end loop
$("p.theValues").append("<p>" + list + "</p>"); // append list to the page
});
// DELETE RADIO
$('div.pop-up-box-radio').on('click', 'input.deleteRadio', function() {
var clickedButton = $(this);
clickedButton.parent().remove();
});
li {
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='pop-up-box-radio' Title="Edit Radios">
<div style="display: inline; float: left; margin-left: 5%;">
<div style="clear: both;">
<ul class="new-radios"></ul>
</div>
<p style="padding-top: 15px;">
<input type="button" class="add-radio" value="New Radio" />
</p>
<p>
<input type="button" class="values" value="Values" />
</p>
<p class="theValues"></p>
</div>
</div>

Your newRadio var is grabbing the value of $('input.added-radio') on initial page load (undefined, as no new fields have been added yet).
Your JSFiddle works if you move the .val() update inside your click function
$('.values').click(function(){
// GET VALUE OF INPUT
var newRadio = $('input.added-radio').val();
$("p.theValues").append("<p>" + newRadio + "</p>");
});
Updated JSFiddle
As an aside, $('input.added-radio').val() will only grab the value from the first field if multiples exist
Get the current value of the first element in the set of matched elements...
(from the .val() api)
So if a user clicks New Radio twice and enters text in both fields, only the value from the first one will be appended when your Values button is clicked.
If the first field is closed by clicking the X to the right, then the value from the next field will be used.

Your current implementation is only going to give you the value from the first dynamically created input control. Therefore, you would need to iterate through each element.
$('.values').click(function(){
$('input.added-radio').each(function(i,op)
{
$("p.theValues").append("<p>" + $(this).val() + "</p>");
});
});
Fiddle : http://jsfiddle.net/91e4a7wy/30/

Hiding and showing div series using Javascript

I'm making basic GPA calculator using Javascript.
Here is my code:
<div class="list">
<div class="row">
<div class="col col-50">Subject 1</div>
<div class="col"><input type="text" name ="GR1" placeholder="Grade"></div>
<div class="col"><input type="tel" name="CR1" placeholder="Credits"></div>
</div>
<div class="row">
<div class="col col-50">Subject 2</div>
<div class="col"><input type="text" name ="GR2" placeholder="Grade"></div>
<div class="col"><input type="tel" name ="CR2" placeholder="Credits"></div>
</div>
<button class="button button-positive">
Add Another Field //it can add uptop 10 fields
</button>
</div>
It will increment the same div series while incrementing the input name up to 10 fields. User can click Add Another Field and add a new div field.
In every div field, it only changes the subject and input fields' name with an incrementation of 1.
Question:
What is the best way to achieve this without duplicating the same thing over and over? Or do I need to first create 10 div forms and hide all and show them one by one upon each click? Please give me example.

Here is a solution that is in pure Javascript that will allow you to add up to 10 "field blocks". In the HTML file, put:
<div id="list">
<button onclick="addRow()">Add another field</button>
</div>
And here's the Javascript function to add a new row, and initialise the two first row:
<script type="text/javascript">
window.onload = function() {
addRow();
addRow();
};
function addRow() {
var element = document.getElementById('list');
var nextId = element.childElementCount;
if (nextId <= 10) {
var div = document.createElement('div');
div.setAttribute('class', 'row');
div.innerHTML = '<div class="col col-50">Subject ' + nextId + '</div><div class="col"><input type="text" name ="GR' + nextId + '" placeholder="Grade"></div><div class="col"><input type="tel" name="CR' + nextId + '" placeholder="Credits"></div>';
element.insertBefore(div, element.getElementsByTagName('button')[0]);
}
}
</script>
You can try it online on the following fiddle: https://jsfiddle.net/w82t30r4/

Try jQuery's clone (read about it here)
$(document).ready(function(){
$row = $(".row").clone();
$("button").click(function(){
$(".list").append($row.clone());
})
})
What's happening is that I clone the row to start with (before any data is in it). Then I add a clone of that clone to .list when the button is clicked.

Issue finding specific div with same class - JQuery

I have a file selector that populates a div with a thumbnail based on the file. Now I have multiple buttons and divs that contain the same class names. What I am using for each time the primary button is selected is, var thisButton = $(event.target); which translates to:
var appendThis = thisButton.closest('.insurance').find(".attachmentCont");
appendThis.append('<div class="singleImg"><img src="'+attachment.url+'" width="100px"/><input type="hidden" class="fileURL" value="'+attachment.id+'"/><span class="removeImg remove"> X </span></div>');
$(".removeImg").bind('click', function(){
$(this).parent().remove();
});
The appenThis equals the button which is within a div containing another div attachmentCont Both the button and div are within a parent div which is div.insurance There are multiple div.insurance containers. My issue is when using thisButton.closest('.insurance').find(".attachmentCont"); it always focuses on the .attachmentCont div that was first selected. So if I selected section 1, the image populates. If I select section 2, section 1 still gets that image when the div.attachmentCont within section 2 should of gotten the append() too.
Suggestions or Thoughts?
HTML EXAMPLE:
<div class="notes-section insurance">
<span><b>General </b></span><textarea style="width:97%;" rows="5" cols="50" class="insurance-description fields contractor_insurance_description" placeholder="...."></textarea>
<input type="date" class="expiration-date" placeholder="Expiration Date">
<br>
<span>Your</span>
<div class="attachmentCont">
</div>
<br>
<input type="button" class="upload_image_button" value="Attach Documents" style="width:150px;">
</div>

Here was the issue:
My blindness did not see that the function that contains the selected button was not in any way associated with the function that appended the data. Because of this all I had to do was move my var thisButton outside into the parent class.
Thank you everyone for you're time.
Solutions:
var thisButton
$('.upload_image_button').on('click', function( event ){
thisButton = $(event.target);
event.preventDefault();
});
....
function...({
var appendThis = thisButton.closest('.insurance').find(".attachmentCont");
appendThis.append('<div class="singleImg"><img src="'+attachment.url+'" width="100px"/><input type="hidden" class="fileURL" value="'+attachment.id+'"/><span class="removeImg remove"> X </span></div>');
$(".removeImg").bind('click', function(){
$(this).parent().remove();
});
});