How to name a dynamically created textbox through jquery function?

Question

I want to give a name to my dynamically created textbox on a specific event. I have written the following code where the function GenerateTextBox returns the name of the textbox and the value "". The textbox is generated by but the name does not get assigned.

This is to use the name as a reference to the textbox in another php file.

Jquery code for generating textbox:

function GenerateTextbox(value,name1) { 
    return '<input name = "'+ name1 + '" type="text" value = "' + value + '" /> ';
}  

Calling the function:

$("#t11, #t12").click(function(){
    var div = $("<div />"); 
    div.html(GenerateTextbox("", c1));  
    $("#TextBoxContainer").append(div);
});

The php output file is showing the error that c1 is an undefined index...

How do I solve this problem?

Answer 1

Change c1 to "c1" . c1 refers to a variable named c1 (which you have not defined) whereas "c1" refers to a String.

div.html(GenerateTextbox("", "c1"));  

Working Code:

 function GenerateTextbox(value,name1) { return '<input name = "'+ name1 + '" type="text" value = "' + value + '" />'; } $("#t11, #t12").click(function(){ var div = $("<div>"); div.html(GenerateTextbox("", "c1")); $("#TextBoxContainer").append(div); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="t11">Create Textbox</button> <div id="TextBoxContainer"></div>