How to read array value into textbox

  • (2 Pages)
  • +
  • 1
  • 2

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

#16 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 868
  • Joined: 25-October 08

Re: How to read array value into textbox

Posted 28 April 2011 - 07:20 AM

Well, obviously I'm not getting what the problem is. :helpsmilie:

Since you have only posted snippets of code and I'm not sure what version you are currently using, do you have a sample site where we can see the HTML setup, attempted JS file access and the interaction of the desired functions?

The sample site or code does not need to be your full and final code, but just a small example of what you want and what you have yet to accomplish, showing just the problem area.
Was This Post Helpful? 0
  • +
  • -

#17 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 - 07:53 AM

The code you have done does the right things though i cannot specify the values as hardcoded

so your array is not usable

the bvalue returned is correct and the box does what i want

so if i change the value the price is updated

so basically a service[i] = price[i] return price [i] where selected

if it can be done assigning the value to the selects iteratively then i am happy to do that

and for my next problem i have to do the same task using a different set of data and multiple matches and prices


then produce another read only textbox with the sum of Price and Additional Price
Was This Post Helpful? 0
  • +
  • -

#18 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 - 08:00 AM

Here is the code i have and am using which is right excpet for the textboxes getting values

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Aus AutoService Car Service Booking Form part 2 </title>

<link href ="Assignone.css" rel ="stylesheet" type ="text/css"/>



<script type ="text/javascript" src = "AssignOne.js">
</script>

</head>

<body>
<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" value = ""></input>
<script type = "text/javascript">

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

<br>
</br>
<br>
</br>
<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>
<label for = "AdditionalPrice">Additional Price </label>
<input type = "text" id = "AdditionalPrice" value = "255"></input>
</td>

</table>

<script type ="text/javascript">
var myTextbox = document.getElementById("Price");
var contents = myTextbox.value
</script>

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



<input type = "Submit"></input> <input type = "reset"></input>
</form>
</body>



</html>


and here is the js

//DO NOT ADD, REMOVE, MODIFY ANY VARIABLES IN THIS FILE
//DO NOT ADD ANY Javascript CODE TO THIS FILE

// service, price are parallel arrays
// additionalServ, additionalDesc, additionalPrice are parallel arrays

var make = new Array();                //make of car
    make[0] = "Audi";
    make[1] = "BMW";
    make[2] = "Ford";
    make[3] = "Holden";
    make[4] = "Hyundai";
    make[5] = "Jaguar";
    make[6] = "Nissan";
    make[7] = "Porsche";
    make[8] = "Subaru";
    make[9] = "Toyota";
    make[10] = "Other";

var service = new Array();            //log book services available
    service[0] = "6 month log book service";
    service[1] = "12 month log book service";
    service[2] = "18 month log book service";
    service[3] = "24 month log book service";
    service[4] = "30 month log book service";
    service[5] = "36 month log book service";
    service[6] = "Other minor service";
    service[7] = "Other major service";

var price = new Array();            //prices log book services available
    price[0] = "255";
    price[1] = "255";
    price[2] = "285";
    price[3] = "530";
    price[4] = "255";
    price[5] = "285";
    price[6] = "285";
    price[7] = "540";
    
var special = new Array();         //specials for the current month
    special[0] = "Easter Special - receive a 10% discount on your next log book service when you book any full price service during the month of April. (Terms and Conditions apply - speak to one of our friendly consultants to find out more)";
    special[1] = "Spend $500 or more with us during April and we will provide a minor car detail for half-price";
    special[2] = "With every tow ball installed during April get a tow ball cover absolutley free!";

var additionalServ = new Array();   //name of additional services available
    additionalServ[0] = "Wheel Alignment - Front Wheel Drive";
    additionalServ[1] = "Wheel Alignment - Four Wheel Drive";
    additionalServ[2] = "Wheel balance x 4";
    additionalServ[3] = "Replace disc brake pads (front or rear)";
    additionalServ[4] = "Replace drum brake linings (front or rear)";
    additionalServ[5] = "Supply and install tow bar";
    additionalServ[6] = "Full Car Detail";
    additionalServ[7] = "Minor Car Detail";

