How to read array value into textbox

  • (2 Pages)
  • +
  • 1
  • 2

23 Replies - 13096 Views - Last Post: 28 April 2011 - 08:28 PM

#1 jaimesharp  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 105
  • Joined: 27-May 09

How to read array value into textbox

Posted 24 April 2011 - 09:59 PM

What i want to know is how to read the value stored in an array to a textbox though I have a second array which is contianed in dropdowns with a for loop iterating

ie item and price arrays

So i want it if item [position] then price [position] is called to the textbox how do i do this so that it iterates through the values using a for loop as i am meant to iterate through and not hardcode in values thanks


for (var i=0; i<price.length; i++)

Hopefully someone can help me with this

Is This A Good Question/Topic? 0
  • +

Replies To: How to read array value into textbox

#2 jaimesharp  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 105
  • Joined: 27-May 09

Re: How to read array value into textbox

Posted 24 April 2011 - 11:41 PM

Basically i want to know how to have it so that if item1 is selected in the dropdown price[1] is selected and added to the textbox.

and how to insert it there though the array will have the length or values change so a loop while it is less than the length to check the value/values selected would be good though i don't know how to write this i am happy if this is demonstrated with a singular value.


Thanks For you time and help
Was This Post Helpful? 0
  • +
  • -

#3 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: How to read array value into textbox

Posted 25 April 2011 - 02:02 AM

Ok, so the item and price arrays are synced, so that item[1] goes with price[1]?

If so, then what you need to do is:

  • Fetch the selected value from the drop-down.
  • Loop through the item array, using a for loop like you posted earlier, until you match the selected value with the item at that the current index.
  • Fetch the element from price at that index, and put it into your textbox.


Try it and see what you come up with. If it doesn't work, post it here and we'll take a look.
Was This Post Helpful? 0
  • +
  • -

#4 jaimesharp  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 105
  • Joined: 27-May 09

Re: How to read array value into textbox

Posted 25 April 2011 - 03:29 AM

No they are not synced though they contain the same number of elements they are seperate arrays

which is what is making it harder
Was This Post Helpful? 0
  • +
  • -

#5 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: How to read array value into textbox

Posted 25 April 2011 - 03:53 AM

Ok, now I'm not sure exactly what you mean. I can think of a few things you could be talking about, but I'd rather not keep guessing. Could you give us an exact example of what kind of data you are dealing with? What these two arrays look like and what you have in your select box.
Was This Post Helpful? 1
  • +
  • -

#6 jaimesharp  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 105
  • Joined: 27-May 09

Re: How to read array value into textbox

Posted 25 April 2011 - 11:39 PM

Ok sorry if i was a bit unclear

The Dropdown is created with a for loop that iterates through an array which currently has 7 values

which are services

ie Service

{
service[0] = "12 month log book service";
service[1] = "18 month log book service";
service[2] = "24 month log book service";
service[3] = "30 month log book service";
service[4] = "36 month log book service";
service[5] = "Other minor service";
service[6] = "Other major service";

}

Prices as follows though subject to change values

price[0] = "255";
price[1] = "285";
price[2] = "530";
price[3] = "255";
price[4] = "285";
price[5] = "285";
price[6] = "540";


Basically the dropdown is populated by the for loop which iterates and creates <option> service[i]</option>

Though i want it to function that if i select service[0] the price [0] is entered though i am meant to do this without hard coding in values or number of elements


so something that checks the position ie service [1] then loads price [1] into a textbox that is read only
Was This Post Helpful? 0
  • +
  • -

#7 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3719
  • View blog
  • Posts: 5,990
  • Joined: 08-June 10

Re: How to read array value into textbox

Posted 26 April 2011 - 12:25 AM

Ahh ok. That is what I meant when I asked if they were synced :)
(Synced arrays = arrays where elements with the same index are linked.)

Which brings me back to my original post. All you have to do is loop through the Service array until you find a match for the value selected in the drop-down. Then use the index where the match was found to fetch the correct price, and place it into your textbox.


There is another way to deal with this though.
Have you considered using the price as the value for the option box?

Option boxes can have a value separate from what is displayed:
<select name="MySelect" id="MySelect">
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
</select>


Then you can just do this to print the value of the selected option (1, 2, or 3).
alert(document.getElementById('MySelect').value);


Was This Post Helpful? 0
  • +
  • -

