Solved

Insert a textbox into a span

Posted on 2006-11-29
7
488 Views
Last Modified: 2010-05-18
I have a textbox object that I create like this:

        var _textbox = document.createElement ("input");
        _textbox.setAttribute ('type', 'text');
        _textbox.setAttribute ('id', name);
        _textbox.value = value;
        _textbox.name  = name;

Assuming I have a <span> on the page and have already assigned that to an object, what I want to do is insert that textbox into the span, something like this:

        _span.innerHTML = _textbox;

Doing the above causes this to display on the page (not a textbox):

[object]

I'm aware that use the innerHTML property and "spell out" the HTML (i.e. <input name="somename" ... /> but I imagine that there must be some way to insert the object, and have it render the HTML for me, that's what I'm looking for.

Any help would be appreciated.
0
Comment
Question by:toddhd
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
7 Comments
 
LVL 6

Expert Comment

by:DonKyles
ID: 18042079
why don't you hidding the textbox in that field frist when the user do somthing then you visible that textbox

<span><input type="text" name="txtTestSpan" value="Test Span" style="visibility:hidden;"></span>

on the javascript when the user click or do something

function visibleTextBox()
{
      document.poppedLayer = eval('document.all[\'txtTestSpan\']');
      document.poppedLayer.style.visibility = "visible";
}
0
 
LVL 8

Author Comment

by:toddhd
ID: 18042174
Thanks for the suggestion, but that's not what I'm looking for. The javascript needs to be portable, and I need to be able to pass any given span object at it, and then insert a textbox in there. I can't assume there will be a texbox in the span tag to begin with, I need to insert it. I will later want to change its properties and respond to events, which is easier to do with it being an object.
0
 
LVL 6

Expert Comment

by:DonKyles
ID: 18042274
How about this way

_span.innerHTML = '<input type="text" id="' + name + '" value="' + value + '">';
0
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 
LVL 8

Author Comment

by:toddhd
ID: 18042322
Thanks Don - again, if you re-read the original question, I noted that I already know I can "spell out" the <input> as HTML. The question is, can I create a textbox object, and then insert that object into a given <span>?
0
 
LVL 17

Expert Comment

by:NicksonKoh
ID: 18042417
Hi toddhd,

_textbox is an object and hence u get the display as u have seen.

You can simply add it as follows

var text = "button";
var name = "button1";
var value = "somevalue";
_span.innerHTML = "<input type='"+text+"' id='"+name+"' value='"+value+"' name='"+name+"'>";


Cheers
Nickson
0
 
LVL 6

Accepted Solution

by:
DonKyles earned 500 total points
ID: 18042447
Ok my final answer for this answer

_span.appendChild(_textbox);
0
 
LVL 17

Expert Comment

by:gops1
ID: 18042456
Use appendChild. Like this:

<html>
      <head>
            <head>
                  <title>Script Demo Gops</title>
                  <script language="javascript">
                        function createText(){
                              var _textbox = document.createElement ("input");
                              _textbox.setAttribute ('type', 'text');
                              _textbox.setAttribute ('id', 'name');
                              _textbox.value = 'value';
                              _textbox.name  = 'name';
                              document.getElementById('txtCont').appendChild(_textbox);
                        }
                  </script>
            </head>
<body>
      <span id="txtCont"></span>
      <br><input type="button" value="Create" onClick="createText()">
</body>
</html>
0

Featured Post

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

729 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question