|
|
|
#1
07-17-2013, 06:59 AM
|
|||
|
|||
Building Custom Forms with Javascript
Hi everyone,
I'm trying to build custom forms using the Internet Explorer object, but I'd like to be able to use JavaScript in the form. I'm trying to use the buttonhandler example from section 6.3 of the VanDyke Scripting guide as a basis. I've tried a couple of different methods and so far, nothing works. Using the objIE.document.body.innerHTML doesn't allow for the addition of <script> tags in the head to include the needed JavaScript libraries, so I've tried both of the following alternatives: Building the webpage form using objIE.document.write (and including everything from the <head> and <body>) causes any <script> tags to be ignored. Button presses are still passed back to the VBScript from which it was launched, but there's no ability to have a dynamic page as the JavaScript doesn't load. I've built the page into a index.html document that I can use with objIE.navigate "<path>/index.html", but this doesn't allow button presses from the buttonhandler to be referred back to the VBScript from which it was launched. I know the buttonhandler from the example is waiting for objIE.Document.All("ButtonHandler").Value, which in this case is irrelevant since the document object is empty. Is there something I'm missing on one of these methods, or can anyone recommend a workaround? My ultimate goal is to build a tabbed user experience, with each JavaScript tab on the page containing buttons the user can press. Any help is greatly appreciated. Thanks!! 
|
|
#3
07-17-2013, 10:02 AM
|
|||
|
|||
|
Hi re210m,
No problem about the multiple posts. The questions you are asking are specific to Internet Explorer, Dynamic HTML and JavaScript. The only idea that comes to mind would be to use a .hta file as the basis of your form so that you don't have to inject code into the document. Doing a quick internet search for ".hta form" might yield some helpful information. However, even if you find information on using .hta, we are not sure how you would tie that into a SecureCRT script. You would probably need to do a good deal of experimentation and research to get this to work. To the forum community: does anyone have information that might help re210m's question?
|
|
#4
07-17-2013, 12:20 PM
|
|||
|
|||
Not a script issue?
So, maybe it's not a script issue. I've used objIE.document.write to the write the following code, and it executes with the lightbulb image change on click successfully:
Code:
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
{
element.src="http://www.w3schools.com/js/pic_bulboff.gif";
}
else
{
element.src="http://www.w3schools.com/js/pic_bulbon.gif";
}
}
</script>
<img id="myimage" onclick="changeImage()"
src="http://www.w3schools.com/js/pic_bulboff.gif" width="100" height="180">
<p>Click the light bulb to turn on/off the light</p>
<input name=ButtonHandler value="Nothing Clicked Yet" type=hidden >
This led me to suspect the problem may be the links to the anchors and not the script. I've tried the following, very basic code which results in a blank page when the link is clicked: Code:
<a href="#hop">Visit end of the document!</a> <br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. <br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. <br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. <br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. <br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>. <a id="hop">TEST!</a> Last edited by re210m; 07-17-2013 at 12:28 PM.
|
|
#5
07-17-2013, 01:38 PM
|
|||
|
|||
|
Thanks for the update re210m.
Feel free to post the solution once you find it.
|
|
#6
07-18-2013, 06:27 AM
|
|||
|
|||
Workaround
So, I couldn't get any type of link anchors within the document to work. They all bring you to a blank page, so I tried to find a way to make dynamic content without it.So, I couldn't get any type of link anchors within the document to work. They all bring you to a blank page, so I tried to find a way to make dynamic content without it.
My solution was to create all the content in divs and put buttons at the top. Each button calls a JavaScript that sets the Style of all divs to not display and sets the style of the corresponding div to be inline. This effectively hides all other divs except for that button's div. Code:
<!DOCTYPE html>
<html>
<body>
<div> <!-- Start of Content Div -->
<img width="450px" height="108px" style="margin:0px; display:block; position:relative; top:5px;" src="http://<ABSOLUTEPATH>.com/header.png" alt="Header" />
<div style="background-color:white; width:450px; text-align:center; margin-top:0px;"> <!-- Start of Div that holds the buttons and script table. -->
<br> <h2>Select script type: </h2>
<button onClick="setSCRIPTStoTAB1()">TAB1</button>
<button onClick="setSCRIPTStoTAB2()">TAB2</button>
<button onClick="setSCRIPTStoTAB3()">TAB3</button>
<button onClick="setSCRIPTStoTAB4()">TAB4</button> <br>
<div id="TAB1TABLEDIV"> <!-- Start of the DIV that holds JUST THE TAB1 TABLE! -->
<br>
<table style="margin-left:10px; margin-right:10px">
<tr>
<td style="padding-right:10px"><button name=SCRIPT1 style="width:110px" Onclick=document.all("ButtonHandler").value="SCRIPT1";>SCRIPT1</button> </td>
<td style="font-size:12px;"><br>This tells you what the script does.<br></td>
</tr>
<tr>
<td style="padding-right:10px"><button name=SCRIPT2 style="width:110px" Onclick=document.all("ButtonHandler").value="SCRIPT2";>SCRIPT2</button> </td>
<td style="font-size:12px;"><br>This tells you what the script does.<br></td>
</tr>
<tr>
<td style="padding-right:10px"><button name=SCRIPT3 style="width:110px" Onclick=document.all("ButtonHandler").value="SCRIPT3";>SCRIPT3</button> </td>
<td style="font-size:12px;"><br>This tells you what the script does.<br></td>
</tr>
<tr>
<td style="padding-right:10px"><button name=SCRIPT4 style="width:110px" Onclick=document.all("ButtonHandler").value="SCRIPT4";>SCRIPT4</button> </td>
<td style="font-size:12px;"><br>This tells you what the script does.<br></td>
</tr>
</table> <br>
</div><!-- End of the DIV that holds JUST THE TAB1TABLE! -->
<div id="TAB2TABLEDIV"> <!-- Start of the DIV that holds JUST THE TAB2 TABLE! -->
<br>TAB2 TABLE NOT YET POPULATED<br>
</div><!-- End of the DIV that holds JUST THE TAB2 TABLE! -->
<div id="TAB3TABLEDIV"> <!-- Start of the DIV that holds JUST THE TAB3 TABLE! -->
<br>TAB3 TABLE NOT YET POPULATED<br>
</div><!-- End of the DIV that holds JUST THE TAB2 TABLE! -->
<div id="TAB4TABLEDIV"> <!-- Start of the DIV that holds JUST THE TAB4 TABLE! -->
<br>TAB4 TABLE NOT YET POPULATED<br>
</div><!-- End of the DIV that holds JUST THE TAB2 TABLE! -->
<input name=ButtonHandler value="Nothing Clicked Yet" type=hidden >
</div> <!-- End of Div that holds the buttons and script table.. -->
</div> <!-- End of Content Div -->
<script>
function setSCRIPTStoTAB1()
{
document.getElementById("TAB1TABLEDIV").style.display="inline";
document.getElementById("TAB2TABLEDIV").style.display="none";
document.getElementById("TAB3TABLEDIV").style.display="none";
document.getElementById("TAB4TABLEDIV").style.display="none";
}
function setSCRIPTStoTAB2()
{
document.getElementById("TAB1TABLEDIV").style.display="none";
document.getElementById("TAB2TABLEDIV").style.display="inline";
document.getElementById("TAB3TABLEDIV").style.display="none";
document.getElementById("TAB4TABLEDIV").style.display="none";
}
function setSCRIPTStoTAB3()
{
document.getElementById("TAB1TABLEDIV").style.display="none";
document.getElementById("TAB2TABLEDIV").style.display="none";
document.getElementById("TAB3TABLEDIV").style.display="inline";
document.getElementById("TAB4TABLEDIV").style.display="none";
}
function setSCRIPTStoTAB4()
{
document.getElementById("TAB1TABLEDIV").style.display="none";
document.getElementById("TAB2TABLEDIV").style.display="none";
document.getElementById("TAB3TABLEDIV").style.display="none";
document.getElementById("TAB4TABLEDIV").style.display="inline";
}
</script>
</body>
</html>
|
 |
| Tags |
| buttonhandler , form , javascript , objie , tabs |
| Thread Tools | |
| Display Modes | Rate This Thread |
|
|
Hybrid Mode
