Changing value of Javascript input/textbox using getElementById from Excel/VBA

This site is best viewed in a modern browser with JavaScript enabled.

Changing value of Javascript input/textbox using getElementById from Excel/VBA

noizewarr

Greetings,

Let me preface this by saying, I am a total javascript novice and have almost zero experience working with it, although I am very familiar with VBA, so I have a basic understanding of coding principles. What I am trying to do, is send data from an Excel spreadsheet, through an embedded IE web browser, to input fields/text boxes on a javascript object. The method I am using to accomplish this is 'document.getElementByID("xxxx").value = "new value")' but as of right now, I am only partially successful and am having trying getting the ids of all of the text boxes.

Unfortunately, this website is on an intra-network and I am unable to either link the site or copy all of the code, so first I will explain how the site works and then I'll paste some of the code that I have typed up, in hopes that it will be enough for someone to recognize what I am getting at. The site provides map functionality similar to that of Google Maps. After the user logs on, he is presented with maps and a series of drop down menus, which contain tools to manipulate the map in certain ways. The particular tool/function/object I am trying to work with is called Bearing Tools. I am able to initialize this object/function through VBA but using 'document.parentWindow.execScript "new BearingToolsWindow"', which then opens up the subwindow on the website. This sub window contains three input fields where the user can then type in 1. a grid coordinate 2. a direction and 3. a distance. Then the user is able to hit a button called Draw, which will then draw a line on the map from the grid coordinate, along the direction and for the distance that the user typed in. What I want to be able to do, is all the user of my spreadsheet to be able to hit a single button/macro, which will dynamically pull data off the spreadsheet and automatically fill in the three input fields and then press the Draw button.

