Javascript Wizard Needed

[benos]

I spent forever chopping on these pages, and finally realized I just don't know enough about javascript to go any further.

I have descriptions of the problem on the pages of the two test pages below.

In a nutshell, the first page works as intended - both the Press drop-down menu and the Strong Mount "Qty: box" pass my store's sku (by clicking Add to Cart, once) to the shopping cart's checkout page:

http://www.brianenos.com/store/dillon-dbl-drop-test.html

But on the second page, I can't get an additional drop-down menu (in the same form tag) to pass its sku to the cart:

http://www.brianenos.com/store/dillon-dbl-drop-test1.html

(I left the html with "one version" of my attempted javascript/html hacks.)

I'm not sure if its even possible to get both drop-downs to work in the same form tag, the way the javascript was originally written.

But if it could be made to work, I could make a lot of prospective reloader's happy with some new pages I'm working on. (Kind of a - "without doing much research on your won - if you trust me, buy a 550 with everything else you need to start reloading" - with one click, deal.

Thanks in advance for any leads.

be

[D.Hayden]

I never use more than one form tag... so that shouldn't be a problem.

I can't figure out what you're looking for however..

When you select the dropdownlist you want it to... ??

[ChuckS]

Brian,

Thanks! This was just the sort of diversion that I needed tonight. I got it working for you. I will email the file to you. You seemed to be trying to do 2 documents at once. I simplified the form and the onsubmit handler and the script just generate simple name value pairs. I am pretty tired so take a look at the hacked code.

Later,

Chuck

[benos]

That's AWESOME! Thanks Chuck!!!!

That's going to revolutionize my current store, as well as pave the way for some new store pages I'm working on.

The only thing left would be to get the Die drop-down menu to "select itself" - to match the Presses' selected caliber. In other words: The customer selects the caliber for the press, say 9mm, then the Die menu auto-selects to 9mm. I'll be tap dancing down the street if someone can figure out how to make that work.

I uploaded your working page, with a little more detail on the above.

http://www.brianenos.com/store/dillontest2.html

Thanks again Chuck,

be

[D.Hayden]

That's AWESOME! Thanks Chuck!!!!

The only thing left would be to get the Die drop-down menu to "select itself" - to match the Presses' selected caliber. In other words: The customer selects the caliber for the press, say 9mm, then the Die menu auto-selects to 9mm. I'll be tap dancing down the street if someone can figure out how to make that work.

Thanks again Chuck,

be

Brian, that should be pretty easy, but I think you'd need to:

1) Always have the caliber selections the same ordinal value (that's risky)

2) Make the values in the presses, be like: 'K12015,14406" but that would probably be require lots of other 'cart' changes

3) Have a hidden look up table somewhere in the page to find the match, and then just add an event handler to the first dropdownlist

[John Heiter]

Brian,

Make the caliber choice radio buttons instead of a drop down and the auto population of the dies and shell plates becomes pretty easy using javascript and CSS. I'll shoot you some sample code and am available to assist if you need.

John

[benos]

Brian,

Make the caliber choice radio buttons instead of a drop down and the auto population of the dies and shell plates becomes pretty easy using javascript and CSS. I'll shoot you some sample code and am available to assist if you need.

John

Thanks John. I want to avoid radio buttons for press, die, or case gage choices, however, because it just makes the page too big and bloated looking. Go to Dillon's website and try to order just a 550, and you'll see what I mean. And that page is just the first page (pisols) - there are 3 more just like it. (And then try to find a 550 caliber conversion.) That was my original hurdle to building my press and caliber conversion pages they way they are now - getting the drop-down's to pass the sku.

be

Brian, that should be pretty easy, but I think you'd need to:

1) Always have the caliber selections the same ordinal value (that's risky)

2) Make the values in the presses, be like: 'K12015,14406" but that would probably be require lots of other 'cart' changes

3) Have a hidden look up table somewhere in the page to find the match, and then just add an event handler to the first dropdownlist

I don't think, because of the way the cart's database must be formatted, that those would be options for me.

But thanks for thinking about it for me.

be

[D.Hayden]

The lookup table will work.. you just need the pairs setup in a function or XML island like:

K12015 = 14406

K12017 = 14405

or whatever the corresponding die set would be. basically just so the Java Script can find which one to select. You could probably do it by the text alone in Press drop down - look for 9MM in the other dropdown..

If you have another source of the matchups, there may be other options.

There's always so many ways to do stuff with JScript and HTML.

[benos]

After playing around building test pages some more, I think we should pull the plug on thinking about this any more for now. It's just going to get too complicated. Because, for example, a common 550 press order is for a 550 in 9mm/38 Super (the same press loads both calibers). So it will be impossible for the Die drop down menu to determine what dies "it should select." And I don't want to make the separate sku's for a 9mm and a 38 Super press, cause that would confuse the hell out of the first time Dillon shopper. Add the Case Gage consideration to the above example - and it's just never going to work.

