PDA

Click to See Complete Forum and Search --> : Multiple Dynamic Update Prob :(

amaranth
01-01-2003, 10:51 PM
Hi, I have a problem that is a little advanced for me (beginner) and would love some help!

I am using Javascript to dynamically update two fields when the user makes a selection from a drop-down list. There are also two buttons on the form that should perform the same task when clicked.

The drop-down list works, but the buttons don't. If this is an easy solution, please write :)

My code is below, but to quickly see the problem, please go to this web address where an active snippet is located: http://www.ascensionresume.com/ArrayTest2.html


**********Code******************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<SCRIPT language=javascript>

/* ------------------------Begin Script--------------------------------------------*/
var checkedButton=-1; // No button is checked by default
var wcheckedButton=-1; // No button is checked by default
var i;
var j;
var webPrice;

function checkButton(buttonId) { //Example if no buttons are checked, and button 1 is then checked.
i++


if (checkedButton!=-1) {
document.images["resume_" + checkedButton].src="ButtonUp.gif"; //resume_1 image = ButtonUp.gif (if checkedbutton not equal to -1)
webPrice=0;
}

if (checkedButton!=buttonId) {
document.images["resume_" + buttonId].src="ButtonDwn.gif"; //resume_1 image = ButtonDwn.gif
checkedButton=buttonId;
i=0;
webPrice=1; //checkedButton = 1 (this will now make sure first statement is used, and that resume_1 is unchecked when resume_2 is checked.)
}

if (checkedButton==buttonId && i==2) {
document.images["resume_" + buttonId].src="ButtonDwn.gif";
i=0;
webPrice=1;
}
}

function wcheckButton(buttonId) { //Example if no buttons are checked, and button 1 is then checked.
j++
if (wcheckedButton!=-1) {
document.images["web_" + wcheckedButton].src="ButtonUp.gif"; //resume_1 image = ButtonUp.gif (if checkedbutton not equal to -1)
webPrice=0;
}

if (wcheckedButton!=buttonId) {
document.images["web_" + buttonId].src="ButtonDwn.gif"; //resume_1 image = ButtonDwn.gif
wcheckedButton=buttonId; //checkedButton = 1 (this will now make sure first statement is used, and that resume_1 is unchecked when resume_2 is checked.)
j=0;
webPrice=1;
}

if (checkedButton==buttonId && i==2) {
document.images["resume_" + buttonId].src="ButtonDwn.gif";
j=0;
webPrice=1;
}
}
/* ------------------------End Script--------------------------------------------*/

/* ------------------------Begin Script--------------------------------------------*/
pricesArray = new Array (
new Array(0,0), //none
new Array(100,50), //res new, web new
new Array(200,100) //res old, web old
);

function setPrices(ArrayNumber,ValueInArray) {
var position = ArrayNumber.options[ArrayNumber.selectedIndex].value;
ValueInArray.LeftValue.value = pricesArray[position][0];
ValueInArray.RightValue.value = pricesArray[position][1];

if (webPrice==1) {
ValueInArray.WLeftValue.value = pricesArray[position][0]*.5;
ValueInArray.WRightValue.value = pricesArray[position][1]*.5;
}
else {
ValueInArray.WLeftValue.value = pricesArray[position][0];
ValueInArray.WRightValue.value = pricesArray[position][1];
}
ValueInArray.Total.value = parseFloat(ValueInArray.LeftValue.value) + parseFloat(ValueInArray.RightValue.value) + parseFloat(ValueInArray.WRightValue.value) + parseFloat(ValueInArray.WLeftValue.value);
return true;
}
/* ------------------------End Script--------------------------------------------*/


</SCRIPT>

<STYLE type=text/css>INPUT#two {
BORDER-RIGHT: #ffffff 0px solid; BORDER-TOP: #ffffff 0px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; BORDER-LEFT: #ffffff 0px solid; COLOR: green; BORDER-BOTTOM: #ffffff 0px solid; BACKGROUND-COLOR: #ffffff
}
SELECT {
FONT-SIZE: 14px; COLOR: #000000; BACKGROUND-COLOR: #eee1e1
}
BODY {}

</STYLE>
</HEAD>

<BODY>