As of right now, I am only able fill in the first two inputfields. I accomplish this by selecting the first input box and using 'document.getElementById(document.activeElement.id).value = "xxxxx"' in my VBA macro. This then inserts whatever string I have set for "xxxxx" into which ever box the cursor is currently selected on. By using activeElement.id, I get the IDs 'gridText_(long GUID after)' on the first box where the user types in the coordinates and 'magneticNorthInput' for the second input field where the user types in the direction. I know I can easily work my code to fill those in without using activeElement.ID (although I'm not too sure on how to get the GUID without using that method), but the real issue is that activeElement.id does not return an ID for the third input field, where the user types in the distance/length that he wants the line of bearing to be drawn.

However, if I use 'document.activeElement.parentElement.id', I can get unique ids for each input field ('grid_GUID', 'mNorth_GUID' and 'distance_GUID' respectively, where GUID is the long 38 character string). But when I try to use these ids with document.getElementByID, I always get an 'object variable not set' error, implying that it cannot find that id.

What am I missing with the document.getElementByID method that is preventing me from changing the values of those three unique IDs? Something to do with parentElement or childNode?
Can I use execScript to use some sort of javascript format to add my data to those boxes? (like an array of some sort?). execScript seems to let me run whatever javascript I type in, but so far the only thing I've gotten to work is 'new' and 'alert'.
Is there some other method of changing the values of those input fields that I am missing?

Thank you for putting up with my ineptness and for any help you fine folks cans provide!

noizewarr

Here is a snippet of the code that I am trying to change the value of. After using Excel to do a data dump, I discovered that the first two fields with INPUT tags have IDs, (as explained earlier, gridText_GUID and magneticNorthInput_GUID) but the third input field DOES NOT have an ID, at least one I can find. Is it even possible to have an input field/textbox without an ID? How does javascript know to pull data from that specific field without an ID? Is there some way clientside that I can assign an ID to that field so that I can use getElementById to change its value?

};
BearingtoolWindow.prototype.createBearingRow = function (defaultData) {
	var div = null;
	var that = this;
	var degreeSymbol;
	var rowed = (defaultData && defaultData.id) ? defaultData.id : ‘bearingData_’ + TblUtils.generateGuid().replace(/-/g, ‘’);
	var containerDiv = TblUtils.createElement(‘div’, null, {
	id: rowed, position: ‘relative’, width: ‘100%’, height: ‘30px’, padding: ‘2px’
});
var finderDiv = TblUtils.createElement(‘div’, containerDiv, {
	position: ‘absolute’, width: ‘18px’, height: ‘23px’, left: ‘5px’, top: ‘8px’
});
var finder = new FinderIcon(finderDiv, false, false);
finder._rowId = rowed
this.finderIcons.push(finder);
div = TblUtils.createElement(‘div’, containerDiv, {
	id: ‘grid_’ + TblUtils.generateGuid().replace(/-/g, ‘’), position: ‘absolute’, left: ‘21px’, width: ‘45px’, height: ‘20px’
});
div.className = “userProfileHeaderSubInfo”;
var grid = TblUtils.createElement(‘text’, div, {
	id: ‘gridText_’ + TblUtils.generateGuid().replace(/-/g, ‘’), width: ‘100%’
});
div._input = grid;
if (defaultData && defaultData.grid) grid.value = defaultData.grid;
var gridChanged = function () {
	var res = convertGridCoordinate(grid.value);
	if (res.error ==’’) finder.drawMapIcon(new OpenLayers.LonLat(res.decimalLatLon[1], res.decimalLatLon[0]));
	else finder.destroyMapIcon();
	that.removeCenterbutton();
};
TblUtlis.addInputTextChangeEvent(grid, gridChange);
this.elementsWithKeyUpEvent.push(grid);
grid._parent = this;
finder.onDropCallback = function (mgrs) {
	BearingToolWindow.onFinderIconDropCallback(grid, mgrs);
};
var windowWidth = this.getNewWindowWidth();
var bearingDiv = TblUtils.createElement(‘div’, containerDiv, {
	id: ‘bearingDiv_’ + TblUtils.generateGuid().replace(/-g/, ‘’), position: ‘absolute’, left: ‘180px’, width: windowWidth – BearingtoolWindow.bearingDivWidths.Others + ‘px’, height: ‘100%’
});
var leftPos = 0;
if (g_showBearingGrid) {
	div  = TblUtils.createElement(‘div’, bearingDiv, {
		id: ‘gNorth_’ + TblUtils.generateGuid().replace(/-/g, ‘’), position: ‘absolute’, left: leftPos + ‘px’, width: ‘45px’, height: ‘20px’
});
div.className = “userProfileHeaderSubInfo”}
var gridNorthInput = TblUtils.createElement(‘text’, div, {
		width: ‘100%’, textalign: ‘right’
}
, gridNorthInput);
gridNorthinInput.maxLength = 5;
div._input = gridNorthInput;
if (defaultData && defaultData.gridNorthAzimuth) gridNorthInput.value = defaultData.gridNorthAzimuth;
var removeCenterButton = function () {
		that.removeCenterButton();
};
TblUtils.addInputTextChangeEvent(gridNorthInput, removeCenterButton);
this.elementsWithKeyUpEvent.push(gridNorthInput);
div = TblUtils.createElement(‘div’, bearingDiv, {
	position: ‘absolute’, left: (leftPos + 55) + ‘px’, width: ‘5px’, height: ‘20px’
});
div.className = “userProfileHeaderSubInfo”;
degreeSymbol = TblUtils.createElement(‘span’, div {
		textAlign: ‘left’, verticalAlign: ‘top’, fontSize: ‘11pt’
});
degreeSymbol.appendChild(document.createTextNode(‘\u00B0’));
leftPos += BearingtoolWindow.bearingDivWidths.Grid + 10;
}
if (g_showBearingGrid) {
	div  = TblUtils.createElement(‘div’, bearingDiv, {
		id: ‘mNorth_’ + TblUtils.generateGuid().replace(/-/g, ‘’), position: ‘absolute’, left: leftPos + ‘px’, width: ‘45px’, height: ‘20px’
});
div.className = “userProfileHeaderSubInfo”}
var magneticNorthInput = TblUtils.createElement(‘text’, div, {
		width: ‘100%’, textalign: ‘right’
	}
	, ‘magneticNorthInput’);
	magneticNorthInput.maxLength = 5;
	div._input = magneticNorthInput;
	if (defaultData && defaultData.magneticNorthAzimuth) magneticNorthInput.value = defaultData.magneticNorthAzimuth;
	TblUtils.addInputTextChangeEvent(magneticNorthInput, removeCenterButton);
	this.elementsWithKeyUpEvent.push(magneticNorthInput);
	div = TblUtils.createElement(‘div’, bearingDiv, {
		position: ‘absolute’, left: (leftPos + 55) + ‘px’, width: ‘5px’, height: ‘20px’
	});
