Forum Moderators: open

Message Too Old, No Replies

Array and displaying variable

A javascript idiot, any help greatly appreciated

         

mangotude

5:20 pm on Oct 21, 2004 (gmt 0)

10+ Year Member



Hi,

I'd like to apologize in advance if the answer for this is setting on the message board - i'm sure it is, but I've looked and i'm not sure what would be, and there are a few possible weak links in this chain, so i'm not sure if its one or many.

OK, so based on the array the choice of country then dictates the available following options. This works fine on the choices. The problem comes in defining a price in relation to these.

The form elements are
Country
Service
Price

the Arrays were defined as

var SECTIONS = new Array

var PAGELABELS = new Array

var DELLLABELS = new Array

Like i said, it brings up the correct choices - if i choose Scotland, it brings up the relevant selections on service and delivery as compared with Republic of Ireland, and so on.

The problems come with
A) defining Price
B) displaying Price

var PRICE = formName.PRICE;

if (country == "ENGLAND & WALES" && service == "Standard £25.00 (Allow 15 Business Days before Despatch)" && delivery == "£5.00 - Item Despatched by Guaranteed Special Delivery")
PRICE = "30.00";

else
(country == "ENGLAND & WALES" && service == "Standard £25.00 (Allow 15 Business Days before Despatch)" && delivery == "£0.00 - Item Despatched by First Class Post")
PRICE = "25.00";

else
(country == "ENGLAND & WALES" && service == "Express £50.00 (Allow 5 Business Days before Despatch)" && delivery == "£0.00 - Item Despatched by First Class Post")
PRICE = "50.00";

else
(country == "ENGLAND & WALES" && service == "Express £50.00 (Allow 5 Business Days before Despatch)" && delivery == "£5.00 - Item Despatched by Guaranteed Special Delivery")
PRICE = "55.00";

else
(country == "NORTHERN IRELAND" && service == "Standard £35.00 (Allow 15 Business Days for Delivery)" && delivery == "£0.00 - Item Despatched by First Class Post")
PRICE = "35.00";

else
(country == "NORTHERN IRELAND" && service == "Express £50.00 (Allow 5 Business Days for Delivery)" && delivery == "£0.00 - Item Despatched by First Class Post")
PRICE = "50.00";

else
(country == "REPUBLIC OF IRELAND" && service == "Standard £40.00 (Allow 28 Business Days for Delivery)" && delivery == "£0.00 - Item Despatched by First Class Post")
PRICE = "40.00";

else
(country == "SCOTLAND" && service == "Standard £35.00 (Allow 15 Business Days before Despatch)" && delivery == "£0.00 - Item Despatched by First Class Post")
PRICE = "35.00";

else
(country == "SCOTLAND" && service == "Express £50.00 (Allow 5 Business Days for Delivery)" && delivery == "£0.00 - Item Despatched by First Class Post")
PRICE = "50.00";

else
PRICE = "00.00"
)

So i've tried to keep it as simple as possible.

then to display, would it be simply

<input type="text" name="price">

I've cut out a lot of the script because I thought it was a lot to post, but if I need to put more in, please let me know.

the only thing i can think is with the if...else statements, i should be referring to the variable - e.g. PRICELABELS, rather than the Country, Service, etc

OK - I hope this makes sense, apologies for missing the obvious, and thank you for all your time.

James

StupidScript

6:37 pm on Oct 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



For one thing, I'd use "else if" instead of just "else":

if (country == "ENGLAND & WALES" && service == "Standard £25.00 (Allow 15 Business Days before Despatch)" && delivery == "£5.00 - Item Despatched by Guaranteed Special Delivery")
PRICE = "30.00";

else if
(country == "ENGLAND & WALES" && service == "Standard £25.00 (Allow 15 Business Days before Despatch)" && delivery == "£0.00 - Item Despatched by First Class Post")
PRICE = "25.00";

else if
(country == "ENGLAND & WALES" && service == "Express £50.00 (Allow 5 Business Days before Despatch)" && delivery == "£0.00 - Item Despatched by First Class Post")
PRICE = "50.00";

Aside from that, as long as the missing script portions translates these variables and does something with the PRICE variable, like setting the value of the form's "price" element to the new value, it's tough to see where the issue might be.

When you run your script, what do you expect to happen?

mangotude

7:02 pm on Oct 21, 2004 (gmt 0)

10+ Year Member



Hi,

thanks for the quick response.

Aside from that, as long as the missing script portions translates these variables and does something with the PRICE variable, like setting the value of the form's "price" element to the new value, it's tough to see where the issue might be.

That's probably the problem - i don't know how to translate the PRICE variable, or set it to a new variable.

When you run your script, what do you expect to happen?

The script is part of a general form, of which the other functions work fine.

So for the script I have mentioned, I would like it to
A) define the Price as a form field
B) display that value [e.g. 50.00] on screen