#8 jaimesharp  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 105
  • Joined: 27-May 09

Re: How to read array value into textbox

Posted 26 April 2011 - 04:26 AM

but they are separate arrays right i get how to display the services as i have that working in the drop down the prices are a separate array price so there will be no match correct as the option box makes sense though you would have to manually set the value = price then display that which is not what i want

though the iteration and checking till match is correct i need it to store the price in the textbox and iterate till the match is found


so something like this


for (i=0;<i<service.length;i++)

<option> service [i]</option>

for (i=0;price.length;i++)
where (i = service [i])


as this is part of the final function it will need to store this amount in the texbox and then have later options with checkboxes to add values to this and create a total later on.


as i would prefer to iterate through price and service so where service is already pulled into the dropdown price is associated though they are not linked at all
Was This Post Helpful? 0
  • +
  • -

#9 jaimesharp  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 105
  • Joined: 27-May 09

Re: How to read array value into textbox

Posted 26 April 2011 - 05:09 AM

how would i join the indexes so that the values are linked as i am not allowed to hard code the values into the function so i have to iterate through both the services inside the dropdown works fine though i need to get the price linked


as i have two different javascript files with similar content i have to test it on both

so

i need to know how to link the indexes and return price [i] where it is equal to the [i] of service

Sorry for the numerous posts as this is a singular portion of my code


maybe could i do something like


<select id= "Service">
<script type="text/javascript">
for (var i=0; i<service.length; i++)
{document.writeln("<option>" + service[i] + "</option>");}

</script>


though set another for loop to add the price as a value then return price [i] into the textbox as it has to be a textbox the arrays will conatin equal elements so i assume this may work though how would i get it to do this
Was This Post Helpful? 0
  • +
  • -

#10 jaimesharp  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 105
  • Joined: 27-May 09

Re: How to read array value into textbox

Posted 26 April 2011 - 05:17 AM

could i make the price array a child of the parent Service


then i have a more dificult one which can have multiple options and values to create a final total textbox with the values gathered from

this problem and the other additional service options
Was This Post Helpful? 0
  • +
  • -

#11 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 828
  • Joined: 25-October 08

Re: How to read array value into textbox

Posted 27 April 2011 - 07:38 AM

View Postjaimesharp, on 26 April 2011 - 06:17 AM, said:

could i make the price array a child of the parent Service


then i have a more dificult one which can have multiple options and values to create a final total textbox with the values gathered from

this problem and the other additional service options


Depending upon where the data is coming from, the following may be a more simplified
and easier to manage solution.

The "Conversions" array may be accessed by PHP if server-side solution is required
Or two independent arrays could be MERGED into the one array described below
Or you might be able to access the information via AJAX as a different attempt...
<html>
<head>
<title> Currency Conversions </title>
<script type="text/javascript">
// Original from: http://www.webdeveloper.com/forum/showthread.php?t=245559
// Modified for: http://www.dreamincode.net/forums/topic/229153-how-to-read-array-value-into-textbox/

// Following information from server database
// or as 2 different arrays MERGED into single array
var Conversions = [
   "12 month log book service:255",
   "18 month log book service:285",
   "24 month log book service:530",
   "30 month log book service:255",
   "36 month log book service:285",
   "Other minor service:285",
   "Other major service:540"		// Note: No comma after last entry
];

function Convert(info) {
 var ExchangeRate = info.split(':');
 document.getElementById('txtConvert').value = ExchangeRate[1];
}
function initSBox(SBox,SArr) {
  oSel = document.getElementById(SBox);
  oSel.options[oSel.options.length] = new Option('Select an option','',false,false);
  for (i=0; i < SArr.length; i++) {
    var info = SArr[i].split(':');
    oSel.options[oSel.options.length] = new Option(info[0],SArr[i], false,false);
  }
}
onload = function() {
  initSBox('Service',Conversions);
}
</script>

</head>
<body>
<h3>Service Conversions</h3>
<select id="Service" onchange="Convert(this.value)"></select><br>
<input type="text" id="txtConvert" value="" size="6" readonly> Value

</body>
</html>


The text box is not really required if you just plan on using the value
in some formula with the results displayed elsewhere.

Use if beneficial, ignore if not or post back with questions.

Good Luck!
:)
Was This Post Helpful? 0
  • +
  • -