<FORM name=resumeForm>
<SELECT onchange="return setPrices(this,this.form);">
<OPTION value=0 selected>Experience Level:</OPTION>
<OPTION value=1>Student</OPTION>
<OPTION value=2>Mid Level</OPTION>
</SELECT>
Total:<INPUT id=two readOnly size=2 name=Total><BR><BR><BR><BR>
<INPUT type=hidden name=valueToSubmit>
<IMG onclick="checkButton(1);" height=15 alt="" src="ButtonUp.gif" width=15 border=0 name=resume_1>New Resume: <INPUT id=two readOnly size=2 name=LeftValue><BR>
<IMG onclick="checkButton(2);" height=15 alt="" src="ButtonUp.gif" width=15 border=0 name=resume_2>Old Resume: <INPUT id=two readOnly size=2 name=RightValue><BR>
<BR>
<BR>
<IMG onclick="wcheckButton(1);" height=15 alt="" src="ButtonUp.gif" width=15 border=0 name=web_1>New Web Resume: <INPUT id=two readOnly size=2 name=WLeftValue><BR>
<IMG onclick="wcheckButton(2);" height=15 alt="" src="ButtonUp.gif" width=15 border=0 name=web_2>Old Web Resume: <INPUT id=two readOnly size=2 name=WRightValue><BR>
<BR>
<INPUT onclick=submitForm() type=button value=Submit>
</FORM>

</BODY>

</HTML>
khalidali63
01-02-2003, 12:08 AM
By taking a quick look at your code, here is the obvious problem

<INPUT onclick=submitForm() type=button value=Submit>

1.the function submitForm() is not defined anywhere in the code.
therefore delete the whole thing "onclick=submitForm()".
2. and it will be allot better if you put your code in qoutes, by not doing that you are opening door to some in consitent results.

I hope it helps

Khalid
amaranth
01-02-2003, 12:32 PM
Didn't realise I left that in there, but that isn't the problem I'm trying to tackle at the moment. I'm still trying to figure out how to make the numbers change when I select one of the radio buttons (my fault for simply saying button).
khalidali63
01-02-2003, 01:51 PM
I have made few changes to make it as close to what you said it should be,
Since I don't have the info about all of your spec,that what exactly it should I have left allots of room for changes..:-)

let me know what else you require in it to be added

Khalid
below is the code


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta name="generator" content="HTML Tidy, see www.w3.org">
<meta http-equiv="Content-Type" content=
"text/html; charset=windows-1252">
<script type="text/javascript" language="javascript">
/* ------------------------Begin Script--------------------------------------------*/
var checkedButton=-1; // No button is checked by default
var wcheckedButton=-1; // No button is checked by default
var nrVal=0; //new resume value
var orVal=0; //old resume value
var valObj; //objects name where prices will be updated
var i;
var j;
var webPrice;

function checkButton(buttonId) { //Example if no buttons are checked, and button 1 is then checked.
i++


if (checkedButton!=-1) {
document.images["resume_" + checkedButton].src="ButtonUp.gif"; //resume_1 image = ButtonUp.gif (if checkedbutton not equal to -1)
webPrice=0;

}

if (checkedButton!=buttonId) {
document.images["resume_" + buttonId].src="ButtonDwn.gif"; //resume_1 image = ButtonDwn.gif
checkedButton=buttonId;
i=0;
updatePrice();
webPrice=1; //checkedButton = 1 (this will now make sure first statement is used, and that resume_1 is unchecked when resume_2 is checked.)
}

if (checkedButton==buttonId && i==2) {
document.images["resume_" + buttonId].src="ButtonDwn.gif";
i=0;

webPrice=1;
}
}

function wcheckButton(buttonId) { //Example if no buttons are checked, and button 1 is then checked.
j++
if (wcheckedButton!=-1) {
document.images["web_" + wcheckedButton].src="ButtonUp.gif"; //resume_1 image = ButtonUp.gif (if checkedbutton not equal to -1)

webPrice=0;
}

if (wcheckedButton!=buttonId) {
document.images["web_" + buttonId].src="ButtonDwn.gif"; //resume_1 image = ButtonDwn.gif
wcheckedButton=buttonId; //checkedButton = 1 (this will now make sure first statement is used, and that resume_1 is unchecked when resume_2 is checked.)
j=0;
webPrice=1;
}

if (checkedButton==buttonId && i==2) {
document.images["resume_" + buttonId].src="ButtonDwn.gif";
j=0;

webPrice=1;
}
}
/* ------------------------End Script--------------------------------------------*/

