I have an HTA file and I would like to make a function that saves a file. Is there any way in HTML, JavaScript or VBScript to open a Save As... dialog box so that the user can choose where and under what name they want to save the file?
You can use GetSaveAsFileName method of Microsoft Excel Application object to open a Save As... dialog box.
The example below shows how to do this:
<html>
<head>
<title>Create text file</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="author" content="Javad">
<script language="javascript">
var excel = new ActiveXObject("Excel.Application");
var fso = new ActiveXObject("Scripting.FileSystemObject");
var shell = new ActiveXObject("Shell.Application");
function createTextFile(content)
{
event.returnValue = false;
shell.MinimizeAll();
var path = excel.GetSaveAsFileName(fso.GetAbsolutePathName("My text file"), "Text files (*.txt;*.log),*.txt;*.log,All files (*.*),*.*", 1, "Save As...");
window.focus();
if (!path) return;
var ts = fso.OpenTextFile(path,2,true);
ts.WriteLine(content);
ts.Close();
}
</script>
<HTA:Application windowstate="maximize">
</head>
<body>
<form onsubmit="createTextFile(this.cnt.value)">
Content of the text file: <input type="text" name="cnt" value="Hello."><br>
<button type="submit">Create text file</button>
</form>
</body>
</html>
In the example above, there are a text field and a submit button in a form.
The user should type something in the text field and click on the button.
When the user clicks on the button, this program opens a Save As... dialog box and lets the user choose where he/she wants to save the text file.
Then this program creates a text file at the specified location, and writes the value of the field in the text file.
Note: When the Save As... dialog box is opened, it doesn't receive the focus. I don't know why. Maybe it's one of the bugs of Excel 2007. So the code shell.MinimizeAll() is written at Line 14, in order to remove the focus from all windows so the Save As... dialog box can receive the focus.
As I said, there's this problem in Excel 2007. Maybe this bug is fixed in later versions of Excel.
Below is an example of HTA file that shows how to open choose file dialog using both JS and VBS with small "sandbox":
<html>
<head>
<script language="javascript">
function OpenDialogJs() {
output.innerText = d.object.openFileDlg(i.value, null, f.value, t.value);
}
</script>
<script language="vbscript">
Sub OpenDialogVbs()
output.innerText = d.object.openFileDlg(i.value, , f.value, t.value)
End Sub
</script>
</head>
<body>
<object id="d" classid="clsid:3050f4e1-98b5-11cf-bb82-00aa00bdce0b" width=0 height=0></object>
Initial dir <input id="i" type="text" value="C:\*"></input><br>
Filter <input id="f" type="text" value="All files (*.*)|*.*|Microsoft Word (*.doc;*.docx)|*.doc;*.docx"></input><br>
Title <input id="t" type="text" value="Save As..."></input><br>
<input type="button" value="Open / js" onclick="OpenDialogJs()"></input>
<input type="button" value="Open / vbs" onclick="OpenDialogVbs()"></input>
<div id="output"></div>
</body>
</html>
Assuming you are able to do the open and copy parts, here is an (untried in quite a while I'm afraid) routine demonstrating the use of the save as common dialogue in VBScript that should work in an HTA.
Sub SaveAs
Dim oDLG
Set oDLG=CreateObject("MSComDlg.CommonDialog")
With oDLG
.DialogTitle="SaveAs"
.Filter="Scripts|*.vbs;*.hta;*.wsf;*.js|Text Files|*.txt|All files|*.*"
.MaxFileSize=255
.ShowSave
If .FileName<>"" Then
FileName=.FileName
Save
End If
End With
Set oDLG=Nothing
DisplayTitle
End Sub
Note however the comments from How can I use the common Save As dialog from VBScript? that indicate you may need to install either a license into the registry or track down and install Visual Studio or HTML Help. VS is now available in a number of free versions so this is much less of an issue that it used to be.
Here's a way to make an own Save As dialog box in hta:
var folder = new ActiveXObject("WScript.Shell").SpecialFolders("mydocuments"); //The default folder in which the file is saved, in this case My Documents
function saveAs(ext){ //ext is the file extension without a dot, for exampe: html, NOT .html
var s = window.showModalDialog("saveas.hta?" + ext, window, "dialogWidth:609px; dialogHeight:386px");
return s;
}
saveas.hta:
<html>
<head>
<title>Save as</title>
<meta http-equiv="MSThemeCompatible" content="yes" />
<style type="text/css">
body, td {
margin: 8px;
font-family: tahoma;
font-size: 10pt;
}
button.normal {
position: absolute;
left: 11px;
border: none;
padding: 2px;
background: none;
width: 100%;
font-size: 8pt;
}
button.hover {
position: absolute;
left: 11px;
width: 100%;
font-size: 8pt;
}
</style>
<script type="text/javascript">
var fso = new ActiveXObject("Scripting.FileSystemObject");
var ws = new ActiveXObject("WScript.Shell");
var span = new Array();
window.onload = function(){
document.body.getElementsByTagName("select")[0].innerHTML = "<option value='." + location.href.split("?")[1] + "' selected>" + location.href.split("?")[1] + " file (*." + location.href.split("?")[1] + ")</option>"
if(!fso.FolderExists(window.dialogArguments.folder)){window.dialogArguments.folder = window.dialogArguments.defaultFolder}
path.value = window.dialogArguments.folder;
lit_fold(path.value);
path.blur();
namn.focus();
}
function spara(){
if(!new ActiveXObject("Scripting.FileSystemObject").FileExists(((path.value == "file://") ? ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts" : path.value) + "\\" + namn.value.replace(/\"/gi,"") + ((namn.value.indexOf("\"") == -1) ? type.getElementsByTagName("option")[type.selectedIndex].value : "")) || confirmYesNo("The file " + ((path.value == "file://") ? ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts" : path.value) + "\\" + namn.value.replace(/\"/gi,"") + ((namn.value.indexOf("\"") == -1) ? type.getElementsByTagName("option")[type.selectedIndex].value : "") + " already exists.\nDo you want to replace it?")){
var retourne = new Object();
window.returnValue = ((path.value == "file://") ? ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts" : path.value) + "\\" + namn.value.replace(/\"/gi,"") + ((namn.value.indexOf("\"") == -1) ? type.getElementsByTagName("option")[type.selectedIndex].value : "");
window.close();
}
}
function kolla(){
if(new ActiveXObject("Scripting.FileSystemObject").FolderExists(path.value) || path.value == "file://"){
window.dialogArguments.folder = path.value;
lit_fold(path.value);
}
else{
alert("Could not find this folder");
path.value = window.dialogArguments.folder;
}
}
function lit_fold(chemin){
if(chemin == "file://"){
ok.disabled = !fso.FolderExists(ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts");
list.innerHTML = "";
span = new Array();
var alphabet = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
for(i = 0; i < 26; i++){
if(fso.DriveExists(alphabet[i] + ":\\")){
var l = span.length;
span[l] = document.createElement("span");
span[l].onclick = function(){
var wse = window.event.srcElement;
if(wse.tagName == "IMG"){wse = window.event.srcElement.parentElement}
for(i = 0; i < span.length; i++){
span[i].style.background = "none";
span[i].style.color = "black";
}
wse.style.background = "rgb(1,153,255)";
wse.style.color = "white";
}
span[l].ondblclick = function(){
path.value = window.event.srcElement.value;
kolla();
lit_fold(path.value);
}
span[l].style.width = "100%";
span[l].innerHTML = "<img src='drive" + (fso.GetDriveName(fso.GetSpecialFolder(0)) == alphabet[i] + ":" ? fso.GetDrive(alphabet[i] + ":").DriveType + "bis" : fso.GetDrive(alphabet[i] + ":").DriveType) + ".png' width='16' height='16' value='" + alphabet[i] + ":\\'/> " + fso.GetDrive(alphabet[i] + ":").VolumeName + " (" + alphabet[i] + ":)<br/>";
span[l].value = alphabet[i] + ":\\";
list.appendChild(span[l]);
}
}
if(fso.FolderExists(ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts")){
chemin = ws.SpecialFolders("Appdata") + "\\Microsoft\\Windows\\Network Shortcuts";
var ff = new Enumerator(fso.GetFolder(chemin).subfolders);
for(; !ff.atEnd(); ff.moveNext()){
var l = span.length;
span[l] = document.createElement("span");
span[l].onclick = function(){
var wse = window.event.srcElement;
if(wse.tagName == "IMG"){wse = window.event.srcElement.parentElement}
for(i = 0; i < span.length; i++){
span[i].style.background = "none";
span[i].style.color = "black";
}
wse.style.background = "rgb(1,153,255)";
wse.style.color = "white";
}
span[l].ondblclick = function(){
path.value = window.event.srcElement.value;
kolla();
lit_fold(path.value);
}
span[l].style.width = "100%";
span[l].innerHTML = "<img src='folder.png' width='16' height='16' value='" + ff.item() + "'/> " + fso.GetFolder(ff.item()).Name + "<br/>";
span[l].value = new String(ff.item());
list.appendChild(span[l]);
}
ff = new Enumerator(fso.GetFolder(chemin).files);
for(; !ff.atEnd(); ff.moveNext()){
if(fso.getExtensionName(ff.item()) == location.href.split("?")[1]){
var l = span.length;
span[l] = document.createElement("span");
span[l].onclick = function(){
var wse = window.event.srcElement;
if(wse.tagName == "IMG"){wse = window.event.srcElement.parentElement}
for(i = 0; i < span.length; i++){
span[i].style.background = "none";
span[i].style.color = "black";
}
wse.style.background = "rgb(1,153,255)";
wse.style.color = "white";
namn.value = wse.value.slice(0,-4);
}
span[l].ondblclick = spara;
span[l].style.width = "100%";
span[l].innerHTML = "<img src='file.png' width='16' height='16'/> " + fso.getBaseName(ff.item()) + "<br/>";
span[l].value = new String(ff.item() + " ").slice(chemin.length,-1).replace("\\","");
list.appendChild(span[l]);
}
}
}
}
else{
ok.disabled = false;
list.innerHTML = "";
span = new Array();
var ff = new Enumerator(fso.GetFolder(chemin).subfolders);
for(; !ff.atEnd(); ff.moveNext()){
var l = span.length;
span[l] = document.createElement("span");
span[l].onclick = function(){
var wse = window.event.srcElement;
if(wse.tagName == "IMG"){wse = window.event.srcElement.parentElement}
for(i = 0; i < span.length; i++){
span[i].style.background = "none";
span[i].style.color = "black";
}
wse.style.background = "rgb(1,153,255)";
wse.style.color = "white";
}
span[l].ondblclick = function(){
path.value = window.event.srcElement.value;
kolla();
lit_fold(path.value);
}
span[l].style.width = "100%";
span[l].innerHTML = "<img src='folder.png' width='16' height='16' value='" + ff.item() + "'/> " + fso.GetFolder(ff.item()).Name + "<br/>";
span[l].value = new String(ff.item());
list.appendChild(span[l]);
}
ff = new Enumerator(fso.GetFolder(chemin).files);
for(; !ff.atEnd(); ff.moveNext()){
if(fso.getExtensionName(ff.item()) == location.href.split("?")[1]){
var l = span.length;
span[l] = document.createElement("span");
span[l].onclick = function(){
var wse = window.event.srcElement;
if(wse.tagName == "IMG"){wse = window.event.srcElement.parentElement}
for(i = 0; i < span.length; i++){
span[i].style.background = "none";
span[i].style.color = "black";
}
wse.style.background = "rgb(1,153,255)";
wse.style.color = "white";
namn.value = wse.value.slice(0,-4);
}
span[l].ondblclick = spara;
span[l].style.width = "100%";
span[l].innerHTML = "<img src='file.png' width='16' height='16'/> " + fso.getBaseName(ff.item()) + "<br/>";
span[l].value = new String(ff.item() + " ").slice(chemin.length,-1).replace("\\","");
list.appendChild(span[l]);
}
}
}
}
document.onkeydown = function(){
if(window.event.keyCode == 13){
spara();
}
if(window.event.keyCode == 27){
window.close();
}
if(window.event.keyCode == 116){
lit_fold(path.value);
}
}
</script>
</head>
<body bgcolor="buttonface" ondragstart="return false">
<table width="100%">
<tr>
<td width="15%">Folder:</td>
<td width="85%"><input type="text" id="path" onchange="kolla()" style="width:100%" />
</tr>
<tr height="258px">
<td valign="top">
<button class="normal" onmouseover="window.event.srcElement.className = 'hover'" onmouseout="window.event.srcElement.className = 'normal'" onclick="path.value = ws.SpecialFolders('Desktop'); kolla()" title="Desktop" style="top:40px"><img src="desktop.png" width="32" height="32" onmouseover="document.body.getElementsByTagName('button')[0].className='hover'" onmouseout="document.body.getElementsByTagName('button')[0].className='normal'" /><br />Dektop</button><br />
<button class="normal" onmouseover="window.event.srcElement.className = 'hover'" onmouseout="window.event.srcElement.className = 'normal'" onclick="path.value = ws.SpecialFolders('MyDocuments'); kolla()" title="My documents" style="top:90px"><img src="mydocs.png" width="32" height="32" onmouseover="document.body.getElementsByTagName('button')[1].className='hover'" onmouseout="document.body.getElementsByTagName('button')[1].className='normal'" /><br />My documents</button><br />
<button class="normal" onmouseover="window.event.srcElement.className = 'hover'" onmouseout="window.event.srcElement.className = 'normal'" onclick="path.value = 'file://'; kolla()" title="Computer" style="top:140px"><img src="computer.png" width="32" height="32" onmouseover="document.body.getElementsByTagName('button')[2].className='hover'" onmouseout="document.body.getElementsByTagName('button')[2].className='normal'" /><br />Computer</button>
</td>
<td><div id="list" style="width:100%; height:100%; background:white; overflow:scroll; padding:4px"></div></td>
</tr>
<tr>
<td>File name:</td>
<td><input type="text" id="namn" style="width:100%" onfocus="for(i = 0; i < span.length; i++){span[i].style.background = 'none'; span[i].style.color = 'black'}" /></td>
</tr>
<tr>
<td>Type:</td>
<td>
<select id="type" style="width:100%"></select>
</td>
</tr>
<tr>
<td> </td>
<td style="text-align:right">
<button id="ok" onclick="spara()" style="width:94px">Save</button>
<button onclick="window.close()" style="width:86px">Cancel</button>
</td>
</tr>
</table>
</body>
</html>
You can make your own icons or download these:
computer.png:
desktop.png:
drive0.png:
drive1.png:
drive2.png:
drive2bis.png:
drive3.png:
drive4.png:
drive5.png:
file.png:
folder.png:
mydocs.png:
Related
I want to add the "unread" class to an append content with a specific data-id. The following line of code works fine in the browser console. However, when the code is run it does not add the class "unread".
var idMessage = message[message.length-1].id;
$('#visitors').find('h5[data-id=' + idMessage + ']').addClass('unread');
The goal is to add "unread" in the following line of code:
$("#visitors").append('<h5 class="' + state + '" data-id=' + visitors[i].idSession + '>' + visitors[i].visitorOnline + '</h5>');
I will provide you with a code snippet
<div id="conexion-chat">
<button id="btn-conexion-chat" onclick="initWebSocket();">Iniciar chat</button>
</div>
<div id="display-chat" style="display: none;">
<div id="visitors"></div>
<br />
<textarea id="chatRoomField" rows="10" cols="30" readonly></textarea> <br/>
<input id="sendField" value="" type="text">
<button id="sendButton" onclick="send_message();">Enviar</button>
</div>
function initWebSocket(){
$('#conexion-chat').css('display', 'none');
$('#display-chat').css('display', '');
websocket = new WebSocket("ws://localhost:8080/o/echo");
websocket.onopen = function (event) {
websocket.send(json_user());
};
websocket.onclose = function(event) {
localStorage.clear();
console.log("DESCONECTADO");
};
websocket.onmessage = function(event) {
var message = event.data;
processMessage(message);
};
websocket.onerror = function(event) {
console.log("ERROR: " + event.data);
};
}
function visitorSelected(event){
var visitorSelected = $(event.target).data('id');
localStorage.setItem('visitorSelected', visitorSelected);
websocket.send(json_messages(visitorSelected, '${email}', '${read}'));
document.getElementById("chatRoomField").innerHTML = "";
}
function processMessage(message){
if(message == '${disconnected}'){
document.getElementById("chatRoomField").innerHTML += "El patrocinador no se encuentra conectado." + "\n";
}else {
var json_message = JSON.parse(message);
var visitorSelected = localStorage.getItem('visitorSelected');
if(json_message.hasOwnProperty('message') && message.length > 0){
var message = json_message.message;
var text = "";
if('${currentUserRol}' != '${rolPreferences}'){
for(var i=0; i<message.length; i++){
text += message[i].from + ": " + message[i].message + "\n";
document.getElementById("chatRoomField").innerHTML = text;
}
}else{
if(message[message.length-1].id == visitorSelected || message[message.length-1].idTo == visitorSelected){
for(var i=0; i<message.length; i++){
text += message[i].from + ": " + message[i].message + "\n";
document.getElementById("chatRoomField").innerHTML = text;
}
}else{
var idMessage = message[message.length-1].id;
$('#visitors').find('h5[data-id=' + idMessage + ']').addClass('unread');
}
}
}
if(json_message.hasOwnProperty('visitors') && json_message.visitors.length > 0){
var visitors = json_message.visitors;
var state;
$("#visitors h5").remove();
for (var i = 0; i < visitors.length; i++) {
state = (visitors[i].idSession == visitorSelected)? "selected" : "not-selected";
$("#visitors").append('<h5 class="' + state + '" data-id=' + visitors[i].idSession + '>' + visitors[i].visitorOnline + '</h5>');
}
if(visitorSelected == null){
$("#visitors h5:first-child").attr("class", "selected");
visitorSelected = $("#visitors h5:first-child").attr("data-id");
localStorage.setItem('visitorSelected', visitorSelected);
}
}
}
}
$('#visitors').on('click', 'h5.not-selected', visitorSelected);
*Note: The entire code has not been submitted, but a code snippet.
Thanks!
Regards!
I have used following code to develop sentence grammar practice. When I click button then order should to maintained. I want it when button clicked then it should hide but after click on top button again show up.
Move sentence to left if there is blank. Also show button again if words clicked again.
Should using only buttons for showing at top also at bottom?
<html>
<head>
<title>
</title>
</head>
<body>
<div id="sen">I am learning JavaScript by developing a simple project.</div>
<br>
<div id="dash"></div>
<br>
<div id="container"></div>
<div id="val"></div>
<script>
var sen = document.getElementById("sen").innerHTML;
var senTrim = sen.trim();
var senArr = senTrim.split(/\s+/);
var dashElement = "";
for(i=0;i<senArr.length;i++)
{
//alert(senArr[i]);
dashElement += "<div onclick='funDiv(this.id);' style='display: inline'" + "id = dashid" + i + ">" + '__ ' + '</div>';
}
var dash = document.getElementById("dash");
dash.innerHTML = dashElement;
//var dashID = document.getElementById("dashid0").innerHTML;
//var dash1 = document.getElementById("val");
//dash1.innerHTML= dashID;
var htmlElements = "";
for (var i = 0; i < senArr.length; i++) {
htmlElements += "<button onclick='fun(this.id);' id = 'btn" + i + "'>" + senArr[i] + '</button>';
}
var container = document.getElementById("container");
container.innerHTML = htmlElements;
var ii = 0;
function funDiv(clicked){
//alert(clicked);
var inText = document.getElementById(clicked).innerHTML;
document.getElementById(clicked).innerHTML = " __ " ;
ii--;
}
function fun(clicked){
//alert(clicked);
document.getElementById(clicked).style.display = "none";
document.getElementById("dashid" + ii).innerHTML = document.getElementById(clicked).innerHTML + " ";
//document.getElementById(clicked).remove();
ii++;
}
</script>
</script>
</body>
</html>
How about something like this?
<html>
<body>
<div id="sen">I am learning JavaScript by developing a simple project.</div>
<br>
<div id="dash"></div>
<br>
<div id="container"></div>
<div id="val"></div>
<script>
var sen = document.getElementById("sen").innerHTML;
var senTrim = sen.trim();
var senArr = senTrim.split(/\s+/);
var dashElement = "";
for (var i = 0; i < senArr.length; i++) {
dashElement += `<div onclick='dashClick(this.id);' style='display: inline' id=dash${i}> __ </div>`;
}
var dash = document.getElementById("dash");
dash.innerHTML = dashElement;
var htmlElements = "";
for (var i = 0; i < senArr.length; i++) {
htmlElements += "<button onclick='btnClick(this.id);' id = 'btn" + i + "'>" + senArr[i] + '</button>';
}
var container = document.getElementById("container");
container.innerHTML = htmlElements;
var picked = 0;
function dashClick(clicked) {
const dash = document.getElementById(clicked);
dash.innerHTML = " __ ";
const btn = document.getElementById(`btn${dash.btnId}`);
btn.style.display = "inline";
picked--;
}
function btnClick(clicked) {
var btnId = clicked.replace('btn', '');
document.getElementById(clicked).style.display = "none";
const dash = document.getElementById("dash" + picked)
dash.innerHTML = document.getElementById(clicked).innerHTML + " ";
dash.btnId = btnId;
picked++;
}
</script>
</body>
</html>
I have implemented it using appendChild and remove functions of JavaScript.
<html>
<body>
<div id="sen">I am learning JavaScript by developing a simple project.</div>
<br>
<div id="dash"></div>
<br>
<div id="container"></div>
<script>
var sen = document.getElementById("sen").innerHTML;
var senTrim = sen.trim();
var senArr = senTrim.split(/\s+/);
var dashElement = "";
var btnElements = "";
for (var i = 0; i < senArr.length; i++) {
btnElements += "<button onclick='btnClick(this.id);' id = 'btn" + i + "'> " + senArr[i] + ' </button>';
}
var container = document.getElementById("container");
container.innerHTML = btnElements;
var picked = 0;
function dashClick(clicked) {
//console.log(clicked);
var buttons = document.getElementsByTagName('button');
var dash = document.getElementById("dash");
dashChild = dash.childNodes;
console.log(document.getElementById(clicked).innerText);
for(i=0;i<senArr.length;i++){
if(document.getElementById(clicked).innerText.trim() == buttons[i].innerText.trim()){
//console.log("Match");
buttons[i].style.opacity = "1";
buttons[i].style.pointerEvents = "auto";
}
}
document.getElementById(clicked).remove(); // remove clicked text
}
// Button click
function btnClick(clicked) {
var dashElement = document.createElement("div");
var text = document.getElementById(clicked).innerText;
dashElement.style.display = "inline";
dashElement.innerHTML = "<div style='display: inline' onclick='dashClick(this.id);' id=" + picked +"> " + text + " </div>"; // add text at top of button
document.getElementById("dash").appendChild(dashElement);
picked++;
document.getElementById(clicked).style.opacity = "0"; //hide button that has been clicked
document.getElementById(clicked).style.pointerEvents = "none";
}
</script>
</body>
</html>
class Storedata {
constructor(name, desc, price, qty) {
this.name = name;
this.desc = desc;
this.price = price;
this.qty = qty;
}
}
var arr = [];
var btnform = document.getElementById('clicktoadd');
var btnlist = document.getElementById('clicktoshow');
var rem = document.getElementById('main');
var cancelform;
var submit;
function addData() {
var proname = document.getElementById("inpname");
var prodesc = document.getElementById("inpdesc");
var propric = document.getElementById("inpprice");
var proqty = document.getElementById("inpqty");
arr.push(new Storedata(proname.value, prodesc.value, propric.value, proqty.value));
}
function showlist() {
var data = document.createElement('table');
data.setAttribute("id", "data");
data.innerHTML += "<tr><th>Product Name</th><th>Description</th><th>Price</th><th>Quantity</th><th></th></tr>";
for (let i = 0; i < arr.length; i++) {
data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td>" + arr[i].desc + "</td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
};
document.getElementById('listing').appendChild(data);
document.getElementById('showbutton').removeAttribute("hidden", false);
}
function removelist() {
var data = document.getElementById("data");
data.parentNode.removeChild(data);
}
function addformtopage() {
var form = document.createElement('div');
form.setAttribute("id", "remform");
form.innerHTML += "<div id=\"lblname\">Product Name:</div><input id=\"inpname\" type=\"text\"><div id=\"chkname\" hidden=\"true\">Enter a Product Name</div><div id=\"lbldesc\">Description:</div><textarea id=\"inpdesc\" rows=\"10\" cols=\"35\"></textarea><div id=\"chkdesc\" hidden=\"true\">Enter a Product Desciption</div><div id=\"lblprice\">Price in INR:</div><input id=\"inpprice\" type=\"number\"><div id=\"chkprice\" hidden=\"true\">Enter a Product Price</div><div id=\"lblqty\">Quantity:</div><input id=\"inpqty\" type=\"number\"><div id=\"chkqty\" hidden=\"true\">Enter a Product Quantity</div><br><br><button id=\"submitproduct\">Submit</button><button id=\"cancel\">Cancel</button>";
document.getElementById('panel').appendChild(form);
cancelform = document.getElementById('cancel');
submit = document.getElementById('submitproduct');
}
function validateform() {
var proname = document.getElementById("inpname");
var prodesc = document.getElementById("inpdesc");
var propric = document.getElementById("inpprice");
var proqty = document.getElementById("inpqty");
var errname = document.getElementById("chkname");
var errdesc = document.getElementById("chkdesc");
var errpric = document.getElementById("chkprice");
var errqty = document.getElementById("chkqty");
if ((proname.value) && (prodesc.value) && (propric.value) && (proqty.value)) {
errname.setAttribute("hidden", true);
errdesc.setAttribute("hidden", true);
errpric.setAttribute("hidden", true);
errqty.setAttribute("hidden", true);
return true;
}
if (proname.value) {
errname.setAttribute("hidden", true);
}
if (prodesc.value) {
errdesc.setAttribute("hidden", true);
}
if (propric.value) {
errpric.setAttribute("hidden", true);
}
if (proqty.value) {
errqty.setAttribute("hidden", true);
}
if (!proname.value) {
errname.removeAttribute("hidden", false);
}
if (!prodesc.value) {
errdesc.removeAttribute("hidden", false);
}
if (!propric.value) {
errpric.removeAttribute("hidden", false);
}
if (!proqty.value) {
errqty.removeAttribute("hidden", false);
}
return false;
}
function clearform() {
var proname = document.getElementById("inpname");
var prodesc = document.getElementById("inpdesc");
var propric = document.getElementById("inpprice");
var proqty = document.getElementById("inpqty");
proname.value = null;
prodesc.value = null;
propric.value = null;
proqty.value = null;
}
function removeform() {
var elem = document.getElementById("remform");
elem.parentNode.removeChild(elem);
}
function removebuttons() {
rem.setAttribute("hidden", true);
}
function showbuttons() {
rem.removeAttribute("hidden", false);
}
btnform.addEventListener('click', function() {
addformtopage();
removebuttons();
cancelform.addEventListener('click', function() {
showbuttons();
removeform();
});
submit.addEventListener('click', function() {
if (validateform()) {
alert("Values Added");
addData();
clearform();
}
});
});
btnlist.addEventListener('click', function() {
showlist();
removebuttons();
document.getElementById('showbutton').addEventListener('click', function() {
showbuttons();
removelist();
document.getElementById('showbutton').setAttribute("hidden", "true");
});
});
#chkname,
#chkdesc,
#chkprice,
#chkqty {
color: red;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 70%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
<!DOCTYPE HTML>
<html>
<head>
<link href="style.css" rel="stylesheet" />
<title>
JS Form
</title>
</head>
<body>
<div id="main">
<p><button id="clicktoadd">Add Product</button> <button id="clicktoshow">Show List</button></p>
</div>
<div id="panel">
</div>
<div id="listing">
</div>
<button id="showbutton" hidden="true">< Back</button>
<script src="script.js"></script>
</body>
</html>
I want to take input in form for description of the item as formatted text. And then output it in the same format as input, but right now I am getting text separated by space where should be there. Please help..
Steps to perform
1. Run this code snippet.
2. Click on 'Add Product' button.
3. Fill the form (For testing give a description of more than one line) and Submit.
4. Click on 'Cancel' button to return.
5. Click on 'Show List' button.
6. Observe Description column.
This is output I am getting separated by spaces
This is form input I am providing
Well, you have two options. Add a <pre> tag:
for (let i = 0; i < arr.length; i++) {
data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td><pre>" + arr[i].desc + "</pre></td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
};
This way it will display the new lines and you keep your string clean.
Or you can replace the new lines with <br> this way:
for (let i = 0; i < arr.length; i++) {
data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td>" + arr[i].desc.replace(/\n/g, "<br>") + "</td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
};
Remember that the new lines are not shown by default in HTML, if you want a new line put a <br>
Test it online
Hope it helps! :)
Add this into your code:
var text = arr[i].desc;
text = text.replace(/\n/g, '<br />');
JSfiddle
See JavaScript: How to add line breaks to an HTML textarea? too.
Been pulling my hair out since the past 4 hours. I have two Javascript file, both works completely fine by itself. One is use as a login verification, the other takes my registration page and writes the form to an XML file.
When I took some code from my login JS and place it in my registration JS, my registration JS doesn't even function properly. I'm thinking my issue is probably the placement of my codes.
If I post the complete codes here, the post would be like 10ft long, so here's all my files:
http://www.mediafire.com/?wt9bchq35pdqxgf
By the way, this is not a real world application, it's just something I'm doing.
Here's my original Javascript file for the registration page:
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var fso = new ActiveXObject("Scripting.FileSystemObject");
var FILENAME = 'C:\\Users\\Wilson Wong\\Desktop\\Copy of Take Home Exam - Copy\\PersonXML2.xml';
function SaveXML(UserData)
{
var file = fso.CreateTextFile(FILENAME, true);
file.WriteLine('<?xml version="1.0" encoding="utf-8"?>\n');
file.WriteLine('<PersonInfo>\n');
for (countr = 0; countr < UserData.length; countr++)
{
file.Write(' <Person ');
file.Write('Usrname="' + UserData[countr][0] + '" ');
file.Write('Pswd="' + UserData[countr][1] + '" ');
file.Write('PersonID="' + UserData[countr][2] + '" ');
file.Write('FirstName="' + UserData[countr][3] + '" ');
file.Write('LastName="' + UserData[countr][4] + '" ');
file.Write('Gender="' + UserData[countr][5] + '" ');
file.Write('DOB="' + UserData[countr][6] + '" ');
file.Write('Title="' + UserData[countr][7] + '" ');
file.WriteLine('></Person>\n');
} // end for countr
//file.WriteLine('></Person>\n');
var usrn = document.getElementById("Usrn").value;
var pswd = document.getElementById("Pswd").value;
var pid = document.getElementById("PersonID").value;
var fname = document.getElementById("FirstName").value;
var lname = document.getElementById("LastName").value;
var gender = document.getElementById("Gender").value;
var dob = document.getElementById("DOB").value;
var title = document.getElementById("Title").value;
file.Write(' <Person ');
file.Write('Usrname="' + usrn + '" ');
file.Write('Pswd="' + pswd + '" ');
file.Write('PersonID="' + pid + '" ');
file.Write('FirstName="' + fname + '" ');
file.Write('LastName="' + lname + '" ');
file.Write('Gender="' + gender + '" ');
file.Write('DOB="' + dob + '" ');
file.Write('Title="' + title + '" ');
file.WriteLine('></Person>\n');
file.WriteLine('</PersonInfo>\n');
file.Close();
} // end SaveXML function --------------------
function LoadXML(xmlFile)
{
xmlDoc.load(xmlFile);
return xmlDoc.documentElement;
} //end function LoadXML()
function initialize_array()
{
var person = new Array();
var noFile = true;
var xmlObj;
if (fso.FileExists(FILENAME))
{
xmlObj = LoadXML(FILENAME);
noFile = false;
} // if
else
{
xmlObj = LoadXML("PersonXML.xml");
//alert("local" + xmlObj);
} // end if
var usrCount = 0;
while (usrCount < xmlObj.childNodes.length)
{
var tmpUsrs = new Array(xmlObj.childNodes(usrCount).getAttribute("Usrname"),
xmlObj.childNodes(usrCount).getAttribute("Pswd"),
xmlObj.childNodes(usrCount).getAttribute("PersonID"),
xmlObj.childNodes(usrCount).getAttribute("FirstName"),
xmlObj.childNodes(usrCount).getAttribute("LastName"),
xmlObj.childNodes(usrCount).getAttribute("Gender"),
xmlObj.childNodes(usrCount).getAttribute("DOB"),
xmlObj.childNodes(usrCount).getAttribute("Title"));
person.push(tmpUsrs);
usrCount++;
} //end while
if (noFile == false)
fso.DeleteFile(FILENAME);
SaveXML(person);
} // end function initialize_array()
This code here will write to my XML file after I hit the submit button. And this is how the XML looks like:
<?xml version="1.0" encoding="utf-8"?>
<PersonInfo>
<Person Usrname="Bob111" Pswd="Smith111" PersonID="111" FirstName="Bob" LastName="Smith" Gender="M" DOB="01/01/1960" Title="Hello1" ></Person>
<Person Usrname="Joe222" Pswd="Johnson222" PersonID="222" FirstName="Joe" LastName="Johnson" Gender="M" DOB="12/01/1980" Title="Hello2" ></Person>
<Person Usrname="Tracey333" Pswd="Wilson333" PersonID="333" FirstName="Tracey" LastName="Wilson" Gender="F" DOB="12/01/1985" Title="Hello3" ></Person>
<Person Usrname="Connie444" Pswd="Yuiy444" PersonID="444" FirstName="Connie" LastName="Yuiy" Gender="F" DOB="12/01/1985" Title="Hello4" ></Person>
<Person Usrname="Brian555" Pswd="Dame555" PersonID="555" FirstName="Brian" LastName="Dame" Gender="M" DOB="12/01/1985" Title="Hello5" ></Person>
<Person Usrname="Scott666" Pswd="Bikes666" PersonID="666" FirstName="Scott" LastName="Bikes" Gender="MF" DOB="12/01/1985" Title="Hello6" ></Person>
<Person Usrname="sadsa" Pswd="s" PersonID="s" FirstName="s" LastName="s" Gender="s" DOB="s" Title="s" ></Person>
If I modify my code to what is shown below, the XML file won't even create. Nor will the authentication run properly. As in the the box won't turn red and no alert message pops up. But the codes I add in does work on my other JS file for my log in page.
Here's the edited registration JS:
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
var fso = new ActiveXObject("Scripting.FileSystemObject");
var FILENAME = 'C:\\Users\\Wilson Wong\\Desktop\\Copy of Take Home Exam - Copy\\PersonXML2.xml';
function SaveXML(UserData)
{
var file = fso.CreateTextFile(FILENAME, true);
file.WriteLine('<?xml version="1.0" encoding="utf-8"?>\n');
file.WriteLine('<PersonInfo>\n');
for (countr = 0; countr < UserData.length; countr++)
{
file.Write(' <Person ');
file.Write('Usrname="' + UserData[countr][0] + '" ');
file.Write('Pswd="' + UserData[countr][1] + '" ');
file.Write('PersonID="' + UserData[countr][2] + '" ');
file.Write('FirstName="' + UserData[countr][3] + '" ');
file.Write('LastName="' + UserData[countr][4] + '" ');
file.Write('Gender="' + UserData[countr][5] + '" ');
file.Write('DOB="' + UserData[countr][6] + '" ');
file.Write('Title="' + UserData[countr][7] + '" ');
file.WriteLine('></Person>\n');
} // end for countr
var usrn = document.getElementById("Usrn").value;
var pswd = document.getElementById("Pswd").value;
var pid = document.getElementById("PersonID").value;
var fname = document.getElementById("FirstName").value;
var lname = document.getElementById("LastName").value;
var gender = document.getElementById("Gender").value;
var dob = document.getElementById("DOB").value;
var title = document.getElementById("Title").value;
var errmsg = "empty field";
var errmsg2 = "You have register successfully";
var msg = "This user name is already in use"; //this is what I added
var errCount = 0;
errCount += LogInVal(usrn);
errCount += LogInVal(pswd);
errCount += LogInVal(pid);
errCount += LogInVal(fname);
errCount += LogInVal(lname); //this is what I added
errCount += LogInVal(gender);
errCount += LogInVal(dob);
errCount += LogInVal(title);
if (errCount != 0) //the if/else statements are what I added
{
file.WriteLine('</PersonInfo>\n'); //checks to see if textbox is empty, if yes, alert
file.Close();
alert(errmsg);
return false;
}
else if(authentication(usrn) == true)
{
file.WriteLine('</PersonInfo>\n'); //checks to see if user name entered is already in use
file.Close();
alert(msg);
return false;
}
else
{
file.Write(' <Person ');
file.Write('Usrname="' + usrn + '" ');
file.Write('Pswd="' + pswd + '" ');
file.Write('PersonID="' + pid + '" ');
file.Write('FirstName="' + fname + '" ');
file.Write('LastName="' + lname + '" '); //this block of code here was there originally
file.Write('Gender="' + gender + '" ');
file.Write('DOB="' + dob + '" '); //previous two condition is false, registration successful, writes to XML.
file.Write('Title="' + title + '" ');
file.WriteLine('></Person>\n');
file.WriteLine('</PersonInfo>\n');
file.Close();
alert(errmsg2);
return true;
}
} // end SaveXML function --------------------
function authentication(usrname1) //function was added
{
for (var x = 0; x < arrPerson.length; x++)
{
if (arrPerson[x][0] == usrn)
{
return true;
}
}
return false;
}
function LogInVal(objtxt) //function was added
{
if(objtxt.value.length == 0)
{
objtxt.style.background = "red";
return 1;
}
else
{
objtxt.style.background = "white";
return 0;
}
}
function LoadXML(xmlFile)
{
xmlDoc.load(xmlFile);
return xmlDoc.documentElement;
} //end function LoadXML()
function initialize_array()
{
var person = new Array();
var noFile = true;
var xmlObj;
if (fso.FileExists(FILENAME))
{
xmlObj = LoadXML(FILENAME);
noFile = false;
} // if
else
{
xmlObj = LoadXML("PersonXML.xml");
//alert("local" + xmlObj);
} // end if
var usrCount = 0;
while (usrCount < xmlObj.childNodes.length)
{
var tmpUsrs = new Array(xmlObj.childNodes(usrCount).getAttribute("Usrname"),
xmlObj.childNodes(usrCount).getAttribute("Pswd"),
xmlObj.childNodes(usrCount).getAttribute("PersonID"),
xmlObj.childNodes(usrCount).getAttribute("FirstName"),
xmlObj.childNodes(usrCount).getAttribute("LastName"),
xmlObj.childNodes(usrCount).getAttribute("Gender"),
xmlObj.childNodes(usrCount).getAttribute("DOB"),
xmlObj.childNodes(usrCount).getAttribute("Title"));
person.push(tmpUsrs);
usrCount++;
} //end while
if (noFile == false)
fso.DeleteFile(FILENAME);
SaveXML(person);
} // end function initialize_array()
Here's the login page JS, which contains the code(it works fine in this file) that was added to the registration JS:
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
//DEFINE LOAD METHOD
function LoadXML(xmlFile)
{
xmlDoc.load(xmlFile);
xmlObj = xmlDoc.documentElement;
}
//declare & initialize array
var arrPerson = new Array();
//initialize array w/ xml
function initialize_array()
{
LoadXML("PersonXML.xml");
var x = 0;
while (x < xmlObj.childNodes.length)
{
var tmpArr = new Array(xmlObj.childNodes(x).getAttribute("Usrname"),
xmlObj.childNodes(x).getAttribute("Pswd"),
xmlObj.childNodes(x).getAttribute("FirstName"),
xmlObj.childNodes(x).getAttribute("LastName"),
xmlObj.childNodes(x).getAttribute("DOB"),
xmlObj.childNodes(x).getAttribute("Gender"),
xmlObj.childNodes(x).getAttribute("Title"));
arrPerson.push(tmpArr);
x++;
}
}
//Validation
function LogInVal(objtxt)
{
if(objtxt.value.length == 0)
{
objtxt.style.background = "red";
return 1;
}
else
{
objtxt.style.background = "white";
return 0;
}
}
//main validation
function MainVal(objForm)
{
var errmsg = "empty field";
var errmsg2 = "Incorrect Username and Password";
var msg = "You have logged in successfully";
var errCount = 0;
var usrn = document.getElementById("usrname1").value;
var pswd = document.getElementById("pswd1").value;
errCount += LogInVal(objForm.usrname);
errCount/*1*/ += LogInVal(objForm.pswd);
initialize_array();
if (errCount != 0)
{
alert(errmsg);
return false;
}
else if(authentication(usrn, pswd) == true)
{
alert(msg);
return true;
setCookie('invalidUsr',' ttttt');
}
else
{
alert(errmsg2);
return false;
}
}
function authentication(usrname1, pswd1)
{
for (var x = 0; x < arrPerson.length; x++)
{
if (arrPerson[x][0] == usrname1 && pswd1 == arrPerson[x][1])
{
return true;
}
}
return false;
}
function setCookie(Cookiename,CookieValue)
{
alert('executing setCookie');
document.cookie = Cookiename + '=' + CookieValue;
}
Here's my registration HTML page:
<html>
<!--onSubmit="SaveXML(person);"-->
<head>
<title>Registration</title>
<link rel="stylesheet" type="text/css" href="CSS_LABs.css" />
</head>
<body>
<script type="text/javaScript" src="writeXML.js"> </script>
<div class="form">
<form id="Registration" name="reg" action="" method="get" onSubmit="return initialize_array()">
Username:<input type="text" name="Usrn" id="Usrn" maxlength="10"/> <br/>
Password:<input type="password" name="Pswd" id="Pswd" maxlength="20"/> <br/>
<hr>
PersonID:<input type="text" name="PersonID" id="PersonID"/> <br>
<hr>
First Name:<input type="text" name="FirstName" id="FirstName"/> <br>
Last Name:<input type="text" name="LastName" id="LastName"/>
<hr>
DOB:<input type="text" name="DOB" id="DOB"/> <br>
<hr>
Gender:<input type="text" name="Gender" id="Gender"/> <br>
<hr>
Title:<input type="text" name="Title" id="Title"/> <br>
<hr>
<!--Secret Question:<br>
<select name="secret?">
</select> <br>
Answer:<input type="text" name="answer" /> <br> <br>-->
<input type="submit" value="submit" />
</form>
</div>
</body>
</html>
Hope I'm not being too confusing.
What I see in the code is this:
create XML file, start with <personInfo>
if error, skip </personInfo>
now add something else.
so you're not closing the XML element. Of course it won't create the file. It won't write invalid XML, and that's "expected" behavior.
You can also debug your jvascript code to enable javascript debugging. go to : tools > intenet options > advanced > browsing and uncheck (disable script debugging). in Internet Explorer Browser . then you can attach debugger by writing debugger; # any location in javascript function egs:
function SaveXML(UserData)
{
debugger;
var file = fso.CreateTextFile(FILENAME, true); file.WriteLine('\n');
file.WriteLine('\n');
.........................
}
in the below code plz tell me how to load the text in textarea where the textarea path is parent.frame_name1.iframe_name1.form_name1.textarea_name1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Local File I/O</title>
<script type="text/javascript">
<!-- // Begin
var ForReading = 1,
ForWriting = 2,
ForAppending = 8;
var objFSO = new ActiveXObject("Scripting.FileSystemObject");
function checkText(fld, btn) {
btn.disabled = false;
fld.onkeypress = null;
return true;
}
function checkFile(obj, div, btn, btn2, fld) {
div.innerHTML = '<p><b>File:</b><br><b>Size:</b> <b>Last Modified:</b></p>';
btn.disabled = true;
btn2.disabled = true;
fld.value = '';
fld.onkeypress = new Function("return checkText(" + "document." + fld.form.name + "." + fld.name + "," + "document." + btn2.form.name + "." + btn2.name + ")");
//
// if (obj.value.indexOf(":") != 1) {
// alert("Local file name must include a drive letter.");
// return false;
// }
var ary = obj.value.split("\\");
if (ary.length < 2) {
alert("Local file name must include a path.");
return false;
}
if (!/(\.txt)$/i.test(obj.value)) {
alert("Local file name must include the '.txt' extension.");
return false;
}
//
try {
objFile = objFSO.GetFile(obj.value);
} catch (e) {
if (e.message != "File not found") {
alert(e.message);
return false;
} else {
try {
if (confirm(obj.value + "\n" + "does not exist. Click 'Ok' to create it.")) {
objFile = objFSO.CreateTextFile(obj.value);
objFile.Close();
objFile = objFSO.GetFile(obj.value);
} else {
return false;
}
} catch (e) {
alert(e.message);
return false;
}
}
}
fileSpecs(div, btn);
objFile = null;
return true;
}
function fileSpecs(div, btn) {
if (objFile.Size > 0) {
btn.disabled = false;
} else {
btn.disabled = true;
}
var str = '<p>';
str += '<b>File:</b> ' + objFile.Path + '<br>';
str += '<b>Size:</b> ';
if (objFile.Size < 1024) {
str += objFile.Size + ' bytes';
} else {
str += (objFile.Size / 1024).toFixed(1) + ' Kbytes';
}
str += ' ';
str += '<b>Last Modified:</b> ' + objFile.DateLastModified;
str += '</p>';
div.innerHTML = str;
}
function loadFile(btn, obj, div, fld) {
objFile = objFSO.GetFile(obj.value);
objStream = objFile.OpenAsTextStream(ForReading);
fld.value = objStream.ReadAll();
objStream.Close();
objStream = null;
fileSpecs(div, btn);
objFile = null;
return true;
}
function saveFile(btn, obj, div, fld, btn2) {
btn.disabled = true;
objFile = objFSO.GetFile(obj.value);
objStream = objFile.OpenAsTextStream(ForWriting);
objStream.Write(fld.value);
objStream.Close();
objStream = null;
objFile = objFSO.GetFile(obj.value);
fileSpecs(div, btn2);
objFile = null;
fld.value = '';
fld.onkeypress = new Function("return checkText(" + "document." + fld.form.name + "." + fld.name + "," + "document." + btn.form.name + "." + btn.name + ")");
return true;
}
// End -->
</script>
</head>
<body>
<center>
<form name="myForm" onsubmit="return false;">
<table width="720">
<tr>
<td colspan="4">
<div id="fileSpec">
<p><b>File:</b><br><b>Size:</b> <b>Last Modified:</b></p>
</div>
</td>
</tr>
<tr>
<td colspan="3" width="580" align="center" valign="top">
<textarea rows="25" name="fileArea" cols="70"
onkeypress="return checkText(this, btnSave);"></textarea> </td>
<td rowspan="2" width="140" valign="top"><p>This is a simple demonstration of
a browser-based local text file editor. Begin by clicking the <b>Browse</b>
button to select an existing text file from your local hard drive.
(In the Browse dialog, you may type in a new file name if
desired.) The selected file information is then displayed at the
top of the page. For an existing file, click the <b>Load</b>
button next. After editing, click the <b>Save</b> button to
complete the demonstration.</p></td>
</tr>
<tr>
<td align="left">
<input type="file" name="fileName" size="50"
onchange="return checkFile(this, document.getElementById('fileSpec'), btnLoad, btnSave, fileArea);"> </td>
<td align="center">
<input type="button" name="btnLoad" value="Load" disabled
onclick="return loadFile(this, fileName, document.getElementById('fileSpec'), fileArea);"> </td>
<td align="center">
<input type="button" name="btnSave" value="Save" disabled
onclick="return saveFile(this, fileName, document.getElementById('fileSpec'), fileArea, btnLoad);"> </td>
</tr>
</table>
</form>
</center>
</body>
</html>
Are you meaning that the filename what you want to load is contained in parent.frame_name1.iframe_name1.form_name1.textarea_name1 ? In this case you should change the <input type="file"/> value dynamically, which is not supported by browsers (it would be a security issue).