How to assign name, id attribute to dynamically added text box in PHP

Question

0.00/5 (No votes)

See more:

function createNewElement()
{
// First create a DIV element.
var txtNewInputBox = document.createElement('div');

var cur=$("input:text").length+1;
//alert(cur);

// Then add the content (a new input box) of the element.
//txtNewInputBox.innerHTML = "";
//txtNewInputBox.innerHTML ="";
txtNewInputBox.innerHTML ="";

// Finally put it where it is supposed to appear.
document.getElementById("newElementId").appendChild(txtNewInputBox);
}

What I have tried:

txtNewInputBox.innerHTML ="<input type='text' name='sw' 
                                 id='sw"+cur+"' class='form-control' 
                                  placeholder='Strength / Weakness' >";

Posted 3-Mar-21 1:00am

Member 15086478

Updated 4-Mar-21 9:53am

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Answer 1 · 2021-03-03T02:55:00

Solution 1

Have I missed something? All you should need to use is:

HTML

document.getElementById("....").setAttribute();

There's a set of such Attribute manipulation functions.

Use them while you still have the object used/returned when create the new element.

In which case, for object 'newObj', you'd use something like:

newObj.setAttribute('id', 'newId_1');

Posted 3-Mar-21 2:55am

W∴ Balboos, GHB

Updated 3-Mar-21 2:58am

v3

Comments

shanda watkins 4-Mar-21 15:54pm

They can't use getElementByID because they haven't created the element yet.

W∴ Balboos, GHB 5-Mar-21 7:26am

In which case I gave the second version using "myObj" where it doesn't need the ID.

shanda watkins 5-Mar-21 9:33am

But that's when you have a variable pointing to an existing object. Look at the section "What I have tried" and you'll see they are building up a dynamic string to create the control.

W∴ Balboos, GHB 5-Mar-21 9:53am

Look at his code:
"var txtNewInputBox = document.createElement('div');"
and then
"// Finally put it where it is supposed to appear.
document.getElementById("newElementId").appendChild(txtNewInputBox);"

and finally you look at what he has tried - well look where the target for the string is being mapped:
"txtNewInputBox.innerHTML = "

Do you see it? NOT an element per se, but an object gotten from creation of the new node (element). For all practical purposes it can be anywhere. It doesn't need an ID or NAME attribute. The reference to the node was already created. His point is to give a NAME and ID to the element he just added to the DOM.

shanda watkins 5-Mar-21 15:27pm

1. Click Reply so that I am notified.
2. Not quite. The code they are trying to use is id='sw"+cur+"'. That is in the dynamic code, not one they just added to the dom, one they are trying to now add to the DOM with an id.

shanda watkins · Answer 2 · 2021-03-04T09:53:00

Solution 2

Your code is close.

Start with a variable.

JavaScript

var newTextBox = "";

Then set it however you want:

JavaScript

newTextBox = "<input type='text' id='someID" + cur + "' class='form_control'</input>"

And then add it to the div like you are.

Posted 4-Mar-21 9:53am

shanda watkins

Comments

W∴ Balboos, GHB 5-Mar-21 7:30am

Your solution ignores his methodology - which is to create and add child-elements. Why do you think I didn't do the obvious and simplistic method you chose? Your route isn't very useful unless the original exists and has an ID of its own for the innerHTML method. Right answer to the wrong question.

shanda watkins 5-Mar-21 9:31am

Can you explain? The user is using dynamic html as shown in the OP and wanting to add it to the page. The OP's code is close, just off. My answer is precisely correct.