#12 jaimesharp  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 105
  • Joined: 27-May 09

Re: How to read array value into textbox

Posted 27 April 2011 - 09:39 AM

Basically that is one way i had thought of though we are not able to use server side and the data can and will change so i need to allow for that as it is part of an exercise where the above data is to test for functionality the concept you have provided is sound though i have to write it to the textbox as part of the exercise you seem to have it very close to what i want though as i will have to do the same task with a mutltiselect box as well which updates based on the selections though for now one is fine though the value has to be automatically called into the textbox.

Sorry if this is too much writing.

basically if i could set the value to assign iteratively to the select then display select.value where selected possibly

I ran your code to see what does basically what you have works fine for me expect the value should be called from the second array where the position matches.

Though using the data provided it does the right things such as inserting into a readonly textbox the stored value i would not need the split.

could we generate an array from the two arrays ie return service[i]:price[i] then split that to do the same thing as the lengths will always be the same.

Thanks again for you post i had not seen it before :)

This post has been edited by jaimesharp: 27 April 2011 - 09:46 AM

Was This Post Helpful? 0
  • +
  • -

#13 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 828
  • Joined: 25-October 08

Re: How to read array value into textbox

Posted 27 April 2011 - 04:07 PM

Here's one solution using the 2 arrays merged into a single array.
Note much of a change from the previous example.
<html>
<head>
<title> Currency Conversions </title>
<script type="text/javascript">
// Original from: http://www.webdeveloper.com/forum/showthread.php?t=245559
// Modified for: http://www.dreamincode.net/forums/topic/229153-how-to-read-array-value-into-textbox/

// Two different arrays MERGED into single array

Service = [
   "12 month log book service",
   "18 month log book service",
   "24 month log book service",
   "30 month log book service",
   "36 month log book service",
   "Other minor service",
   "Other major service"		// Note: No comma after last entry
];
Prices = ['255','285','530','255','285','285','540'];

var Conversions = []
for (var i=0; i<Service.length; i++) { 
  Conversions.push(Service[i]+':'+Prices[i]);
}

function Convert(info) {
 var ExchangeRate = info.split(':');
 document.getElementById('txtConvert').value = ExchangeRate[1];
}
function initSBox(SBox,SArr) {
  oSel = document.getElementById(SBox);
  oSel.options[oSel.options.length] = new Option('Select an option','',false,false);
  for (i=0; i < SArr.length; i++) {
    var info = SArr[i].split(':');
    oSel.options[oSel.options.length] = new Option(info[0],SArr[i], false,false);
  }
}
onload = function() {
  initSBox('Service',Conversions);
}
</script>

</head>
<body>
<h3>Service Conversions</h3>
<select id="Service" onchange="Convert(this.value)"></select><br>
<input type="text" id="txtConvert" value="" size="6" readonly> Value

</body>
</html>


If I have time, I'll show you a JSON solution.

Keep in mind that the 2 arrays could be external files loaded when the program executes. Then they would not need to be hard-coded into the example.
:bananaman:
Was This Post Helpful? 0
  • +
  • -

#14 JMRKER  Icon User is offline

  • D.I.C Addict

Reputation: 128
  • View blog
  • Posts: 828
  • Joined: 25-October 08

Re: How to read array value into textbox

Posted 27 April 2011 - 05:42 PM

Here is a similar version but using a JSON format of the data.
I also included (but commented out) the code to merge the 2 arrays
dynamically into the JSON format.

JSON has some advantages, but basically a matter of choice as to how you use them.
<html>
<head>
<title> Currency Conversions </title>
<script type="text/javascript">
// Original from: http://www.webdeveloper.com/forum/showthread.php?t=245559
// Modified for: http://www.dreamincode.net/forums/topic/229153-how-to-read-array-value-into-textbox/

// JSON format for Service & Prices as created in the Conversions array below
var Conversions = { // "Choose Service":'',
   "12 month log book service":255,
   "18 month log book service":285,
   "24 month log book service":530,
   "30 month log book service":255,
   "36 month log book service":285,
   "Other minor service":285,
   "Other major service":540		// Note: No comma after last entry
}

