I describe my problem with following simple example.

here when i click the test button it will create a new test button inside div tag.
But after that if i clicked new generated test button document.getElementById("test" ).onclick = function() is not working.

how can i add functions to new dynamically created fields?

Can anyone help me?

<div id="a" >

</div>

<input type="button" value="Test" id="test" class="form-submit"/>


<script language="JavaScript" type="text/javascript" >

document.getElementById("test" ).onclick = function(){

document.getElementById("a").innerHTML="<input type='button' value='Test' id='test' name='test' class='form-submit' />";

alert("test is clicked");

}

</script>

you must give another name and ID to inner test button, LIKE test1, test2 etc

you must give another name and ID to inner test button, LIKE test1, test2 etc

Thanks for your reply. Even i give "test1" or different id, onclick function is not working for that id. (following fuction is not working after dynamically generate the test1 button)

document.getElementById("test1" ).onclick = function(){

alert("test");
}

if you are ok with jQuery:

$(document).ready(function() {
$('#test1').live('click',function() {
alert('test');
});
});

Write a function and call that function with 'onclick' event when the user was click the button. For example, the markup will be

<input type="button" value="Test" id="test" class="form-submit" onclick="generate_button()" />

And the function should go below

function generate_button(){
document.getElementById("a").innerHTML="<input type='button' value='Test' id='test' name='test' class='form-submit' />";
alert("test is clicked");
}