如何在radio oncheck中获取特定div的源代码？

Question

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 ?

Answer 1

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> 

Answer 2

Create div element with:

1. Template inside
2. 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/