Granny's Programming Pearls
"inside of every large program is a small program struggling to get out"
JavaRanch.com/granny.jsp
The moose likes HTML, CSS and JavaScript and the fly likes Form Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Form "action" issue / javascript question" Watch "Form "action" issue / javascript question" New topic
Author

Form "action" issue / javascript question

Greg Smith
Greenhorn

Joined: Jul 07, 2008
Posts: 5
Hi - I'm brand-new here, and am hoping someone can help me with a HTML/javascript problem that has me stumped.

I�ve got an HTML page created in Dreamweaver that is designed to put a certain size t-shirt into a Shopping Cart (cart.php) via a form � where the user selects the shirt size from a List/Menu, and then hits an �add to cart� image to fire the form and send its parameters to the cart. Here is a URL to a bare-bones page that demonstrates the problem (with a debug popup that echos the product name):

http://www.missioninland.com/problem_demo2.html

In IE6 and IE7, everything works fine IF AND ONLY IF the user actually changes the value of the List/Menu from the default = Large to anything else, (or even back to Large after first changing it to something else) before hitting �add to cart�. If instead the user doesn�t touch the List/Menu (and thus accepts the default = Large), then when the user hits the �add to cart� � then it never adds the product to the cart � as though the javascript portion of the code is not running (except that I KNOW it is because I have an �alert� debug popup that passes the me value of the product).

In Firefox 2.0.0.15 and Safari 3.1.2, whether the user changes the value of the shirt size List/Menu selector or not - it never places the item correctly in the cart ... always shows an empty cart. The debug popups (which correctly pop up in IE6 and IE7) do not appear � and yes, I do have pop-ups enabled in both Firefox and Safari. It appears that the javascript code is not running � and I�m not sure why.

The relevant portions of the code are shown beneath my signature. Any suggestions? Your help is GREATLY appreciated!

Greg



[ July 07, 2008: Message edited by: Greg Smith ]

[ July 07, 2008: Message edited by: Greg Smith ]
[ July 07, 2008: Message edited by: Greg Smith ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61095
    
  66

Please be sure to use UBB code tags when posting code to the forums. Unformatted code is extremely hard to read and many people that might be able to help you will just move along. Please read this for more information.

You can go back and change your post to add code tags by clicking the .


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61095
    
  66

If you state that your page is xhtml, you need to use XHTML.

Inspect the following closely:
Greg Smith
Greenhorn

Joined: Jul 07, 2008
Posts: 5
Originally posted by Bear Bibeault:
If you state that your page is xhtml, you need to use XHTML.

Inspect the following closely:


I've stared and stared - and I don't see anything wrong. Putting a ";" after the get_selected_productname1() call has no effect. Can you please tell me what I'm missing?

I greatly/hugely appreciate your expert input!

[I just edited the code in my original post because I accidentally left off three lines at the bottom ... which are extremely relevent.]
[ July 07, 2008: Message edited by: Greg Smith ]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61095
    
  66

XHTML requires all attribute names to be lowercase.
Greg Smith
Greenhorn

Joined: Jul 07, 2008
Posts: 5
Thanks for the suggestion. I changed the "c" in "onChange" to a lower-case "c", and it really had no effect.

Do you see anything else obvious that could be causing it not to run in Firefox and Safari? Or that causes the javascript not to run correctly (and the form not to pass the parameters)?

Again, I greatly appreciate your input ...
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61095
    
  66

Do you have Firebug for Firefox installed?

Debugging JavaScript without it is like trying to type with boxing gloves.

Loading your page into Firefox with Firebug enabled immediately shows your problem. (Your reference to the form is invalid).
Greg Smith
Greenhorn

Joined: Jul 07, 2008
Posts: 5
Here is a much more simplified demo and explanation of what I�m trying to do � and also what else I learned myself last night. Using Firebug helped me at least figure out WHERE the problem is - but I still am stumped as to how to fix it. [I do have it work in IE6 and IE7, but not in FF or Safari]

The ultimate goal is for the user to use the List/Menu to pick a size of a t-shirt that will be displayed via a photo above the List Menu. The javascript code takes the name of the shirt (such as �SEU-�) and appends a size character to the end of it � so that the possible results are SEU-S (for small), SEU-M for medium, SEU-L, and SEU-XL. You can tell that it works fine if and only if the page you are directed to after hitting �add to cart� tells you that what you just selected has been added to the cart. It is not working fine if it tells you �Sorry � your shopping cart is empty�.

I stripped pretty much everything out of yesterday�s code last night, and placed at the new URL below what I have left that demonstrates the problem:

http://www.missioninland.com/simple_demo.html

In IE6 and IE7, everything works fine � no problems (that I know of anyway). The debug popups in the javascript function always pop-up, and the correct current value of the List/Menu is echoed to me. Hitting the �add to cart� button always causes the correct shirt descriptor (SEU-S, SEU-M, SEU-L, or SEU-XL) to be echoed, and passed successfully into the shopping cart. In Firefox 2.0.0.15 and Safari 3.1.2, it does not work at all � and I�m stumped! [You can see in the test cases below how the problem surfaces.]

There are just two test cases to know that this works:

Test Case 1 � Accepting List/Menu default = Large size shirt
0) Clear your browser cache; make sure pop-ups are enabled in your browser
1) Call up the page http://www.missioninland.com/simple_demo.html
2) You should immediately see (and do see in IE6 and IE7) the first (forced) call to the get_selected_productname1() function cause a pop-up to occur with the default shirt size �SEU-L� to be displayed to you. Hit �Okay� on the pop-up to continue.
3) Do not touch the List/Menu (which means you accept the default size = Large), and only hit the �add to cart� button.
4) a) In IE6 and IE7, what you see next is that the Large Shirt (SEU-L) is correctly added to the shopping cart � and you are redirected to the shopping cart page that shows it actually added. This means success.
4) b) In Firefox and Safari, something goes wrong (see Firebug results below). You never see the pop-up from 2) above, and when you hit the �add to cart� button � it does not successfully pass the form parameters to the cart � which you know because the cart says �Sorry � Your shopping cart is empty�.

