Solved

Dynamic Creating of a button

Posted on 2002-03-12
15
699 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
ID: 6856228
<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
ID: 6856268
sub functionname()
   msgbox("check")
end sub


with

oField.onclick=functionname

CJ
0
 
LVL 19

Expert Comment

by:webwoman
ID: 6856625
Where does the script run, client or server?
0
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 
LVL 23

Expert Comment

by:b1xml2
ID: 6856717
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
ID: 6856728
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
ID: 6856818
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
ID: 6856914
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
 
LVL 23

Expert Comment

by:b1xml2
ID: 6857137
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
ID: 6857140
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
ID: 6857160
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
ID: 6857164
Note, you can't send in parameters in the procname...
0
 

Author Comment

by:JEGB
ID: 6857206
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
ID: 6857265
<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
ID: 6857302
Cheers b1xml2, works a treat, your a star :)
0
 
LVL 23

Expert Comment

by:b1xml2
ID: 6857358
welcome =)
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Bootstrap on PLNKR 3 28
How can I increase the size of this logo 5 34
How to count in a table in php 22 33
Which non-HTML GUI front end to use with Java? 3 21
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
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…

786 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