then when i submit the form, this would be one of the values posted to my database.

Again, apologies in advance for any obvious mistakes - i'm not too hot on forms or javascript, so i'm at a double disadvantage.

Thanks

James

StupidScript

7:51 pm on Oct 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If your form includes the <input type="text" name="fPRICE"> field, and you have references that can identify that particular field, then you can set both the value and the text being displayed after your PRICE variable is defined:

formName.fPRICE.value=PRICE;
formName.fPRICE.text=PRICE;

That will display whatever PRICE ended up being in the field. (I use both .value and .text because some browsers don't update the visible text in the field without it. I used fPRICE and PRICE to distinguish between the form field name and the script variable name, for illustration. They can both have the same name.)

Note that in the original code you posted, the result of all that stuff would be PRICE="00.00", if the first condition didn't match. All of the "else"s would mean nothing, as the last "else" would override them all. Use the "else if" condition except for the first and last conditions:

if ( ... ) {
}
// no match? then check
else if ( ... ) {
}
// no match? then check
else if ( ... ) {
}

[other loops ... ]

// still no match? then set
else {
PRICE="00.00";
}
// update the form field value and text
formName.fPRICE.value=PRICE;
formName.fPRICE.text=PRICE;

This way, if one of the conditions matches, PRICE will be set to something, and if no conditions are met, PRICE="00.00".

mangotude

12:34 pm on Oct 22, 2004 (gmt 0)

10+ Year Member



Hi,

Thanks for this - I'm going to look at this properly over the weekend and will let you know how it goes.

James

mangotude

8:09 pm on Oct 22, 2004 (gmt 0)

10+ Year Member



Hi,

I tried the code and it still came up blank. I checked that the 'country' 'service' and 'delivery' fields are being filled, and they are fine. however the 'price' is simply null, non existent.

What I think is possibly the problem is not the script but it's location.

so im not sure where it should be placed. it was initially placed at the bottom of the page.

I'm assuming that it's just being ignored at the bottom, as i ran a basic 'alert' script and it wasn't processed - at the top of the page, it ran straight away.

So at the bottom it's being ignored, at the top it would run before anything else is actioned, and so would be pointless.

so......should it be included in the
'function setSelect'? or should it be run as a separate function completely?

As mentioned early, please take in account I'm a Javascript idiot, because i'm sure im missing something obvious.

Thanks

mangotude

10:38 pm on Oct 22, 2004 (gmt 0)

10+ Year Member



Ok, i've been fiddling and fiddling and i'm probably just making it worse and confusing myself. So i'm just going to post all the code.


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="formname" method="post" action="cgi-bin/csvwrite.pl">
<p>&nbsp; </p>
<table width="100%" border="0" cellpadding="3">
<tr>
<td>&nbsp;
<script language="javascript">

<!--//
var SECTIONS = new Array (
'ENGLAND & WALES',
'NORTHERN IRELAND',
'REPUBLIC OF IRELAND',
'SCOTLAND',
'')
var PAGELABELS = new Array (
new Array ('Choose Service'
,'Standard £25.00 (Allow 15 Business Days before Despatch)'
,'Express £50.00 (Allow 5 Business Days before Despatch)'
),
new Array ('Choose Service'
,'Standard £35.00 (Allow 15 Business Days for Delivery)'
,'Express £50.00 (Allow 5 Business Days for Delivery)'
),
new Array ('Choose Service'
,'Standard £40.00 (Allow 28 Business Days for Delivery)'
),
new Array ('Choose Service'
,'Standard £35.00 (Allow 15 Business Days before Despatch)'
,'Express £50.00 (Allow 5 Business Days before Delivery)'
),
new Array ('Choose Service'
,''
)
)
var DELLABELS = new Array (
new Array ('Choose Delivery Option'
,'£0.00 - Item Despatched by First Class Post'
,'£5.00 - Item Despatched by Guaranteed Special Delivery'
),
new Array ('Choose Delivery Option'
,'£0.00 - Item Despatched by First Class Post'
),
new Array ('Choose Delivery Option'
,'£0.00 - Item Despatched by First Class Post'
),
new Array ('Choose Delivery Option'
,'£0.00 - Item Despatched by First Class Post'
),

new Array ('Choose Delivery Option'
,''
)
)

function setSelect (sel, selectData, target)
{sel.length = selectData.length
var index = 0
for (var i in selectData)
{if (selectData[i] == target)
{index = i}
sel.options[i].text = selectData[i]
sel.options[i].value = selectData[i]
}
sel.selectedIndex = index // set the default
} // -->

var PRICE = formName.PRICE;

pricecheck()

{
if (country == "ENGLAND & WALES" && service == "Standard £25.00 (Allow 15 Business Days before Despatch)" && delivery == "£5.00 - Item Despatched by Guaranteed Special Delivery")
PRICE = "30.00";

else if
(country == "ENGLAND & WALES" && service == "Standard £25.00 (Allow 15 Business Days before Despatch)" && delivery == "£0.00 - Item Despatched by First Class Post")
PRICE = "25.00";

else if
(country == "ENGLAND & WALES" && service == "Express £50.00 (Allow 5 Business Days before Despatch)" && delivery == "£0.00 - Item Despatched by First Class Post")
PRICE = "50.00";

else if
(country == "ENGLAND & WALES" && service == "Express £50.00 (Allow 5 Business Days before Despatch)" && delivery == "£5.00 - Item Despatched by Guaranteed Special Delivery")
PRICE = "55.00";

else if
(country == "NORTHERN IRELAND" && service == "Standard £35.00 (Allow 15 Business Days for Delivery)" && delivery == "£0.00 - Item Despatched by First Class Post")
PRICE = "35.00";

else if
(country == "NORTHERN IRELAND" && service == "Express £50.00 (Allow 5 Business Days for Delivery)" && delivery == "£0.00 - Item Despatched by First Class Post")
PRICE = "50.00";

else if
(country == "REPUBLIC OF IRELAND" && service == "Standard £40.00 (Allow 28 Business Days for Delivery)" && delivery == "£0.00 - Item Despatched by First Class Post")
PRICE = "40.00";

else if
(country == "SCOTLAND" && service == "Standard £35.00 (Allow 15 Business Days before Despatch)" && delivery == "£0.00 - Item Despatched by First Class Post")
PRICE = "35.00";

else if
(country == "SCOTLAND" && service == "Express £50.00 (Allow 5 Business Days for Delivery)" && delivery == "£0.00 - Item Despatched by First Class Post")
PRICE = "50.00";

else
PRICE = "00.00"
)

<script language ="javascript">
// update the form field value and text
formName.fPRICE.value=PRICE;
formName.fPRICE.text=PRICE;

}

