CODEWITHSUNDEEP
javascripthtmliframe
user2970179
user2970179

Reputation:

Add Textbox by a click of a button using javascript

Is it possible to add text boxes into an iframe of the same domain. So i have created a button for the user to click.

<button id="text" onclick="addTextBox()">Text</button>

As the user clicks on the button, I need a text box added within the iframe.

<iframe id="iframeDiv" class="section"></iframe>

I have tried this

JS:

function addTextBox() {

    var text = '<div><textarea name="textbox" id="textbox" cols="10" rows="1"></textarea></div>';

    var iframe = document.getElementById('iframeDiv'),
        iframe.innerHTML += parent.text;

    $('div').draggable({
        cancel: "textbox",
        start: function () {
            $('#textbox').focus();
        },
        stop: function () {
            $('#textbox').focus();
        }
    });

}

window.onload = function () {
    addTextBox();

    return;
}

I have done a fiddle too: JSFiddle

I also want to understand how the text tag can be appended to the DOM structure

Upvotes: 0

Views: 4995

Answers (2)

Vinoth
Vinoth

Reputation: 647

You can use document.createElement for creating element or use jQuery to create element in a easier way. And use iframe.contentWindow.document.body.appendChild to have multiple elements

     function addTextBox() {    
        var text = document.createElement('textarea'),
        iframe = document.getElementById('iframeDiv');
        text.setAttribute('id', 'textbox');

        iframe.contentWindow.document.body.appendChild(text);    
     }

Or you can also do this:

    function addTextBox() {    
        var text = '<div><textarea name="textbox" id="textbox" cols="10" rows="1"> </textarea></div>',
        iframe = document.getElementById('iframeDiv');
        iframe.contentWindow.document.body.innerHTML = text;    
    }

Upvotes: 1

Satish Sharma
Satish Sharma

Reputation: 9635

try this

 var text = '<div><textarea name="textbox" id="textbox" cols="10" rows="1"></textarea></div>';
    var iframe = document.getElementById('iframeDiv');
iframe .src = "data:text/html;charset=utf-8," + escape(text);

see Fiddle

Upvotes: 0

Related Questions