var additionalPrice = new Array();         //prices for the additional services
    additionalPrice[0] = "70"; 
    additionalPrice[1] = "110.50";
    additionalPrice[2] = "30";
    additionalPrice[3] = "150";
    additionalPrice[4] = "170";
    additionalPrice[5] = "600";
    additionalPrice[6] = "120";
    additionalPrice[7] = "60";

var additionalDesc = new Array();         //descriptions for the additional services
    additionalDesc[0] = "Suitable for front wheel drive vehicles our superior wheel alignment service will help your car stay on track. Do you ever get that shuddering feeling in the steering wheel? It is likely that your wheels are out of alignment. Using the latest computerised equipment ensures the most accurate wheel alignment in town. Not only do we have the best equipment but the best trained mechanics around and we guarantee our work for 3 months or 5000 km - which ever comes first. Wheel balancing is included in this service.";
    additionalDesc[1] = "Suitable for four wheel drive vehicles our off-road wheel alignment service will help your 4WD stay on track. For a 4WD (or AWD) vehicle it is recomended that all four wheels are adjusted thats why this service is a little more expensive. Using the latest computerised equipment ensures the most accurate wheel alignment in town. Not only do we have the best equipment but the best trained mechanics around and we guarantee our work for 3 months or 5000 km - which ever comes first. Wheel balancing of all wheels is included in this service.";
    additionalDesc[2] = "Help prolong the life of your tyres by ensuring that each wheel is properly balanced. We recommend this is done on a 6 monthly basis at the same time that you do a tyre rotation. We offer standard and premium balancing services. The prices shown are for a standard balance. Ask our staff about the benefits of a premium balance when you drop your car off for its next service. You'll be glad you did.";
    additionalDesc[3] = "Time to replace those brake pads? Then we can do it for you (for a price). We only use high quality brake pads so you don't need to worry about how long they will last. They won't fall apart or seize in extreme weather conditions unlike some that other mechanics use. Just tell us if it is front or rear brakes that need new pads - leave the rest to us.";
    additionalDesc[4] = "Got an older car with drum brakes? No problems, we can replace your worn brake linings for you. We only use high quality brake linings so you don't need to worry about how long they will last. They won't fall apart or seize in extreme weather conditions unlike some that other mechanics use. Just tell us if it is front or rear brakes that need new linings - leave the rest to us.";
    additionalDesc[5] = "Don't trust fitting a new tow bar to your car to anyone else. Our fitters are second to none. They'll get it right the first time. ";
    additionalDesc[6] = "Want that new car feeling again? Then our Full Car Detail is for you and your car. We give your car a complete make over and make sure it is spotless from headlights to exhaust. We'll clean your engine bay, shampoo your carpets, clean and deodorise the seats, wash and polish the exterior. We even polish the tow ball. Your car won't know itself. And don't worry about water restrictions - we use fully recycled water in our environmentally friendly wash bays.";
    additionalDesc[7] = "Haven't had time to keep the exterior of your car nice and clean lately or are you trying to save water by not washing the car? Book your car in for a minor detail and we'll give the outside of your car a thorough clean from top to bottom. We'll black the tyres if you ask nicely.";


Ignore AddiitonDesc as that is going inside a table as text to show the information about the additional services basically i need it to be as you did before with the dropdown and values though i just have to reference the array and should not be creating an additional array

so basically the price is to be displayed in the textbox which is set readonly to prevent the prices from being edited by the user

with the next select conating the values from additional services which i have created a multi select box though again the price needs to be associated with the options and summed together to produce addiitonalPrice

and a Total which is Price + AdditionalServiceprice


Hopefully this shows what i am trying to achieve
Was This Post Helpful? 0
  • +
  • -

#19 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 868
  • Joined: 25-October 08

Re: How to read array value into textbox

Posted 28 April 2011 - 09:50 AM

Some Suggestions:

You have a number of syntax errors and orphan <tags> and random bits of JS scattered into the HTML that would best be placed between the <head> tags.
If you use the FF or Chrome browsers, take advantage of the error console to see the easy errors to fix.
Also, while not effecting the execution of the code, you have not provided the CSS that could possibly impact the display of the elements.

