Tay
Tay

Reputation: 300

Dynamically add textbox and assign it's value from a function

I want to create n number of textboxes dynamically based upon the user input. Each textbox must populate with a serial number.Here, what I have tried so far.

function generateSerial(sender,eventArgs){
        debugger;
        //var rw_Serail = stockin.rw_Serail;
        if(eventArgs.get_newValue()!="0"){
            if(eventArgs.get_newValue()!=eventArgs.get_oldValue()){
                create(eventArgs.get_newValue());
                //OpenWindow(null,null,"rw_Serial");
            }
        }
    }

Create will call a function and it's job is to create textboxes and assign a value.

function create(param) {
        debugger;
        var s= "";
        for(var i = 0; i < param; i++) {
            s+= `<input type="text" style="width:72%" name="txtSerial" value=${generateLicense()}>`
                   `<button type="button" style="margin-left: 5px;height: 24px;">Change</button>`; //Create one textbox as HTML
        }
        document.getElementById("dvserialNo").innerHTML=s;
    }

as name suggests generateLicense() will return a serial number..

function generateLicense() {
   return "abcd1234Etc..";
}

Now while running this code, I am getting this error..

In chrome

Uncaught TypeError: generateLicense(...) is not a function

In firefox

TypeError: (("<input type=\"text\" style=\"width:72%\" name=\"txtSerial\" value=" + (intermediate value)) + ">") is not a function

Note: I want to create and assign it's value at the same time. enter image description here

Upvotes: 0

Views: 49

Answers (1)

zer0
zer0

Reputation: 5017

Concatenate the two elements in s+. And, of course, as one of the answers suggested include quotes for value="${generateLicense()}"

s+= `<input type="text" style="width:72%" name="txtSerial" value="${generateLicense()}">`
 + `<button type="button" style="margin-left: 5px;height: 24px;">Change</button>`; //Create one textbox as HTML

Upvotes: 2

Related Questions