Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 492
  • Last Modified:

Insert a textbox into a span

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
toddhd
Asked:
toddhd
1 Solution
 
DonKylesCommented:
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
 
toddhdAuthor Commented:
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
 
DonKylesCommented:
How about this way

_span.innerHTML = '<input type="text" id="' + name + '" value="' + value + '">';
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
toddhdAuthor Commented:
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
 
NicksonKohCommented:
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
 
DonKylesCommented:
Ok my final answer for this answer

_span.appendChild(_textbox);
0
 
gops1Commented:
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now