jQuery change attribute in HTML stocked in a variable

Question

I would like to dynamically generate inputs, but I need to give them a different input name. First, I put the content of my html template in the variable:

var template = $("#question_template").html();

Then I add an index so I can distinguish each added block of inputs:

var question_html = "<div id='question_" + indice_question + "'>" + template + "</div>";

But now I'm trying to change the name of the inputs like this:

$(question_html).find('input').each(function(){
    $(this).attr('name','question[question'+indice_question+']'+$(this).attr('name'));
});

The problem is my question_html is not updated in the process, and when I do

console.log($(question_html).html());

The input names are the same that in my "template".

Here is the full code:

EDIT: snippet is not working but fiddle is : http://jsfiddle.net/W4Km8/7085/

indice_question = 0;

$('#add_question').on('click',function(){

    var template = $("#question_template").html();
    var question_html = "<div id='question_" + indice_question + "'>" + template + "</div>";

    $(question_html).find('input').each(function() {
        $(this).attr('name','question[question'+indice_question+']'+$(this).attr('name'));
        console.log($(this).attr('name'));
    });
	console.log($(question_html).html());

	$('#question_list').append(question_html);
	indice_question++;

});

<div id="question_list">
</div>

<button type="button" id="add_question">Add question</button>

<div id="question_template" style="display:none">
    <label for="question_content">Question content</label>
    <input type="text" name="[question_content]"/><br/>
    <input type="hidden" name="[id_question]" value=""/>
</div>

Zafar Shah Faizi · Accepted Answer · 2015-12-02 09:05:17Z

2

Every $(question_html) will be a different jQuery object.

Instead of creating the HTML String, you should create a jQuery Object to manipulate it. Because when later you were trying to access $(question_html) it was just another jQuery object and not the previous one.

var question_html= $("<div id='question_"+indice_question+"'>" + template + "</div>");

question_html.find('input').each(function(){
            $(this).attr('name', 'question[question' + indice_question +']' + $(this).attr('name'));
});

Now when you will do console log, the names will be changed

console.log(question_html.html());

edited Dec 2, 2015 at 9:05

Zafar Shah Faizi

5443 silver badges18 bronze badges

answered Dec 2, 2015 at 8:55

void

36.8k10 gold badges72 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Luigino Over a year ago

Hello @void , I followed your solution in my scenario:

var transfer_template = $('#transferTemplate').html(); $('input[type=text], select').each(function() { transfer_template.find(o => o.id === this.name).val( $( this).val() ); });

but it didn't filled the input boxes...maybe something changed with newer jquery versions today?..

Luigino Over a year ago

Solved my scenario... I used to create the template inside <script type="text/x-custom-template" id="transferTemplate"></script> and it couldn't be threatened as I wanted so I changed with <template id="transferTemplate"></template> then using DOM selectors like

var transfer_template = document.querySelector('#transferTemplate'); var clone = document.importNode(transfer_template.content, true);

I could threat the template's clone as I want! Hope it'd be useful for someone

Collectives™ on Stack Overflow

jQuery change attribute in HTML stocked in a variable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related