#68 ✓not_for_core
Luke Stokes

Safari, click observer and submit

Reported by Luke Stokes | May 1st, 2008 @ 09:56 PM

This is an interesting one that jdalton in #prototype helped me work around and asked me to submit a ticket for. It's not cross browser, so it probably isn't a high priority... but hopefully it will be fixed in future versions.

Event.observe(window, 'load', function() {
	// hijack the submit buttons to clear out our state and zip values
	Event.observe('cartCheckout', 'click', function(e){
		$('subCountry_' + $F('country')).value = "";
		$('zipOrPostalCode').value = "";
	});
	// if they submit the form with blank state and zip values, then go ahead and submit the form,
	// otherwise stop the form submit and do the shipping rate calculation.
	Event.observe('shoppingCart', 'submit', function(e){
		if ($F('subCountry_' + $F('country')) != "" || $F('zipOrPostalCode') != "") {
			// stop the form submit
			Event.stop(e);
			// validate the zip code here
			estimateShippingAndTaxes();
		}
	});
});

The problem:

#cartCheckout is an input of type image. When a normal text input on the #shoppingCart form gets submitted via htting Enter, the "click" method on #cartCheckout somehow gets run (but only in Safari, not in IE or FF).

The workaround fix:

Replace the image input with a normal image and add the onclick to that.

	 $('cartCheckout').replace('<a href="#"><img id="cartCheckoutReplaced" src="$baseUrl/template-resources/images/drstore/btn_checkout.png"/></a>');	
	// hijack the submit buttons to clear out our state and zip values
	Event.observe('cartCheckoutReplaced', 'click', function(e){
		$('subCountry_' + $F('country')).value = "";
		$('zipOrPostalCode').value = "";
		$('shoppingCart').submit(); 
	});

note: the tag around the image isn't really needed, but I added it because I didn't want to bother with changing the mousepointer type on hover.

Hope that helps someone.

Thanks!

Comments and changes to this ticket

  • Tobie Langel

    Tobie Langel May 1st, 2008 @ 11:09 PM

    • State changed from “new” to “invalid”
  • Tobie Langel

    Tobie Langel May 1st, 2008 @ 11:10 PM

    Can you kindly clarify what the issue is. This is really unclear. Thanks!

  • Luke Stokes

    Luke Stokes May 1st, 2008 @ 11:18 PM

    Sorry, it's a rather specific issue so it's difficult to explain.

    Basically the "click" method of an image input is getting called when a form is submitted, even if the input wasn't clicked to submit the form. If the user is in a text input and they hit enter, Safari for some reason calls the "click" observer method on the image input before calling the form's submit.

    Does that help?

  • Juriy Zaytsev

    Juriy Zaytsev May 1st, 2008 @ 11:40 PM

    • State changed from “invalid” to “new”

    Luke,

    does this only happen with "type=image" controls?

    Which version of Safari?

  • Luke Stokes

    Luke Stokes May 2nd, 2008 @ 12:02 AM

    Safari: 3.1.1 (525.17)

    I just ran a test with a submit input and it appears to "click" the submit button (there's a slight animation) when the enter key is pressed.

    To reproduce this, you may need a form that only has a single input text field on it.

  • Tobie Langel

    Tobie Langel June 16th, 2008 @ 02:15 AM

    • State changed from “new” to “not_for_core”

    That's too app specific imho. Clausing as not_for_core.

Please Sign in or create a free account to add a new ticket.

With your very own profile, you can contribute to projects, track your activity, watch tickets, receive and update tickets through your email and much more.

New-ticket Create new ticket

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile ยป

The Prototype JavaScript library.

Shared Ticket Bins

Pages