/* ------------------------Begin Script--------------------------------------------*/
pricesArray = new Array (
new Array(0,0), //none
new Array(100,50), //res new, web new
new Array(200,100) //res old, web old
);

function setPrices(ArrayNumber,ValueInArray) {
valObj = ValueInArray;
var position = ArrayNumber.options[ArrayNumber.selectedIndex].value;
ValueInArray.LeftValue.value = pricesArray[position][0];
ValueInArray.RightValue.value = pricesArray[position][1];

if (webPrice==1) {
ValueInArray.WLeftValue.value = pricesArray[position][0]*.5;
ValueInArray.WRightValue.value = pricesArray[position][1]*.5;
}
else {
ValueInArray.WLeftValue.value = pricesArray[position][0];
ValueInArray.WRightValue.value = pricesArray[position][1];
}

/*alert("ValueInArray.LeftValue.value ="+ValueInArray.LeftValue.value+
"\nValueInArray.RightValue.value ="+ValueInArray.RightValue.value+
"\nValueInArray.WLeftValue.value ="+ValueInArray.WLeftValue.value+
"\nValueInArray.WRightValue.value = "+ValueInArray.WRightValue.value);*/

nrVal = parseInt(ValueInArray.WLeftValue.value);
orVal = parseInt(ValueInArray.WRightValue.value);

ValueInArray.Total.value = parseFloat(ValueInArray.LeftValue.value) +
parseFloat(ValueInArray.RightValue.value) +
parseFloat(ValueInArray.WRightValue.value) +
parseFloat(ValueInArray.WLeftValue.value);

return true;
}

function updatePrice(){
valObj.WLeftValue.value = parseFloat(nrVal/2);
valObj.WRightValue.value = parseFloat(orVal/2);
}
/* ------------------------End Script--------------------------------------------*/
</script>
<style type="text/css">
INPUT#two {
BORDER-RIGHT: #ffffff 0px solid; BORDER-TOP: #ffffff 0px solid; FONT-WEIGHT: bold; FONT-SIZE: 14px; BORDER-LEFT: #ffffff 0px solid; COLOR: green; BORDER-BOTTOM: #ffffff 0px solid; BACKGROUND-COLOR: #ffffff
}
SELECT {
FONT-SIZE: 14px; COLOR: #000000; BACKGROUND-COLOR: #eee1e1
}
BODY {}
</style>
<title>
</title>
</head>
<body>
<form name="resumeForm">
<select name="listBox" onchange="return setPrices(this,this.form);">
<option value="0" selected>
Experience Level:
</option>
<option value="1">
Student
</option>
<option value="2">
Mid Level
</option>
</select> Total: <input id="two" readonly size="2" name="Total"><br>
<br>
<br>
<br>
<input type="hidden" name="valueToSubmit"><img onclick=
"checkButton(1);" height="15" alt="" src="ButtonUp.gif" width="15"
border="0" name="resume_1">New Resume: <input id="two" readonly size=
"2" name="LeftValue"><br>
<img onclick="checkButton(2);" height="15" alt="" src="ButtonUp.gif"
width="15" border="0" name="resume_2">Old Resume: <input id="two"
readonly size="2" name="RightValue"><br>
<br>
After a 'type' is selected from the drop-down menu and a button is
selected above, the prices below should automatically be slashed by
50%<br>
<br>
<img onclick="wcheckButton(1);" height="15" alt="" src="ButtonUp.gif"
width="15" border="0" name="web_1">New Web Resume: <input id="two"
readonly size="2" name="WLeftValue"><br>
<img onclick="wcheckButton(2);" height="15" alt="" src="ButtonUp.gif"
width="15" border="0" name="web_2">Old Web Resume: <input id="two"
readonly size="2" name="WRightValue"><br>
<br>
<input onclick="submitForm()" type="button" value="Submit">
</form>
</body>
</html>
amaranth
01-02-2003, 03:31 PM
Thanks for your help khalidali63!