[SOLVED] dynamically attach function to a submit button?

[sayedsohail]

Hi everyone,

 

I wish to attach a function to a submit button when users click New button.  I can assign it directly, but my requirement is to attach on the fly.

 

Here is my form

 

<form id='test'>
<input type='name' value=''>
<input type='email' value=''>
<input type='button' value='New' onclick='assigned function to submit button'>. 
<input type='submit' value='Update'>
</form>

// here is the simple function written in javascript which needs to be attached to the submit button,

<script>

function insertdata()

{.....}

</script>

 

Can someone suggest how to attach function to your submit button when users clicks the new button.  (Offcourse i can assign the function to the submit button directly, but my requirement is attached on the fly).

 

Thanks

Sohail

[Dragen]

could you have the submit button as

<input type='submit' value='Update' onclick="insertdata('new')" />

 

Then on the 'New' button have something like:

<input type='button' name="new" value='New' id="new" onclick='set_value('new')'>.

 

The set_value command could change the value of the 'new' button, by getting the layer from the id specified.

Then the submit button collects the value of the new button to insert it.

 

I'm aware that this is a poor example, but I'm only just starting with javascript and it's just an idea to start with.

Hope it helps

[sayedsohail]

well million thanks, this is so far i tried still no SUCCESS:

 

<form id='test'>
<input type='name' value=''>
<input type='email' value=''>
<input type='button' value='New' onclick='addfunction();'>. 
<input type='submit' value='Update'>
</form>

 

// here is the simple function written in javascript which LINKS the function insertnotes() to the submit button,

<script>
function addfunction()
{

if (window.attachEvent) {
document.getElementById("submit").attachEvent("onclick",insertnotes);
}
else if (window.addEventListener) {
document.getElementById("submit").addEventListener("onclick",insertnotes,true);
}
}

/// This function needs to be linked to the submit button.
function insertnotes()
{
....
}
</script>

[Dragen]

I'm quite sure that if you're getting an element by id, it needs to have an id

<input type='submit' value='Update' id="submit" />

try that and see what happens.

[sayedsohail]

tried that to, work IN IE not in FF.

[sayedsohail]

i just change button id='task' and addEventListener with click instead of onclick, it works fine.

 

document.getElementById("task").addEventListener("click",updatenotes,false);

 

Unfortunately, if i try to add additional addEventListener to the smae button, results multiple functions attached to the same button.

 

How could i attached only the recent addeventlistener to the button.

[Dragen]

not sure. You could try removeEventListener

to remove the previous ones and then add the new one

[sayedsohail]

I got multiple functions with different name i.e., addnotes, editnotes - not sure how to check existence of this and than remove.

 

Thanks anyway.

[Dragen]

okay. I'm not sure about quite how to use it, but I think the idea is something like this:

function remove_function(id, fun){
if (window.detachEvent) {
	document.getElementById(id).detachEvent('onclick', fun);
}else if(window.removeEventListener){
	document.getElementById(id).removeEventListener('click',fun,false);
}
}

 

just call it before adding a function:

javascript:

<script>
function addfunction(id, fun)
{
remove_function(id, fun);

if (window.attachEvent) {
document.getElementById(id).attachEvent("onclick",insertnotes);
}
else if (window.addEventListener) {
document.getElementById(id).addEventListener("onclick",insertnotes,true);
}
}

/// This function needs to be linked to the submit button.
function insertnotes()
{
....
}


function remove_function(id, fun){
if (window.detachEvent) {
	document.getElementById(id).detachEvent('onclick', fun);
}else if(window.removeEventListener){
	document.getElementById(id).removeEventListener('click',fun,false);
}
}
</script>

 

html:

<form id='test'>
<input type='name' value=''>
<input type='email' value=''>
<input type='button' value='New' onclick='addfunction('task', 'addnotes');'>. 
<input type='submit' value='Update'>
</form>

obviously in the onclick change 'task' to the button id (I'm presuming task), and 'addnotes' to the function name you want to remove.

 

I hope that both helps and works!

[sayedsohail]

thank you.