</script>
<!--

//-->
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tbody><tr>
<td width="110">Country</td>

<td><select name="country" onchange="setSelect(this.form.service, PAGELABELS[this.selectedIndex], 'Choose a Service')" onblur="setSelect(this.form.delivery, DELLABELS[this.selectedIndex], 'Choose a Delivery')">
<option value="ENGLAND &amp; WALES">ENGLAND &amp; WALES</option>
<option value="NORTHERN IRELAND">NORTHERN IRELAND</option>
<option value="REPUBLIC OF IRELAND">REPUBLIC OF IRELAND</option>
<option value="SCOTLAND">SCOTLAND</option>
<option value=""></option>
</select></td>
</tr>
<tr>
<td>Speed of Service</td>

<td><select name="service"><option value="Choose Service">Choose Service</option><option value="Standard £25.00 (Allow 15 Business Days before Despatch)">Standard £25.00 (Allow 15 Business Days before Despatch)</option><option value="Express £50.00 (Allow 5 Business Days before Despatch)">Express £50.00 (Allow 5 Business Days before Despatch)</option></select></td>
</tr>
<tr>
<td>Delivery Option</td>
<td><select name="delivery"><option value="Choose Delivery Option">Choose Delivery Option</option><option value="£0.00 - Item Despatched by First Class Post">£0.00 - Item Despatched by First Class Post</option><option value="£5.00 - Item Despatched by Guaranteed Special Delivery">£5.00 - Item Despatched by Guaranteed Special Delivery</option></select></td>
</tr>

<tr>

<td>Total </td>
<td>
<p>
<b>Price</b> <Price>
<input type="text" name="price">

</p>
<p>&nbsp;</p>
<p>
<input type="submit" value="Proceed">
</p>
</td>
</tr>

</tbody></table>

<p></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</td>
</tr>
</table>
<p>&nbsp;</p>
</form>
</body>
</html>

the arrays choice works fine - the country and service etc posts fine, it's just a) figuring out the price and b) getting it as a field which can be displayed and then posted as part of the form.

Thanks for any help

StupidScript

