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 can I change the index of input element dynamically based on parent and inner parent in jquery

How can I change the index of input element dynamically based on the parent and inner parent count in jQuery.
In the following code how can I change the index of form elements
<div id='parent_container0'>
<div id='parent_inner_container0'>
<label> Name </label>
<input type='text' name='name[]'/>
<div id='child_container0'>
<div id='child_inner_container0'>
<label> Email </label>
<input type='text' name='email[]'/>
<label> Phone </label>
<input type='text' name='phone[]'/>
</div>
</div>
</div>
</div>
<div id='parent_container1'>
<div id='parent_inner_container1'>
<label> Name </label>
<input type='text' name='name[]'/>
<div id='child_container1'>
<div id='child_inner_container1'>
<label> Email </label>
<input type='text' name='email[]'/>
<label> Phone </label>
<input type='text' name='phone[]'/>
</div>
</div>
</div>
</div>
I need the changed name of form element as
name[0]
email[0][0]
phone[0][0]
name[1]
email[1][0]
phone[1][0]
Based on the parent's index of those elements in jQuery.
How can I achieve this?
Any help is appreciated.
Thanks,
Note: The requirement is to use a nested form to add more form of parent and Child with each form has nested form fields I am using the following code for changing index.
$('.parent_container').each(function(i) {
var pindex = $(this).index();
var mainfrm=$(this);
var orgname="";
mainfrm.find('.parent_container_inner').each(function(j) {
$(this).find('input, select, textarea').each(function(k){
orgname = $(this).attr('name');
orgname = orgname.replace(/[[]\d]+/g,"");
$(this).attr('name', orgname+"["+pindex+"]["+j+"]["+k+"]");
});
});
});

First, you should select your parent "containers" with:
$("div[id^=parent_container]").each(function(){
console.log(this);
});
It will print your two parent_container (parent_container0 and parent_container1). Check out here how to use selector attribute with Starts With
Then you will need to find and replace all name[], email[] and phone[].
So, you should use Ends With, to find each input you need to replace the name
$("div[id^=parent_container]").each(function(){
var parentContainerId = this.id.replace('parent_container', '');
$(this).find("input[name$='[]']").each(function(){
var newName = this.name.replace('[]', '[' + parentContainerId + ']');
this.name = newName;
})
});
Here is the Fiddle
Also, concerning your question, you should definitely take a better look into JQuery Selectors

Clone form fields with value

I am trying to clone a form, along with its respective fields values. However, I am getting one field value in all cloned fields.
var $couriers = $('#do-list');
$('.add-do-list').click(function( e ) {
var $cloneElem = $couriers.children('.myform').last().clone();
$cloneElem.find('select').attr('value', $('select').val()).end()
$cloneElem.find('input[type=text]').attr('value', $('input[type=text]').val()).end()
$cloneElem.find('textarea').attr('value', $('textarea').val()).end()
$cloneElem.insertAfter( $couriers.children('.myform').last() );
e.preventDefault();
});
HTML:
<ul id="do-list">
<li class="myform">
<form>
<input type="text" name="fname" value="to be clone" />
<input type="text" name="lname" value="to be clone" />
<textarea name="detail">to be clone</textarea>
</form>
<div class="add-do-list">Duplicate form</div>
</li>
</ul>

First line, you have , after $('#do-list'). There needs to be a semi-colon or ;.
Before the first .find you need $cloneElem for it find inside.
Try this:
var $couriers = $('#do-list');
$('.add-do-list').click(function( e ) {
var $cloneElem = $couriers.children('.myform').last().clone();
$cloneElem.closest('select').attr('value', $('select').val()).end()
.closest('input[type=text]').attr('value', $('input[type=text]').val()).end()
.closest('textarea').attr('value', $('textarea').val()).end()
.insertAfter( $couriers.children('.myform').last() );
e.preventDefault();
});
UPDATE
Replaced .find() with .closest()
JSFiddle Demo

How to access an array of ID using an event trigger with checkboxes?

I need your help with my problem.
I created a static form. With a lots of and checkboxes. My problem is, I am integrating a javascript code for the selection of checkboxes. When the user check the parent checkboxes it will automatically check the subcategory. I can do this one by one (hardcoded). But it is a lot of work. What I think is I will put all of the IDs in an array and create a loop or event that will access them. But I don't know how. Ok that's all.
Here's my code: I am using CI and jquery 1.5
//here's the array
var checkboxParentMenu = ["checkAllFilipino","checkAllContinental","checkAllAsian","checkAllOthers"];
var checkboxChildMenu = ["filipino_cat","continental_cat","asian_cat","others_cat"];
Now here's the manual way.
$("input[data-check='checkAllFilipino']").change(function(){
$("#filipino_cat").find("input[type=checkbox]").attr("checked",this.checked);
});
Here's the pattern sample
<div id="parentTab">
<div id="categoryTab">
<input type="checkbox" />
</div>
<div id="subCategoryTab">
<input type="checkbox" />
</div>
<div id="childOfSubCategory">
<input type="checkbox" />
</div>
....
</div>

