1

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.

Improve this question
1
  • 1
    Where does innerHTML comes from? Commented Sep 13, 2012 at 13:04

2 Answers 2

Reset to default
3

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I haven't declared innerHTML anywhere. I tried with the single quotes but the button still doesn't work
But where do you want to insert the HTML? Get the parent element via document.getElementById() or for example with this.parentNode.innerHTML (that's the parent node of the triggering element - here the input field).
Can i use the buttons id and its html to be something like this <input type="submit" name="Add_fields" value="+" onclick="generateRow()" id="add"> and then the js document.getElementByID('add').innerHTML += 'html string';
@w4kv I have added an example, using a div element to wrap the dynamic form.
It still doesn't do anything I updated my post with more from the part i want to inser if there is the problem
|
1

User jnerator.

  1. Create jtag:

    var jtag = $j.tagArray([
    $j.inputText({ name: 'dneven', width: 30 }),
    'дневен',
    $j.select([
        $j.option({ selected: 'selected', value: '3', child: '------' }),
        $j.option({ value: '1', child: 'платен' }),
        $j.option({ value: '2', child: 'неплатен' })
    ]),
    'отпуск от ',
    $j.select({
        name: 'god',
        child: [
            $j.option({ selected: 'selected', value: '11', child: '------' }),
            $j.option({ value: '1', child: '2011' }),
            $j.option({ value: '2', child: '2012' })
        ]
    })
]);

  2. Get html code

    var htmlCode = jtag.html();
// jtag.html() returns:
// <input name="dneven" width="30" type="text" ></input>дневен<select><option selected="selected" value="3" >------</option><option value="1" >платен</option><option value="2" >неплатен</option></select>отпуск от <select name="god" ><option selected="selected" value="11" >------</option><option value="1" >2011</option><option value="2" >2012</option></select>

  3. Insert HTML Code into existing tag 

    document.getElementById('dynamicForm').innerHTML += htmlCode;
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.