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: <!-- m --><a class="postlink" href="http://www.ascensionresume.com/ArrayTest2.html">http://www.ascensionresume.com/ArrayTest2.html</a><!-- m -->
**********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=http://www.webdeveloper.com/forum/archive/index.php/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>
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: <!-- m --><a class="postlink" href="http://www.ascensionresume.com/ArrayTest2.html">http://www.ascensionresume.com/ArrayTest2.html</a><!-- m -->
**********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=http://www.webdeveloper.com/forum/archive/index.php/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>