Test Case 2 � Changing List/Menu to a different size shirt
5) Clear your browser cache; make sure pop-ups are enabled in your browser
6) Call up the page http://www.missioninland.com/simple_demo.html
7) You should immediately see (and do see in IE6 and IE7) the first (forced) call to the get_selected_productname1() function cause a pop-up to occur with the default shirt size �SEU-L� to be displayed to you. Hit �Okay� on the pop-up to continue.
8) This time change the value of the List/Menu to something like �Medium�. You immediately notice (in IE6 and IE7) that the pop-up box echoes the new shirt name (SEU-M) � hit okay on the pop-up, then hit the �add to cart� button.
9) a) In IE6 and IE7, what you see next is that the selected shirt (Medium in this case) is correctly added to the shopping cart � and you are redirected to the shopping cart page that shows it actually added. This means success.
9) b) In Firefox and Safari, again something goes wrong (see Firebug results below). You never see either of the pop-ups, and when you hit the �add to cart� button � it does not successfully pass the form parameters to the cart � which you know because the cart says �Sorry � Your shopping cart is empty�.

Debug Results from Firebug
So the problem is that everything works fine in IE6 and IE7, but does not work at all in Firefox and Safari. I installed Firebug into Firefox, and the error it gives me is that

Document.form1 has no properties

And it points me to this line of code on line 9.

var x = document.form1.finalsize.selectedIndex;

I�ve been staring at this for a while, and I cannot figure out how to fix this. If you or anyone has any ideas, I would be exceptionally grateful � as I�m completely stumped. Thanks in advance!

Greg

Eric Pascarello
author
Rancher

Joined: Nov 08, 2001
Posts: 15376
    
    6
Really simple - This is your problem:



Hopefully you can figure it out.

Eric
[ July 08, 2008: Message edited by: Eric Pascarello ]
Greg Smith
Greenhorn

Joined: Jul 07, 2008
Posts: 5
Changing "SE-U" to "form1" works 100% - THANK YOU for pointing out where I was going wrong!!! It is amazing what a fresh pair of eyeballs can do for a problem ... it seems very obvious to me now. Thanks again! Here is what the fix looks like:

http://www.missioninland.com/simple_demo2.html
[ July 08, 2008: Message edited by: Greg Smith ]
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Form "action" issue / javascript question