What is the purpose of the 'date' <div> and why do you create it differently than the examples given earlier?
I would remove that, unless required for the problem, until the rest of the code is working properly, then put it back into your script.
Also, it is not a good idea to use JS reserved words as function names and id values.

For testing purposes, I would remove all code that does not relate directly to the problem.
Once that section is debugged and tested, then add in the extra stuff a piece at a time
to make sure there are no unintentional adverse reactions to your additions.
Was This Post Helpful? 0
  • +
  • -

#20 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 - 11:28 AM

The Div Date is required i cannot remove that which words/ids are reserved I didn't think i was using any I know I have to validate my code i will see where the errors are in firebug and post back and i will try to fix them. in error console i have no errors referring to the page I will test it further using firebug

The css for this is very basic basically Background color and font sizes only


I should try to create a longer javascript <script> section in the head of the document though i more want to get the functions that i require right first.

as the addtional Service,Price,AddtionalServicePrice & Service &Total are all required for this problem

I am Basically thinking of using an onchange on the select box "Service" which will return the value stored in the price array if "Service [i].selected

This post has been edited by jaimesharp: 28 April 2011 - 11:33 AM

Was This Post Helpful? 0
  • +
  • -

#21 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 - 11:36 AM

are the orphan tags you re talking about the <br> tags as i have an equal number of openings and closings thety are only being used to dropdown and create enough space for the dropdown to fully extend I believe i will set spacing and positions in the CSS anyway
Was This Post Helpful? 0
  • +
  • -

#22 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 - 11:47 AM

Basically i want to use a function similar to this

function calcPrice

{

var amount = price[i];
var serv = document.getElementById("Service");
for (i=0;i<service.length;I++)
if(service[i].selected)
document.getElementById("price").value = amount;
}

that on change will add the corresponding price to the textbox with the id "Price" as i want to return price[0] if option 0 is selected basically i need to know how to implement this to perform that task as i am learning sloppy code on my part is okay as long i i get the desired results.

This post has been edited by jaimesharp: 28 April 2011 - 11:47 AM

Was This Post Helpful? 0
  • +
  • -

#23 JMRKER  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 134
  • View blog
  • Posts: 868
  • Joined: 25-October 08

Re: How to read array value into textbox

Posted 28 April 2011 - 05:35 PM

The orphan tags I was referring to are:
1. extra </div> tags, expecially within <td>...</td> regions
2. out of sequence </script> tags
3. blocks like this:
<script type ="text/javascript">
 var myTextbox = document.getElementById("Price");
 var contents = myTextbox.value
</script>


that don't appear to do anything but make assignments.

Please note that I did not say to eliminate your 'date' stuff
from the final version, but to temporarily remove it until you
locate all errors that cause it to not work or display correctly.
When you have done that, then systematically replace the code
as you do further testing.

It is OK if this is a homework assignment that you must do a
certain way the instructor specifies, but you still must learn
the basic syntax of the HTML and JS code.
Was This Post Helpful? 0
  • +
  • -

#24 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 - 08:28 PM

no problem i will continue to go through that basically i have the code doing the correct thing at the moment i still need to clean it up

though i would like help on the function

you are right about that block i had not assigned it to anything and changed my method so i removed all of the unassigned blocks


Now i Have the code working like so
function calcPrice() 
{
   var amount = 0;
   var serv = document.getElementById("Service");
   var opts = serv.options;
   for (i=0; i<opts.length; i++) { 
      if (opts[i].selected) { 
         amount = price[i]; 
      } 
   } 
   document.getElementById("Price").value = amount; //
}
</script>


with a similar thing for additional price though it is not counting the multiple selects 


and i have assigned a value to total

<script type ="text/javascript">
function tot ()
{
var total =document.getElementById("AdditionalPrice").value+ document.getElementById("Price").value;
   document.getElementById("Total").value =total;
   }
   
</script>



though it is filling the total box with only the "Additional price" value and only after refresh

and not counting the multiples or Price in that


how would i solve this thanks

This post has been edited by jaimesharp: 28 April 2011 - 08:29 PM

Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2