Question

UPDATE

I am trying to add a group which include textboxes and simple text in html using the onClick function

This is the html part of the button

    <div id="dynamicForm">
        <input type="submit" name="Add_fields" value="+" onclick="generateRow()">
    </div>

and the js

    <script>
function generateRow()
{
    document.getElementById('dynamicForm').innerHTML +='
                    <input name="dneven" type="text" width="30"/>
                        дневен
                    <select name="zapl">
                        <option selected="selected" value="3">-----</option> 
                        <option 1>платен</option>
                        <option 2>неплатен</option>
                    </select>
                        отпуск от  
                    <select name="god">
                        <option selected="selected" value="11">---</option>
    <option 1>2011</option>
    <option 2>2012</option>
                    </select>г.
                ';
}
</script>

But it doesn’t do anything. Where is my mistake and also how can I make the button to dissapear after it is pressed once? I’ll appreciate all your help thanks in advance.

Answer 1

You have a syntax error here because you your quotes.

innerHTML+="<input name="name" type="text" width="30"/> some text <input name="name" type="text" width="30"/>";

Here is a syntactically correct version. Note the string is in single quotes, which means the double quoted HTML attributes won’t accidentally terminate the string.

innerHTML+='<input name="name" type="text" width="30"/> some text <input name="name" type="text" width="30"/>';

If you are still stuck, you may need to give us a little more code – have you used innerHTML as a short-hand to the actual innerHTML of an element or is it a variable declared somewhere?

Update

I haven’t declared innerHTML anywhere

If you want to add your string of HTML to an element, you’ll need to use:

document.getElementById('myElementId').innerHTML += 'html string';

As just putting

innerHTML += 'html string';

Creates an implicit global variable (and errors because you are trying to append to something that doesn’t yet exist).

Update

I want to insert the HTML right after the button

HTML:

<div id="dynamicForm">
    <input type="submit" name="Add_fields" value="+" onclick="generateRow()">
</div>

JS:

function generateRow() {
    document.getElementById('dynamicForm').innerHTML += '<input name="name" type="text" width="30"/> some text <input name="name" type="text" width="30"/>';
}

Later on, you might want to get into creating elements and appending them to the DOM without using strings and adding the event handlers in script rather than HTML – but this should get you started.

Update

You can’t have line-breaks in your string in JavaScript, so you need either one line, or lots of appends. Working example here.