10:41 pm on Oct 22, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Here ya go, James. (Oops! We cross-posted ... my solution has no arrays!) Put the script in the HEAD section of your document, and DO NOT set the "id=" of ANY other element on the page to one of the "magic" names (country,service,delivery,fPRICE). Put the form wherever it fits on your page. I tested this on Firefox 0.9.2, MSIE5/6, Netscape 7.0, Opera 5.12 and Mozilla 1.2.1. This will NOT work with Netscape 4.x. (The syntax you posted would not work with all of these browsers ...). I used a null "button" object so you could test it out, but it will work fine with any event (onchange, etc.) or with a submit button, although the submit button would send the form, diminishing the value of seeing the total price in the fPRICE field:
====snipsnip====
<script type="text/javascript" language="javascript">
function setSelect() {

// set local variables to reference form elements
coun=document.getElementById("country");
serv=document.getElementById("service");
deli=document.getElementById("delivery");
fPRICE=document.getElementById("fPRICE");
country=coun.value;
service=serv.value;
delivery=deli.value;

// check what was selected, and set the PRICE variable
if (country == "ENGLAND & WALES" && service == "Express £50.00 (Allow 5 Business Days before Despatch)" && delivery == "£5.00 - Item Despatched by Guaranteed Special Delivery") {
PRICE = "55.00";
}
else if (country == "ENGLAND & WALES" && service == "Express £50.00 (Allow 5 Business Days before Despatch)" && delivery == "£0.00 - Item Despatched by First Class Post") {
PRICE = "50.00";
}
else if (country == "ENGLAND & WALES" && service == "Standard £25.00 (Allow 15 Business Days before Despatch)" && delivery == "£5.00 - Item Despatched by Guaranteed Special Delivery") {
PRICE = "30.00";
}
else if (country == "ENGLAND & WALES" && service == "Standard £25.00 (Allow 15 Business Days before Despatch)" && delivery == "£0.00 - Item Despatched by First Class Post") {
PRICE = "25.00";
}
else {
PRICE = "00.00";
}

// update the fPRICE form element with the final PRICE value
fPRICE.value=PRICE;
fPRICE.text=PRICE;

// just for fun, pop up an alert with the PRICE in it
alert(PRICE);

}
</script>
<form name="testform">
Country:<br />
<select id="country">
<option value="ENGLAND & WALES" />ENGLAND & WALES
</select><br />
Service:<br />
<select id="service">
<option value="Express £50.00 (Allow 5 Business Days before Despatch)" />Express £50.00 (Allow 5 Business Days before Despatch)
<option value="Standard £25.00 (Allow 15 Business Days before Despatch)" />Standard £25.00 (Allow 15 Business Days before Despatch)
</select><br />
Delivery:<br />
<select id="delivery">
<option value="£5.00 - Item Despatched by Guaranteed Special Delivery" />£5.00 - Item Despatched by Guaranteed Special Delivery
<option value="£0.00 - Item Despatched by First Class Post" />£0.00 - Item Despatched by First Class Post
</select><br />
<input type="text" id="fPRICE"><br />
<input type="button" value="Check Price" onclick="void(setSelect())">
</form>


====snipsnip====

To really get a handle on how this is working, walk yourself slowly through the process the script will use (i.e. click the button, what are the select values, what does the script see, how did it know which form elements I was talking about, what matches what is selected, etc.) Have a fun weekend! :)

StupidScript

10:55 pm on Oct 22, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



See next message ... much better!

[edited by: StupidScript at 11:10 pm (utc) on Oct. 22, 2004]

StupidScript

11:10 pm on Oct 22, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Last thought:
====snipsnip====
<script type="text/javascript" language="javascript">
function setSelect() {

// set local variables to reference form elements
coun=document.getElementById("country");
serv=document.getElementById("service");
deli=document.getElementById("delivery");
fPRICE=document.getElementById("fPRICE");

// get the numbers to add up the PRICE
// (country adds more money for further away)
country=Number(coun.value);
service=Number(serv.value);
delivery=Number(deli.value);

// check what was selected, and set the PRICE variable
PRICE = country + service + delivery + ".00";

// update the fPRICE form element with the final PRICE value
fPRICE.value=PRICE;
fPRICE.text=PRICE;

// just for fun, pop up an alert with the PRICE in it
alert(PRICE);

}
</script>
<form name="testform">
Country:<br />
<select id="country">
<option value=0 />ENGLAND & WALES
<option value=5 />IRELAND
<option value=10 />SCOTLAND
</select><br />
Service:<br />
<select id="service">
<option value=50 />Express £50.00 (Allow 5 Business Days before Despatch)
<option value=25 />Standard £25.00 (Allow 15 Business Days before Despatch)
</select><br />
Delivery:<br />
<select id="delivery">
<option value=5 />£5.00 - Item Despatched by Guaranteed Special Delivery
<option value=0 />£0.00 - Item Despatched by First Class Post
</select><br />
<input type="text" id="fPRICE"><br />
<input type="button" value="Check Price" onclick="void(setSelect())">
</form>


====snipsnip====

Since you're just figuring a price, why not add the values instead of doing all the if/else's?

Cheers.

mangotude

10:36 pm on Oct 27, 2004 (gmt 0)

10+ Year Member



Hi,

Thanks for the scripts. I took some time to revise not just the site and code, but my pricing structures and procedures. As a result, things are much simpler and easier.

Thanks again for your help. Greatly appreciated.

StupidScript

7:34 pm on Oct 28, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Happy to do it. And I'm glad to hear that things are going well.
:)