The super easy way out would be to actually nest the divs, then you could do this:
$('input[type=checkbox]').click(function () {
$(this).parent().find('input[type=checkbox]').attr('checked', $(this).attr('checked'));
});
HTML:
<div id="parentTab">
<div id="categoryTab">
<input type="checkbox" />
<div id="subCategoryTab">
<input type="checkbox" />
<div id="childOfSubCategory">
<input type="checkbox" />
</div>
</div>
</div>
</div>

One easy way out is
var checkboxParentMenu = ["checkAllFilipino", "checkAllContinental", "checkAllAsian", "checkAllOthers"];
var checkboxChildMenu = ["filipino_cat", "continental_cat", "asian_cat", "others_cat"];
$.each(checkboxParentMenu, function (idx, name) {
$('input[data-check="' + name + '"]').change(function () {
$("#" + checkboxChildMenu[idx]).find("input[type=checkbox]").attr("checked", this.checked);
});
})
But I would recommend
<input type="checkbox" data-check="checkAllFilipino" data-target="#filipino_cat" />CHECK ALL
<br/>
then
$('input').filter('[data-check="checkAllFilipino"], [data-check="checkAllContinental"], [data-check="checkAllAsian"], [data-check="checkAllOthers"]').change(function () {
$($(this).data('target')).find("input[type=checkbox]").attr("checked", this.checked);
});
Demo: Fiddle

Use prop() in place of attr() like,
var checkboxParentMenu = ["checkAllFilipino","checkAllContinental","checkAllAsian","checkAllOthers"];
var checkboxChildMenu = ["filipino_cat","continental_cat","asian_cat","others_cat"];
$.each(checkboxParentMenu ,function(i,parentChk){
$("input[data-check='"+parentChk+'").on(change',function(){
$('#'+checkboxChildMenu[i]).find("input[type=checkbox]").prop("checked",this.checked);
});
});

How to get siblings in different DIVs or SPANs?

I have a number of forms on a page, like this:
<form>
<input type="hidden" name="id" value="someID1">
<div>
<span>
<input type="submit" class="submitClass">
</span>
</div>
<div>
<input type="text" name="name" class="someClass" value="name1">
</div>
</form>
<form>
<input type="hidden" name="id" value="someID1">
<div>
<span>
<input type="submit" class="submitClass">
</span>
</div>
<div>
<input type="text" name="name" class="someClass" value="name1">
</div>
</form>
Then I have some JS:
jQuery(document).ready(
function()
{
console.log("page loaded");
jQuery(".submitClass").on("click", function() {
var id = jQuery(this).siblings("input[name='id']").val();
var name = jQuery(this).siblings("input[name='name']").val();
console.log(id);
console.log(name);
return false;
});
}
);
JSFIDDLE: http://jsfiddle.net/sEXg3/
When the submit button is clicked, I want to stop the form from being submitted and get the values of the two inputs I have next to the submit button.
I tried doing this with the .siblings() function, but it doesn't work since the inputs are in different DIVs/SPANs (if I put them all right next to each other, it does work).
How can I accomplish this?

The elements you are looking for are not the sibling of the submit button.
In your case I would suggest to find the form element (you can find the form element in which the clicked button is present using .closest()) and them find the desired inputs fields inside it using .find()
jQuery(function ($) {
console.log("page loaded");
$(".submitClass").on("click", function () {
var $this = $(this),
$form = $this.closest('form');
var id = $form.find("input[name='id']").val();
var name = $form.find("input[name='name']").val();
console.log(id);
console.log(name);
return false;
});
});
Demo: Fiddle

Since your .submitClass is placed in div and in span it's not a sibling of the other inputs... you can try something like this: (Working jsFiddle)
var id = jQuery(this).closest('form').find("input[name='id']").val();
var name = jQuery(this).closest('form').find("input[name='name']").val();
You first look for the parent form, then inside it look for the input fields.. an even more efficient version will be:
var $form = jQuery(this).closest('form');
var id = $form.find("input[name='id']").val();
var name = $form.find("input[name='name']").val();