I'm sorry for causing the extra time wasting on this.

But I'm still super-excited about the new javascript and an form html Chuck came through with - I've already massively improved the ordering sensibility of my current 550 store page, and I should be uploading the new versions a bit later.

Thanks to everyone!

be

[robomanusa]

<HTML><HEAD>
<TITLE>your-title-here</TITLE>
<META name=description content=Cascading Menu>

<META content=history name=save>
<STYLE>.saveHistory {
BEHAVIOR: url(#default#savehistory)
}
</STYLE>


<script language=JavaScript>

v=false;

</SCRIPT>

<script language=JavaScript1.1>

if (typeof(Option)+"" != "undefined") v=true;

</SCRIPT>

<script language=JavaScript>

if(v){a=new Array(22);}

function getFormNum (formName) {
var formNum =-1;
for (i=0;i<document.forms.length;i++){
	tempForm = document.forms[i];
	if (formName == tempForm) {
		formNum = i;
		break;
	}
}
return formNum;
}

function jmp(form, elt)
// The first parameter is a reference to the form.
{
if (form != null) {
	with (form.elements[elt]) {
		if (0 <= selectedIndex)
			location = options[selectedIndex].value;
	}
}
}

var catsIndex = -1;
var itemsIndex;

if (v) { 
function newCat(){
catsIndex++;
a[catsIndex] = new Array();
itemsIndex = 0;
}

function O(txt,url) {
a[catsIndex][itemsIndex]=new myOptions(txt,url);
itemsIndex++;
}

function myOptions(text,value){
this.text = text;
this.value = value;
}

// fill array here

newCat();   //option1
O("option1-1","11");
O("option1-2","12");
O("option1-3","13");
newCat();   //option2
O("option2-1","21");
O("option2-2","22");
O("option2-3","23");
newCat();   //option3
O("option3-1","31");
O("option3-2","32");
O("option3-3","33");
// end fill array
} 



function relate(formName,elementNum,j) {
if(v){
	var formNum = getFormNum(formName);
	 if (formNum>=0) {
		formNum++; // reference next form, assume it follows in HTML
		with (document.forms[formNum].elements[elementNum]) {
			for(i=options.length-1;i>0;i--) options[i] = null; // null out in reverse order (bug workarnd)
			for(i=0;i<a[j].length;i++){
				options[i] = new Option(a[j][i].text,a[j][i].value);
			}
			options[0].selected = true;
		}
	}
}
else {
	jmp(formName,elementNum);
}
}


function IEsetup(){
if(!document.all) return;
IE5 = navigator.appVersion.indexOf("5.")!=-1;
if(!IE5) {
	for (i=0;i<document.forms.length;i++) {
		document.forms[i].reset();
	}
}
}

window.onload = IEsetup;


</SCRIPT>

</HEAD>
<BODY bgColor=#ffffff>
<CENTER>

<TABLE bgColor=#FFFFFF border=1 cellPadding=0 cellSpacing=0 bordercolor=#000000>
<TR><TD>

<TABLE bgColor=#FFFFFF border=0 cellPadding=4 cellSpacing=2>
 <TBODY>
 <TR>
<TD vAlign=top>Selection1</TD>
  <TD vAlign=top>
  <FORM action=http://yourdomain.com/pass_to_handler method=post name=f1
  onsubmit="return false;">
  <SELECT class=saveHistory id=m1 name=m1 onchange=relate(this.form,0,this.selectedIndex)>

	<option value="1">option1</option>
<option value="2">option2</option>
<option value="3">option3</option>


	</SELECT>
	<INPUT onclick=jmp(this.form,0); type=submit value=Go>
  </FORM></TD>
  </TR>
<TR>
<TD vAlign=top>Selection2</TD>
  <TD vAlign=top>
  <FORM action=http://yourdomain.com/pass_to_handler method=post name=f2
  onsubmit="return false;">
  <SELECT class=saveHistory id=m2 name=m2 onchange=jmp(this.form,0)>

	<option value="11">option1-1</option>
<option value="12">option1-2</option>
<option value="13">option1-3</option>



	</SELECT>
	<INPUT onclick=jmp(this.form,0); type=submit value=Go>
	<INPUT name=baseurl type=hidden value=http://your-domain.com>
</FORM></TD></TR>
</TBODY></TABLE>
</TD></TR></TABLE>
</CENTER></BODY></HTML>

prefilling based on selections with 3 choices each from the first selection menu

[benos]

Thanks Nik - I saved that for future reference. Cool stuff.

be