How do I populate input fields from text file?

[ferrariboy21]

When I browse a 'txt' file and click on upload, it appears in an iFrame below. How do I extract that values below and populate it in the blank spaces above?
eg. (Apple instead of Q1; 31 instead of Fill in Value)

I was told to use something like strings. Can someone please elaborate more?

Image: http://img261.imageshack.us/img261/9841/populatelb9.jpg

[gits]

you could retrieve the values from the iframe and use JavaScript's string operations to split the text and use it to populate your fields. could you post what you have so far so that we have something to work with?

kind regards

[ferrariboy21]

<script language="JavaScript" type="text/javascript">
<!--
function uploadfile () {
	loadOuter ( document.getElementById ( "browsefile" ).value );
}
var srcFrame;
//External content into a layer
function loadOuter(doc) {
 srcFrame = document.getElementById("hiddenContent");
 srcFrame.src = doc;
 // workaround for missing onLoad event in IFRAME for NN6
 if (!srcFrame.onload) {
  setTimeout("transferHTML()", 1000)
 }
}

function transferHTML(){
 srcContent='';
 if (srcFrame.contentDocument){
  srcContent=srcFrame.contentDocument.getElementsByTagName("BODY")[0].innerHTML;
 }
 else if (srcFrame.contentWindow){
  srcContent=srcFrame.contentWindow.document.body.innerHTML;
 }
 document.getElementById("outerDisplay").innerHTML = srcContent
}


var DocAry=new Array('Test.txt','Test2.txt');

function SelectList(v){
 if (v>0){
  loadOuter(DocAry[v-1]);
 }
}

//-->
</script>

<script type="text/javascript"> 
function ShowInputs()
{
	var idx=document.getElementById ( "menu1" ).selectedIndex-1;	
	var valuearray = new Array ();
	var xaxisarray = new Array ();
	var inputarray = new Array ();
	var colorarray = new Array ();
	var color2array = new Array ();
	for (i=0;i<=idx;i++) {
		var xaxisid = "axis"+i;
		if ( document.getElementById ( xaxisid ) != null ) {
			if ( document.getElementById ( xaxisid ).value != "" ) {
				xaxisarray[i] = '<input type="text" id="axis'+i+'" size="3" value="'+document.getElementById ( xaxisid ).value+'" />';
            		}
		} 
		else {
			xaxisarray[i] = '<input type="text" id="axis'+i+'" size="3" value="Q'+i+'" />';
		}	
		var colorid = "input_field_"+i;
		if ( document.getElementById ( colorid ) != null ) {
			if ( document.getElementById ( colorid ).value != "" ) {
				colorarray[i] = '<input type="hidden" id="input_field_'+i+'" size="9" value="'+document.getElementById ( colorid ).value+'">';
				color2array[i] = '<input type="text" disabled="true" id="sample_'+i+'" size="1" value="" style="background-color:'+document.getElementById ( colorid ).value+'" />';
            }
		} 
		else {
			colorarray[i] = '<input type="hidden" id="input_field_'+i+'" size="9" value="#FFFFFF">';
			color2array[i] = '<input type="text" disabled="true" id="sample_'+i+'" size="1" value="" style="background-color:#FFFFFF" />';
		}	
		var inputid = "input"+i;
		if ( document.getElementById ( inputid ) != null ) {
			if ( document.getElementById ( inputid ).value != "" ) {
				inputarray[i] = '<input type="text" name="entry" onkeyup="valid(this)" id="input'+i+'" value="'+document.getElementById ( inputid ).value+'"/>';
            		}
		} 
		else {
			if ( i == 0 || i == 1 || i == 2 )
				inputarray[i] = '<input type="text" name="entry" onkeyup="valid(this)" id="input'+i+'" value="50"/>';
			else
				inputarray[i] = '<input type="text" name="entry" onkeyup="valid(this)" id="input'+i+'" value="Fill in value"/>';
		}	
	}
        // reset container content before adding inputs
       	document.getElementById('container').innerHTML = '';
		
	for (i=0;i<=idx;i++) {
		document.getElementById('container').innerHTML += '<b>X-Axis</b>:<br>'+xaxisarray[i]+'&nbsp;&nbsp;&nbsp;&nbsp;';
		document.getElementById('container').innerHTML += '<input type="button" onclick="showColorGrid2(\'input_field_'+i+'\',\'sample_'+i+'\');" value="Color">';
		document.getElementById('container').innerHTML += '&nbsp;'+colorarray[i];
		document.getElementById('container').innerHTML += '&nbsp;'+color2array[i];
		document.getElementById('container').innerHTML += '&nbsp;'+inputarray[i]+'<br>';
		document.getElementById('container').innerHTML += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div id="colorpicker201" class="colorpicker201"></div>';
	}
}

</script>

Just incase you need the whole code:
Free File Hosting Made Simple - MediaFire

Would really appreciate some help .. Totally stuck

[acoder]

Do you have a link to a test page that we could look at? It may make things easier.

[ferrariboy21]

Something like this, mate.
Our Final Year Project Assignment

Only that the upload function doesn't work in this site. :)

[acoder]

OK, can you give an example of the contents of an uploaded text file?

To populate, you need to parse the string that constitutes the contents of the text file, get the separate parts and then access the text fields and set their values.

[ferrariboy21]

An example of the uploaded text file would be;

apple,31
durian,37
mango,56
watermelon,34
honeydew,22
orange,18

So apple replaces 'Q0' and 31 replaces 'Fill in value'; etc. I hope you get what I mean.

Thanks for replying mate.

[acoder]

The first task would be to split the text using the split() method. The text is contained in the element with ID "outerDispl ay", or the srcContent variable depending on the function. Split that string on the newline character to get an array of pairs. Then use a loop to get these one by one to again split and then set the input text fields, e.g.

// i is index
str = arr[i].split(",");
document.getElementById("axis"+i).value = str[0];

[ferrariboy21]

Thanks for the reply; Is it something like this mate, cos I've never used the 'split' before and I'm not sure if I'm right.

function splitString(stringToSplit,separator)
{
  var arrayOfStrings = stringToSplit.split(separator);
  print(stringToSplit);

  for (var i=0; i < arrayOfStrings.length; i++)
    print(arrayOfStrings[i] + " / ");
}

var uploadString = "Apple,31 \nMango,21 \nDurian,12 \nOrange,15";

var space = " ";
var comma = ",";

splitString(monthString, comma);

What do I do after this? I don't really get what you said about the loop. Can you elaborate more please (I'm a beginner, sorry to bother you)

[acoder]

That's along the right lines, but you'd have to define print() somewhere because it's not a built-in function.

Once you have the text file contents in a variable split it on the newline "\n" character. You should now have an array. By looping over an array, I simply mean a for loop as you have in your code snippet. At this stage, you should check that you have the right values using a debugger to check the values of variables or simply alerting them.