By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,527 Members | 1,164 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,527 IT Pros & Developers. It's quick & easy.

How do I populate input fields from text file?

P: 5
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

Dec 27 '08 #1
Share this Question
Share on Google+
9 Replies


gits
Expert Mod 5K+
P: 5,390
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
Dec 29 '08 #2

P: 5
Expand|Select|Wrap|Line Numbers
  1. <script language="JavaScript" type="text/javascript">
  2. <!--
  3. function uploadfile () {
  4.     loadOuter ( document.getElementById ( "browsefile" ).value );
  5. }
  6. var srcFrame;
  7. //External content into a layer
  8. function loadOuter(doc) {
  9.  srcFrame = document.getElementById("hiddenContent");
  10.  srcFrame.src = doc;
  11.  // workaround for missing onLoad event in IFRAME for NN6
  12.  if (!srcFrame.onload) {
  13.   setTimeout("transferHTML()", 1000)
  14.  }
  15. }
  16.  
  17. function transferHTML(){
  18.  srcContent='';
  19.  if (srcFrame.contentDocument){
  20.   srcContent=srcFrame.contentDocument.getElementsByTagName("BODY")[0].innerHTML;
  21.  }
  22.  else if (srcFrame.contentWindow){
  23.   srcContent=srcFrame.contentWindow.document.body.innerHTML;
  24.  }
  25.  document.getElementById("outerDisplay").innerHTML = srcContent
  26. }
  27.  
  28.  
  29. var DocAry=new Array('Test.txt','Test2.txt');
  30.  
  31. function SelectList(v){
  32.  if (v>0){
  33.   loadOuter(DocAry[v-1]);
  34.  }
  35. }
  36.  
  37. //-->
  38. </script>
  39.  
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript"> 
  2. function ShowInputs()
  3. {
  4.     var idx=document.getElementById ( "menu1" ).selectedIndex-1;    
  5.     var valuearray = new Array ();
  6.     var xaxisarray = new Array ();
  7.     var inputarray = new Array ();
  8.     var colorarray = new Array ();
  9.     var color2array = new Array ();
  10.     for (i=0;i<=idx;i++) {
  11.         var xaxisid = "axis"+i;
  12.         if ( document.getElementById ( xaxisid ) != null ) {
  13.             if ( document.getElementById ( xaxisid ).value != "" ) {
  14.                 xaxisarray[i] = '<input type="text" id="axis'+i+'" size="3" value="'+document.getElementById ( xaxisid ).value+'" />';
  15.                     }
  16.         } 
  17.         else {
  18.             xaxisarray[i] = '<input type="text" id="axis'+i+'" size="3" value="Q'+i+'" />';
  19.         }    
  20.         var colorid = "input_field_"+i;
  21.         if ( document.getElementById ( colorid ) != null ) {
  22.             if ( document.getElementById ( colorid ).value != "" ) {
  23.                 colorarray[i] = '<input type="hidden" id="input_field_'+i+'" size="9" value="'+document.getElementById ( colorid ).value+'">';
  24.                 color2array[i] = '<input type="text" disabled="true" id="sample_'+i+'" size="1" value="" style="background-color:'+document.getElementById ( colorid ).value+'" />';
  25.             }
  26.         } 
  27.         else {
  28.             colorarray[i] = '<input type="hidden" id="input_field_'+i+'" size="9" value="#FFFFFF">';
  29.             color2array[i] = '<input type="text" disabled="true" id="sample_'+i+'" size="1" value="" style="background-color:#FFFFFF" />';
  30.         }    
  31.         var inputid = "input"+i;
  32.         if ( document.getElementById ( inputid ) != null ) {
  33.             if ( document.getElementById ( inputid ).value != "" ) {
  34.                 inputarray[i] = '<input type="text" name="entry" onkeyup="valid(this)" id="input'+i+'" value="'+document.getElementById ( inputid ).value+'"/>';
  35.                     }
  36.         } 
  37.         else {
  38.             if ( i == 0 || i == 1 || i == 2 )
  39.                 inputarray[i] = '<input type="text" name="entry" onkeyup="valid(this)" id="input'+i+'" value="50"/>';
  40.             else
  41.                 inputarray[i] = '<input type="text" name="entry" onkeyup="valid(this)" id="input'+i+'" value="Fill in value"/>';
  42.         }    
  43.     }
  44.         // reset container content before adding inputs
  45.            document.getElementById('container').innerHTML = '';
  46.  
  47.     for (i=0;i<=idx;i++) {
  48.         document.getElementById('container').innerHTML += '<b>X-Axis</b>:<br>'+xaxisarray[i]+'&nbsp;&nbsp;&nbsp;&nbsp;';
  49.         document.getElementById('container').innerHTML += '<input type="button" onclick="showColorGrid2(\'input_field_'+i+'\',\'sample_'+i+'\');" value="Color">';
  50.         document.getElementById('container').innerHTML += '&nbsp;'+colorarray[i];
  51.         document.getElementById('container').innerHTML += '&nbsp;'+color2array[i];
  52.         document.getElementById('container').innerHTML += '&nbsp;'+inputarray[i]+'<br>';
  53.         document.getElementById('container').innerHTML += '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div id="colorpicker201" class="colorpicker201"></div>';
  54.     }
  55. }
  56.  
  57. </script>
  58.  
Just incase you need the whole code:
Free File Hosting Made Simple - MediaFire

Would really appreciate some help .. Totally stuck
Dec 30 '08 #3

acoder
Expert Mod 15k+
P: 16,027
Do you have a link to a test page that we could look at? It may make things easier.
Dec 31 '08 #4

P: 5
Something like this, mate.
Our Final Year Project Assignment

Only that the upload function doesn't work in this site. :)
Dec 31 '08 #5

acoder
Expert Mod 15k+
P: 16,027
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.
Dec 31 '08 #6

P: 5
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.
Dec 31 '08 #7

acoder
Expert Mod 15k+
P: 16,027
The first task would be to split the text using the split() method. The text is contained in the element with ID "outerDisplay", 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.
Expand|Select|Wrap|Line Numbers
  1. // i is index
  2. str = arr[i].split(",");
  3. document.getElementById("axis"+i).value = str[0];
Dec 31 '08 #8

P: 5
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.

Expand|Select|Wrap|Line Numbers
  1. function splitString(stringToSplit,separator)
  2. {
  3.   var arrayOfStrings = stringToSplit.split(separator);
  4.   print(stringToSplit);
  5.  
  6.   for (var i=0; i < arrayOfStrings.length; i++)
  7.     print(arrayOfStrings[i] + " / ");
  8. }
  9.  
  10. var uploadString = "Apple,31 \nMango,21 \nDurian,12 \nOrange,15";
  11.  
  12. var space = " ";
  13. var comma = ",";
  14.  
  15. splitString(monthString, comma);
  16.  
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)
Jan 2 '09 #9

acoder
Expert Mod 15k+
P: 16,027
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.
Jan 3 '09 #10

Post your reply

Sign in to post your reply or Sign up for a free account.