/*
// Two different arrays MERGED into single array
Service = [
   "12 month log book service",
   "18 month log book service",
   "24 month log book service",
   "30 month log book service",
   "36 month log book service",
   "Other minor service",
   "Other major service"		// Note: No comma after last entry
];
Prices = ['255','285','530','255','285','285','540'];

var Conversions = {}	// Dynamic creation of JSON format above
for (var i=0; i<Service.length; i++) { Conversions[Service[i]] = Prices[i]; }
*/

function Convert(info) { document.getElementById('txtConvert').value = info; }

function initSBox(SBox,SObj) {
  oSel = document.getElementById(SBox);
  oSel.options[oSel.options.length] = new Option('Choose Service','',false,false);  // optional entry
  for (var x in SObj) {
    oSel.options[oSel.options.length] = new Option(x,SObj[x], false,false);
  }
}
onload = function() {
  initSBox('Service',Conversions);
}
</script>

</head>
<body>
<h3>Service Conversions</h3>
<select id="Service" onchange="Convert(this.value)"></select><br>
<input type="text" id="txtConvert" value="" size="6" readonly> Value

</body>
</html>


:bananaman:
Was This Post Helpful? 0
  • +
  • -

#15 jaimesharp  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 105
  • Joined: 27-May 09

Re: How to read array value into textbox

Posted 28 April 2011 - 03:48 AM

the problem being in your example you are specifying the values which i cannot do the arrays are store in an external JS file and accessed on page load


<form action = ''>

<label for = "Service">Service Required</label>
<select id= "Service">
<script type="text/javascript">
for (var i=0; i< service.length; i++)
  {document.writeln("<option>" + service[i] + "</option>");}
  
  </script>
  </select>
  
  <label for = "Price">Service Price</label>
  
 
  </script>
  <script type="text/javascript" src = "AssignOne.js">
  
var sel = document.getElementById("Service");
var myIndex = sel.selectedIndex;


</script>


<input type = "text" id="Price"></input>
<script type = "text/javascript">

  var sel = document.getElementById("Price");
var myIndex = sel.selectedIndex;
 
</script>

<br>
</br>
<br>
</br>







<label for = "Total">Total</label>
<input type ="text" id = "Total"></input>
<br>
</br>
<br>
</br>


<Label for = "ServiceDate">Service Date </label>

<script type="text/javascript">
function createBox(){
var date=new Date();
var div=document.getElementById('date');
var sel=document.createElement('select');
sel.name='datebox';
var i,wd,dd,mm,yyyy,option,txt;
for(i=0;i<30;i++){
	wd=date.getDay();
	dd=date.getDate();
	if(wd==0){
		date.setDate(dd+1)
		i--;
		continue
		}
	mm=date.getMonth()+1;
	yyyy=date.getFullYear();
	dd<10?dd='0'+dd:null;
	mm<10?mm='0'+mm:null;
	txt=dd+'/'+mm+'/'+yyyy;
	option=document.createElement('option');
	option.value=txt;
	option.appendChild(document.createTextNode(txt));
	sel.appendChild(option);
	date.setDate(Number(dd)+1)
}
div.appendChild(sel);
}
onload=createBox
</script>
<div id="date">
</div>

<br>
</br>
<table border = 1>

<tr>
<th> Addtional Services</th>
<th> Prices</th>
</tr>

<tr>
<td>
<select id = "AdditionalService" multiple="multiple">
<script type="text/javascript">

for (i=0;i<additionalServ.length;i++)
 {document.writeln("<option>" + additionalServ[i] + "</option>");}
 </script>

<script type = "text/javascript">
var sel = document.getElementById("AdditionalService");
var opts = sel.options;
var len = opts.length;
for (var i = 0; i < len; ++i) {
   if (opts[i].selected) {
      // this option has been selected
      // i can be used as an index to access information in your arrays
      // that corresponds to to this option
      // so do something with it here
   }
</script>
</select>
</td>

<td>
<script type="text/javascript">
for (i=0;i<additionalPrice.length;i++)
 {document.writeln("<p>" + additionalPrice[i] + "</p>");}

</script>

<input type = "text" id = "AdditionalPrice"></input>
</td>

</table>

</form>
</body>





I need to fix the validation of this page though this is the code i have so far i need to know how to use the fucntion sto read the price into the textbox "price" for the singluar dropdown and additonalprice for the multiple dropdown setting these textboxes to read only then creating a total box which i have enereated and setting a function which will sum the values found in these two textboxes to produce a total price.



Any further help on this is greatly appriciated
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2