Changing a local html file using vbscript inside the html 1

dseaver · Jan 11, 2008

I am first trying to create an input form when a button is clicked inside of the HTML page, here is what I have, I can change the html inside the to add a <hr> or <h2>test</h2> but I cannot add another button

Code:

<HTML>
	<HEAD>
	
		<SCRIPT type="text/vbscript" >
		Sub NewDoc_onclick
			
			 NewDocSpan.InnerHTML = "<INPUT TYPE="BUTTON" NAME="NewDoc" VALUE="New Documentation">"
			 
		End Sub
		
		</SCRIPT>
		</HEAD>
		<BODY>
		<span id="NewDocSpan">
				<INPUT TYPE="BUTTON" NAME="NewDoc" VALUE="Add New Documentation">
				</span>
			</center>
		</BODY>
</HTML>

What I am looking to do ultimately is to use the button to open a small form that will allow the user a table with a user defined amount of rows, fixed number of columns, so it would look like this after the "Add" button is click

Code:

Title = [textbox]
foldername=[textbox]

Col1       col2       col3       col4       col5
[textbox]  [textbox]  [textbox]  [textbox]  [textbox]  [button]add another[/button] //would add another row to the table


  [button]add Table[/button] //would change the html by altering the document in the backgroun

dseaver · Jan 11, 2008

Let me know if more info is needed, slight recap since i hit submit instead of preview, i want a button that brings up the second

