Solved

Dynamic Creating of a button

Posted on 2002-03-12
15
677 Views
Last Modified: 2010-08-05
I am trying to create a button dynamically using vbscript on an HTML page. However I cannot seem to capture the onclick event. The button is displayed correctly, but clicking it has no effect.

The code I am using to create the button is as follows:

Set oField = document.createElement("INPUT")
oField.Type = "BUTTON"
oField.Name = "cmd1"
oField.Value = "Remove"
oField.onclick="msgbox(1)"
oDoc.insertAdjacentElement "afterBegin", oField

I have also tried using oField.onclick=GetRef ("msgbox(1)"), but it makes no difference

I am using IE 5.5 BTW

Thanks in advance.
0
Comment
Question by:JEGB
15 Comments
 
LVL 14

Expert Comment

by:avner
Comment Utility
<script>
function createButton()
     {
     var oField = document.createElement("INPUT")
     oField.type = "BUTTON"
     oField.name = "cmd1"
     oField.value = "Remove"
     oField.onclick="msgbox(1)"
     oField.text="b";
     document.getElementById("addB").appendChild(oField);
     }


</script>
<button onclick="createButton()">Create Button </Button>
<DIV id="addB"> </DIV>
0
 
LVL 22

Expert Comment

by:CJ_S
Comment Utility
sub functionname()
   msgbox("check")
end sub


with

oField.onclick=functionname

CJ
0
 
LVL 19

Expert Comment

by:webwoman
Comment Utility
Where does the script run, client or server?
0
 
LVL 23

Expert Comment

by:b1xml2
Comment Utility
Set oField = document.createElement("INPUT")
oField.Type = "BUTTON"
oField.Name = "cmd1"
oField.Value = "Remove"
'you need to use the SET keyword here
Set oField.onclick="msgbox(1)"
oDoc.insertAdjacentElement "afterBegin", oField
0
 
LVL 23

Expert Comment

by:b1xml2
Comment Utility
amendment
=========
Set oField = document.createElement("INPUT")
oField.Type = "BUTTON"
oField.Name = "cmd1"
oField.Value = "Remove"
'you need to use the SET keyword here
Set oField.onclick= GetRef("myClick")
oDoc.insertAdjacentElement "afterBegin", oField

Function myClick()
 Set el = document.all[event.srcElement.sourceIndex]
 'blah blah

End Function
0
 
LVL 23

Expert Comment

by:b1xml2
Comment Utility
you might want to set the onclick event AFTER inserting it into the document e.g. I have noticed that VBScript can be a bit buggy when dealing with the DOM.

'you need to use the SET keyword here
oDoc.insertAdjacentElement "afterBegin", oField
Set oField.onclick= GetRef("myClick")

0
 

Author Comment

by:JEGB
Comment Utility
It is a client side script.

The SET keyword does not work as oField.onclick is not an object, but an event of an object. I have tried putting the code for the onclick event after creating the element, but this makes no difference.
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 23

Expert Comment

by:b1xml2
Comment Utility
You can assign the onclick event to the function you want via the GetRef() method

e.g.
Set Window.OnLoad = GetRef("init")

Function init()


End Function

here the onload is an event
0
 
LVL 23

Expert Comment

by:b1xml2
Comment Utility
that is why you have to use the SET keyword,

from SDK
==========
In other scripting and programming languages, the functionality provided by GetRef is referred to as a function pointer, that is, it points to the address of a procedure to be executed when the specified event occurs.

The following example illustrates the use of the GetRef function.

<SCRIPT LANGUAGE="VBScript">

Function GetRefTest()
   Dim Splash
   Splash = "GetRefTest Version 1.0"   & vbCrLf
   Splash = Splash & Chr(169) & " YourCompany 1999 "
   MsgBox Splash
End Function

Set Window.Onload = GetRef("GetRefTest")
</SCRIPT>
0
 
LVL 23

Expert Comment

by:b1xml2
Comment Utility
The following script shows how you can assign functions to events
==================================
<html>
<head>
<title>VBScript</title>
<script language="vbscript">
Set window.onload = GetRef("init")

Function init()
Dim oData, oField
Set oData = document.all.data
Set oField = document.createElement("INPUT")
oField.Type = "BUTTON"
oField.Name = "cmd1"
oField.Value = "Remove"
oData.insertAdjacentElement "afterBegin", oField
Set oField.onclick = GetRef("showme")
End Function

Function showme()
msgbox "You Clicked On Me"

End Function

</script>
</head>
<body>
<div id="data"></div>
</body>
</html>
0
 
LVL 23

Expert Comment

by:b1xml2
Comment Utility
Note, you can't send in parameters in the procname...
0
 

Author Comment

by:JEGB
Comment Utility
Thanks a lot b1xml2 for your help, your suggestion works, unfortunately, I do need to send in parameters, so I'm still stuck.  Do you know if this is possible, if not I'll simply accept your answer as it does solve the problem i orginally asked.
0
 
LVL 23

Accepted Solution

by:
b1xml2 earned 200 total points
Comment Utility
<html>
<head>
<title>VBScript</title>
<script language="vbscript">
Set window.onload = GetRef("init")

Function init()
Dim oData, oField
Set oData = document.all.data
Set oField = document.createElement("INPUT")
oField.Type = "BUTTON"
oField.Name = "cmd1"
oField.Value = "Remove"
oField.setAttribute "Tag", 1
oData.insertAdjacentElement "afterBegin", oField
Set oField.onclick = GetRef("showme")
End Function

Function showme()
msgbox "The Param Is " & window.event.srcElement.getAttribute("Tag")
End Function

</script>
</head>
<body>
<div id="data"></div>
</body>
</html>

what you could do is use the DOM, populate your OWN attribute with a value, and call that up inside the function
0
 

Author Comment

by:JEGB
Comment Utility
Cheers b1xml2, works a treat, your a star :)
0
 
LVL 23

Expert Comment

by:b1xml2
Comment Utility
welcome =)
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now