div.className = “userProfileHeaderSubInfo”;
degreeSymbol = TblUtils.createElement(‘span’, div {
		textAlign: ‘left’, verticalAlign: ‘top’, fontSize: ‘11pt’
});
degreeSymbol.appendChild(document.createTextNode(‘\u00B0’));
leftPos += BearingtoolWindow.bearingDivWidths.Magnetic + 10;
}
if (g_showBearingTrue) {
	div  = TblUtils.createElement(‘div’, bearingDiv, {
		id: ‘tNorth_’ + TblUtils.generateGuid().replace(/-/g, ‘’), position: ‘absolute’, left: leftPos + ‘px’, width: ‘45px’, height:
	});
div.className = “userProfileHeaderSubInfo”;
var trueNorthInput = TblUtils.createelement(‘text’, div, {
		width: ‘100%’, textAlign: ‘right’
	}
	, ‘trueNorthInput’);
	trueNorthInput.maxLength = 5;
	div._input = trueNorthInput;
	if (defaultData && defaultData.trueNorthAzimuth) trueNorthInput.value = defaultData.trueNorthAzimuth;
	TblUtils.addInputTextChangeEvent(trueNorthInput, removeCenterButton);
	this.elementsWithKeyUpEvent.push(trueNorthInput);
	div = TblUtils.createElement(‘div’, bearingDiv, {
		position: ‘absolute’, left: (leftPos + 55) + ‘px’, width: ‘5px’, height: ‘20px’
	});
	div.className = “userProfileHeaderSubInfo”;
degreeSymbol = TblUtils.createElement(‘span’, div {
		textAlign: ‘left’, verticalAlign: ‘top’, fontSize: ‘11pt’
	});
degreeSymbol.appendChild(document.createTextNode(‘\u00B0’));
leftPos += BearingtoolWindow.bearingDivWidths.Magnetic + 10;
}
div = TblUtils.createelement(‘div’, bearingdiv, {
	id: ‘distance_’ + TblUtils.generateguid().replace(/-/g, ‘’), position: ‘absolute’, left: leftPos + ‘px’, width: ‘135px’, height: ‘20px’
});
div._input = distance;
if (defaultData && defaultData.distance) distance.value = defaultData.distance;
TblUtils.addInputTextChangeEvent(distance, removeCenterbutton);
this.elementsWithKeyUpEvent.push(distance);
leftPos += 155;
var btnRemove = new PngButton4(bearingDiv, function () {
	if (that.numRows == 1) {
		alert(‘you cannot remove this data row.’);
		return;
	}
	else {
		that.deleteRow(containerdiv);
		that.showHideRemoveButton();
		that.action();
	}
}
, “remove_btn”, {
	position: ‘absolute’, left: leftPos + ‘px’, top: ‘10px’, width: ‘32px’
});
$(btnRemove.TheDiv) .addClass(‘removeButton’) .attr({
	title: _t(‘Click to delete this data row’)
}).css({
	display: ‘non’
});
var onBearingInputChanged = function (e) {
	if (gridNorthInput && e.target.id != gridNorthInput.id) {
	gridNorthInput.value = ‘’ ;
	gridNorthInput.style.backgroundColor = ‘gray’;
	gridNorthInput.style.cursor = ‘pointer’;
	gridNorthInput.tabIndex = -1;
	}
	if (magneticNorthInput && e.target.id != magneticNorthInput.id) {
	magneticNorthInput.value = ‘’ ;
	magneticNorthInput.style.backgroundColor = ‘gray’;
	magneticNorthInput.style.cursor = ‘pointer’;
	magneticNorthInput.tabIndex = -1;
	}
	if (trueNorthInput && e.target.id != trueNorthInput.id) {
	trueNorthInput.value = ‘’ ;
	trueNorthInput.style.backgroundColor = ‘gray’;
	trueNorthInput.style.cursor = ‘pointer’;
	trueNorthInput.tabIndex = -1;
	}
	e.target.style.backgroundColor = ‘white’;
	e.target.style.cursor = ‘auto’;
	e.target.removeAttribute(‘tabIndex’);
};
if (gridNorthInput) Handler.add(gridNorthInput, ‘focus’, onBearingInputChanged);
if (magneticNorthInput) Handler.add(magneticNorthInput, ‘focus’, onBearingInputChanged);
if (trueNorthInput) Handler.add(trueNorthInput, ‘focus’, onBearingInputChanged);
this.bearingtoolDiv.appendChild(containerDiv);
this.bearingtoolDiv.scrollTop = this.bearingToolDiv.scrollHeight;
this.numRows++;
this.showHideRemoveButon();
this.adjustWindowSize();