Code:

 entry (which didn't get the closing code tag) and then use the inputs of the generated form to update the html permantently

dseaver · Jan 15, 2008

Is it even possible or should I explore different options?

tsuji · Jan 16, 2008

[1] >Is it even possible...
Sure it is possible. The difficulty is that you have to have precise, _more than approximative_, understanding of html page elements and structure. The rest is the pure labour.

[2] This partial realization would give you practically all the elements to accomplish this kind of task. I do it in vbs (hence, ie-centric) because this is vbs forum. It can be done cross-browser with slight but material elaboration.

[2.1] The realization will show you how to set up form element nodes, text nodes, dynamically insert script handler, attach event handling to element. It is already quite long to script. With them, you practically have all the technical element to get the thing done completely.
[tt]
<HTML>
<HEAD>
<SCRIPT type="text/vbscript" >
Sub NewDoc_onclick
dim oform
dim oelem,onode,otext,s 'those are workhorse
set oform=window.event.srcElement.form
set oelem=document.createelement("div")
set otext=document.createtextnode("title = ")
oelem.appendChild otext
set onode=document.createElement("input")
with onode
.type="text"
.value="title"
.name="title"
end with
oelem.appendChild onode
set onode=document.createelement("br")
oelem.appendChild onode
set otext=document.createtextnode("foldername = ")
oelem.appendChild otext
set onode=document.createElement("input")
with onode
.type="text"
.value="foldername"
.name="foldername"
end with
oelem.appendChild onode
set onode=document.createelement("br")
oelem.appendChild onode
oform.appendChild oelem

'now establish a new event handler using insertAdjacentHTML method
s="sub somehandler" & vbcrlf & "msgbox ""I am clicked""" & vbcrlf & "end sub"
s=vbcrlf & "<span> </span><script language=""vbscript"" defer>" & vbcrlf & s & vbcrlf & "</script" & ">"
document.body.insertAdjacentHTML "beforeEnd",s

set oelem=document.createElement("div")
set onode=document.createElement("input")
with onode
.type="button"
.value="createtable"
.name="createtable"
.id="createtable"
end with
onode.attachEvent "onclick",getref("somehandler")
oelem.appendChild onode
oform.appendChild onode

'etc etc can be extremely boring and laborous...

set otext=nothing
set onode=nothing
set oelem=nothing
set oform=nothing
End Sub

</SCRIPT>
</HEAD>
<BODY>
<form id="formid">
<INPUT TYPE="BUTTON" NAME="NewDoc" VALUE="Add New Documentation" /><br />
</form>
</BODY>
</HTML>
[/tt]

dseaver · Jan 16, 2008

Tsuji, thank you, I am working tomorrow so I will experiment with the scripting you laid out then. I really appreciate the effort

tsuji · Jan 16, 2008

Amendment
There is a quite obvious typo here, though functionally equivalent.
[tt] onode.attachEvent "onclick",getref("somehandler")
oelem.appendChild onode
oform.appendChild [red]oelem[/red][/tt]

dseaver · Jan 17, 2008

I should be able to edit the html *file* using vbscript from the page this creates, correct? I haven't go to testing it yet, and will not be able to get to it for a little bit, but I did try your script and saw that it created the title and folder name textboxes just like i wanted, and I assume that you didn't create the table because I should now be able to figure it out with the scripting you gave me and it would take more of your time when you have volunteered plenty of it to show me this much already. I greatly appreciate the effort tsuji, star to you!

dseaver · Jan 25, 2008

I have updated the code as follows, but I need a way to dynamically label the rows when the add row is clicked, instead of "input0", "input1", i would like the name and ID of the input text box to be "row1input0", "row1input1". I have no Idea on how to do this. I assume I have to do this so that I can grab the info from the inputs to update the file. Here is the code i have now

Code:

<HTML>
	<HEAD>
	
		<SCRIPT type="text/vbscript" >
		Sub NewDoc_onclick
		    dim oform
		    dim oelem,onode,otext,s    				'those are workhorse
		    set oform=window.event.srcElement.form
		    set oelem=document.createelement("div")
		    set otext=document.createtextnode("title = ")
		    oelem.appendChild otext
		    set onode=document.createElement("input")
		    with onode
		        .type="text"
		        .value="title"
		        .name="title"
		    end with
		    oelem.appendChild onode
		    set onode=document.createelement("br")
		    oelem.appendChild onode
		    set otext=document.createtextnode("foldername = ")
		    oelem.appendChild otext
		    set onode=document.createElement("input")
		    with onode
		        .type="text"
		        .value="foldername"
		        .name="foldername"
		    end with
		    oelem.appendChild onode
		    set onode=document.createelement("br")
		    oelem.appendChild onode
		    oform.appendChild oelem

		    
		    
		    set oelem=document.createElement("div")
		    set onode=document.createElement("input")
		    with onode
		        .type="button"
		        .value="Add Row"
		        .name="addrow"
		        .id="addrow"
		    end with
		    onode.attachEvent "onclick",getref("AddRow")
		    oelem.appendChild onode
		    oform.appendChild oelem

		    set oelem=document.createElement("div")
		    set onode=document.createElement("input")
		    with onode
		        .type="button"
		        .value="Save And Update"
		        .name="Save"
		        .id="Save"
		    end with
		    onode.attachEvent "onclick",getref("Save")
		    oelem.appendChild onode
		    oform.appendChild oelem

		    set otext=nothing
		    set onode=nothing
		    set oelem=nothing
		    set oform=nothing
		End Sub

		Sub Save
			'Refresh  How do i get the page to refresh, after I make the changes to the HTML file, i am going to want to update it
		end Sub
		
		function AddRow 'I added this from tsuji's example
			dim oform
		    dim oelem,onode,otext,s    				'those are workhorse
		    set oform=window.event.srcElement.form
			set oelem=document.createElement("div")
			
			
			set onode=document.createElement("span")
		    with onode
		        .innertext = "Input0: "
		    end with
		    oelem.appendChild onode
			
		    set onode=document.createElement("input")
		    with onode
		        .type="text"
		        .value="createtable" & n
		        .name="Input0" 'i want this to be rowXInput0 with X corresponding to the number of the row just created
		        .id="Input0"
		    end with
		    oelem.appendChild onode
			
			set onode=document.createElement("br")
		    oelem.appendChild onode
			
			set onode=document.createElement("span")
		    with onode
		        .innertext = "Input1: "
		    end with
		    oelem.appendChild onode
			
		    set onode=document.createElement("input")
		    with onode
		        .type="text"
		        .value="createtable" & n
		        .name="Input1"
		        .id="Input1"
		    end with
		    oelem.appendChild onode
			
			set onode=document.createElement("br")
		    oelem.appendChild onode
			
			set onode=document.createElement("span")
		    with onode
		        .innertext = "Input2: "
		    end with
		    oelem.appendChild onode
			
			set onode=document.createElement("input")
		    with onode
		        .type="text"
		        .value="createtable" & n
		        .name="Input2"
		        .id="Input2"
		    end with
			oelem.appendChild onode
			
			set onode=document.createElement("br")
		    oelem.appendChild onode
			
			set onode=document.createElement("span")
		    with onode
		        .innertext = "Input3: "
		    end with
		    oelem.appendChild onode
			
			set onode=document.createElement("input")
		    with onode
		        .type="text"
		        .value="createtable" & n
		        .name="Input3"
		        .id="Input3"
		    end with
			oelem.appendChild onode
			
			set onode=document.createElement("br")
		    oelem.appendChild onode
			
			set onode=document.createElement("span")
		    with onode
		        .innertext = "Input4: "
		    end with
		    oelem.appendChild onode
			
			set onode=document.createElement("input")
		    with onode
		        .type="text"
		        .value="createtable" & n
		        .name="Input4"
		        .id="Input4"
		    end with
			oelem.appendChild onode
			
			set onode=document.createElement("br")
		    oelem.appendChild onode
			
			set onode=document.createElement("span")
		    with onode
		        .innertext = "Input5: "
		    end with
		    oelem.appendChild onode
			
			set onode=document.createElement("input")
		    with onode
		        .type="text"
		        .value="createtable" & n
		        .name="Input5"
		        .id="Input5"
		    end with
			oelem.appendChild onode
		    
			set onode=document.createElement("hr")
		    oelem.appendChild onode
			
		    oform.appendChild oelem
		end function
		
		</SCRIPT>
		</HEAD>
		<BODY>
		<form id="NewDocSpan">
				<INPUT TYPE="BUTTON" NAME="NewDoc" VALUE="Add New Documentation">
				</form>
			</center>
		</BODY>
</HTML>

tsuji · Jan 27, 2008

[3] >.name="Input0" 'i want this to be rowXInput0 with X corresponding to the number of the row just created

[3.1] First your row adding is not based on table construction. It is not per se a problem. It is a choice, that's all. I'll come back to it.
[3.2] In the function addrow, the variable n is never defined. That's why it is always empty at its place.
[3.3] The repetition of input1, input1, etc is not necessary, and at the same time, if you make good use of loop, it resolves naturally what you're asking.

[4] This is the revised addrow using properly a loop and get what you need rowXInput0 etc...
[tt]
function AddRow 'revised
dim oform
dim oelem,onode,otext,s 'those are workhorse

[blue]dim nrow, n
nrow=6[/blue]

set oform=window.event.srcElement.form
set oelem=document.createElement("div")

[blue]for n=0 to nrow-1

set onode=document.createElement("span")
with onode
.innertext = "row" & n & "Input0"
end with
oelem.appendChild onode

set onode=document.createElement("input")
with onode
.type="text"
.value="createtable" & n
.name="row" & n & "Input0"
.id="row" & n & "Input0"
end with
oelem.appendChild onode

if n<>nrow-1 then
set onode=document.createElement("br")
oelem.appendChild onode
end if

next[/blue]

oform.appendChild oelem
end function
[/tt]
[5] Now, you can properly construct a table. This is the addrow2 for illustrating the matrix of entries.
[tt]
function AddRow2
dim oform
dim oelem,onode,otext
dim rowsize, colsize, i, j
rowsize=2 'given
colsize=4 'given
dim otbl,otbody
set oform=window.event.srcElement.form
set otbl=document.createElement("table")
otbl.setAttribute "border","2"

set otbody=document.createElement("tbody")
for i=0 to rowsize-1
set orow=document.createElement("tr")
for j=0 to colsize-2
set ocell=document.createElement("td")
set otext=document.createtextnode("(" & i & "," & j & ") ")
ocell.appendChild otext
set oelem=document.createelement("input")
with oelem
.type="text"
.id="input_" & i & "_" & j
.name=.id
.value="input (" & i & "," & j & ") "
end with
ocell.appendChild oelem
orow.appendChild ocell
set oelem=nothing
set otext=nothing
set ocell=nothing
next
set ocell=document.createElement("td")
set oelem=document.createelement("input")
with oelem
.type="button"
.id="button_" & i
.name=.id
.value="checkdata"
.attachEvent "onclick",getref("checkdata") 'checkdata sub, see below
end with
ocell.appendChild oelem
orow.appendChild ocell
otbody.appendChild orow

set ocell=nothing
set orow=nothing
next
otbl.appendChild otbody
oform.appendChild otbl

set otbody=nothing
set otbl=nothing
set oform=nothing

end function

function checkdata
dim obj
set obj=window.event.srcElement
msgbox "srcElement's Index: (" & obj.parentNode.parentNode.rowIndex & "," & obj.parentNode.cellIndex & ")"
'as you get the index and the reference, you can thereby access all the data in the table
end function
[/tt]
[5.1] Instead of reference to addrow, reference to addrow2, and you're set to go.

dseaver · Jan 29, 2008

The problem is that it is not known how many input rows that the user will use, But i think by using addrow2 and assuming a safe overshoot, i can get by with it.

Now after getting the input, i am going to use the user input to create a list of hyperlinks that are in a table. The hyperlinks may be in any column, but the rows will be filled in order.

I figure that I am going to copy the source html file ( the one tsuji has been helping me build) up to a point, where I will inject the new info, then finish copying the rest of the file, then rename the new file to the original. I have the table reconstructed like I want.

How do you get the html page to reload itself?
How do I grab each input elements value by the name of the element?
These can both be added to the subroutine Save

dseaver · Jan 29, 2008

i found how to reload the page, by setting location.href = location.href

dseaver · Jan 29, 2008

i also found how to get the data from the input, so for now I am all set, ill be back soon though

dseaver · Jan 29, 2008

I am having a problem opening the files right now, I am getting an "Invalid call or argument" Error. here is what I have

Code:

<HTML>
	<HEAD>
	
		<SCRIPT type="text/vbscript" >
		Sub NewDoc_onclick
		    dim oform
		    dim oelem,onode,otext,s    				'those are workhorse
		    set oform=window.event.srcElement.form
		    set oelem=document.createelement("div")
		    set otext=document.createtextnode("title = ")
		    oelem.appendChild otext
		    set onode=document.createElement("input")
		    with onode
		        .type="text"
		        .value="title"
		        .name="title"
		    end with
		    oelem.appendChild onode
		    set onode=document.createelement("br")
		    oelem.appendChild onode
		    set otext=document.createtextnode("foldername = ")
		    oelem.appendChild otext
		    set onode=document.createElement("input")
		    with onode
		        .type="text"
		        .value="foldername"
		        .name="foldername"
		    end with
		    oelem.appendChild onode
		    set onode=document.createelement("br")
		    oelem.appendChild onode
		    oform.appendChild oelem

		    
		    
		    call Addrow2

		    set oelem=document.createElement("div")
		    set onode=document.createElement("input")
		    with onode
		        .type="button"
		        .value="Save And Update"
		        .name="Save"
		        .id="Save"
		    end with
		    onode.attachEvent "onclick",getref("Save")
		    oelem.appendChild onode
		    oform.appendChild oelem

		    set otext=nothing
		    set onode=nothing
		    set oelem=nothing
		    set oform=nothing
			
		End Sub

		Sub Save
		
			dim ColAArray(10), ColBArray(10), ColCArray(10), ColDArray(10), ColEArray(10), ColFArray(10)
			dim OriginalFile, TempFile
			OriginalFile = Replace(location.href, "%20", " ")
			OriginalFile = Replace (OriginalFile, "file:///", "")
			TempFile = Replace (OriginalFile, ".html", "2.html")
			
			for j=0 to 9
		           ColAArray(j) = document.getelementbyid("input_" & j & "_0").value
				   
				   ColBArray(j) = document.getelementbyid("input_" & j & "_1").value
				   
				   ColCArray(j) = document.getelementbyid("input_" & j & "_2").value
				   
				   ColDArray(j) = document.getelementbyid("input_" & j & "_3").value
				   
				   ColEArray(j) = document.getelementbyid("input_" & j & "_4").value
				   
				   ColFArray(j) = document.getelementbyid("input_" & j & "_5").value 
		    next
			
			Set objFSO = CreateObject("Scripting.FileSystemObject")
			dim strCurrentLine
			
			objFSO.CopyFile OriginalFile, TempFile
			
			set objDocBackup     = objFSO.OpenTextFile(TempFile, ForReading) 'Problem on this line
			
			set objDocFile    = objFSO.OpenTextFile(OriginalFile, ForWriting) "same problem would be on this line
			

			  Do Until objDocBackup.AtEndOfStream
			     strCurrentLine = objDocBackup.ReadLine
			     if InStr(strCurrentLine, "NewDocSpan") <> 0 then
			        
					'Will Add my new entries in here, havent gotten to this part yet
			     else
					
					objDocFile.WriteLine strCurrentLine
			     end if
			  Loop
	 
			  objDocFile.close
			  objDocBackup.close
			
			  objFSO.DeleteFile(strBootBackup)
			
			'MsgBox TempFile
			'location.href = location.href
		end Sub
		
		function AddRow2
		    dim oform
		    dim oelem,onode,otext,obold,ocenter
		    dim rowsize, colsize, i, j
		    
			rowsize=10    
		    colsize=6    
		    
			dim otbl,otbody
		    
			set oform=window.event.srcElement.form
		    
			set otbl=document.createElement("table")
		    
			otbl.setAttribute "border","2"
		        
		    set otbody=document.createElement("tbody")
			
				set orow=document.createElement("tr")
				
					set ocell=document.createElement("td")
					set obold=document.createElement("b")
					set ocenter=document.createElement("center")
					set otext=document.createtextnode("ColA")
					
					ocenter.appendChild otext
					obold.appendChild ocenter
					ocell.appendChild obold
				
					orow.appendChild ocell
				
					set ocell=document.createElement("td")
					set obold=document.createElement("b")
					set ocenter=document.createElement("center")
					set otext=document.createtextnode("ColB")
					
					ocenter.appendChild otext
					obold.appendChild ocenter
					ocell.appendChild obold
				
					orow.appendChild ocell
				
					set ocell=document.createElement("td")
					set obold=document.createElement("b")
					set ocenter=document.createElement("center")
					set otext=document.createtextnode("ColC")
					
					ocenter.appendChild otext
					obold.appendChild ocenter
					ocell.appendChild obold
				
					orow.appendChild ocell
				
					set ocell=document.createElement("td")
					set obold=document.createElement("b")
					set ocenter=document.createElement("center")
					set otext=document.createtextnode("ColD")
					
					ocenter.appendChild otext
					obold.appendChild ocenter
					ocell.appendChild obold
				
					orow.appendChild ocell
								
					set ocell=document.createElement("td")
					set obold=document.createElement("b")
					set ocenter=document.createElement("center")
					set otext=document.createtextnode("ColE")
					
					ocenter.appendChild otext
					obold.appendChild ocenter
					ocell.appendChild obold
				
					orow.appendChild ocell
				
					set ocell=document.createElement("td")
					set obold=document.createElement("b")
					set ocenter=document.createElement("center")
					set otext=document.createtextnode("ColF")
					
					ocenter.appendChild otext
					obold.appendChild ocenter
					ocell.appendChild obold
				
				orow.appendChild ocell
			
			otbody.appendChild orow
			
		    for i=0 to rowsize-1
		        set orow=document.createElement("tr")
		        for j=0 to colsize-1
		            set ocell=document.createElement("td")
		            
		            set oelem=document.createelement("input")
		            with oelem
		                .type="text"
		                .id="input_" & i & "_" & j
		                .name=.id
		                .value=""
		            end with
		            ocell.appendChild oelem
		            orow.appendChild ocell
		            set oelem=nothing
		            set otext=nothing
		            set ocell=nothing
		        next
		       

		        otbody.appendChild orow
				set ocell=nothing
				set orow=nothing
		    next
			
		    otbl.appendChild otbody
		    oform.appendChild otbl
		    
		    set otbody=nothing
		    set otbl=nothing
		    set oform=nothing
	                    
		end function
        
		
		</SCRIPT>
		</HEAD>
		<BODY>
		<form id="NewDocSpan">
				<INPUT TYPE="BUTTON" NAME="NewDoc" VALUE="Add New Documentation">
				</form>
			</center>
		</BODY>
</HTML>

PHV · Jan 29, 2008

I am getting an "Invalid call or argument" Error
On which line of code ?

Hope This Helps, PH.
FAQ219-2884
FAQ181-2886

dseaver · Jan 29, 2008

i commented it set

objDocBackup = objFSO.OpenTextFile(TempFile, ForReading) 'Problem on this line

PHV · Jan 29, 2008

What is the the value of TempFile at the time the error raises ?
BTW, is ForReading initialised with the right value (1) ?

Hope This Helps, PH.
FAQ219-2884
FAQ181-2886

dseaver · Jan 29, 2008

Doh, I freaking copied and pasted the copy section from another file without setting ForReading!! Thanks for pointing out that simple error! Ive got the page done

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Changing a local html file using vbscript inside the html 1

dseaver

IS-IT--Management

dseaver

IS-IT--Management

dseaver

IS-IT--Management

tsuji

Technical User

dseaver

IS-IT--Management

tsuji

Technical User

dseaver

IS-IT--Management

dseaver

IS-IT--Management

tsuji

Technical User

dseaver

IS-IT--Management

dseaver

IS-IT--Management

dseaver

IS-IT--Management

dseaver

IS-IT--Management

PHV

MIS

dseaver

IS-IT--Management

PHV

MIS

dseaver

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor