Clicking submit button is not submitting the form

Click the blue Search Now button on this page, and it does not submit the form:
http://beta.philbansner.com/postal-history.htm

HTML:
<input class="submitForm" type="submit" value="Search Now" />

I even added some Javascript to try to capture the event, and that isn't working either:
$('.submitForm').on('click', function(){
      console.log('x');
});

I am using iScroll (http://iscrolljs.com/) on this site, is that interfering? The other clickable elements on the page seem to be OK.

I'm also having issues with the <select> menus. But for some reason, this experienced web developer can't even seem to make a form submit. :(

Thank you!
Brad BansnerWeb DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Brad BansnerWeb DeveloperAuthor Commented:
I should note that hitting the "return" key within a text box does not submit the form, either.
0
Snarf0001Commented:
It is iScroll.  Line 1593, is calling stopPropagation on the click event.  It actually is injecting itself into EVERYTHING on the page, since you have it wrapped on the #scrollContainer, which is surrounding everything.

Was that intentional?  Usually I've seen iscroll used for rotators and things like that, never wrapping an entire page.

Any details would be helpful.
0
Brad BansnerWeb DeveloperAuthor Commented:
Yes, I wrapped all the content in order to handle the main navigation. The only way to accurately track scroll position is with iscroll-probe.js. Especially on iPhone where you can't track scroll events until momentum scrolling stops. So its nice for that (and I've done that successfully on other sites), but it obviously messes with your other events.

I setup my wrapper to allow clicks:

var scroller=new IScroll('#scrollwrapper', {
	keyBindings:true,
	mouseWheel:true,
	click:true,
	probeType:3
});

Open in new window


So not sure why its stopping that, or stopping my form from submitting. There is a sentence with a clickable link:

If your county is not listed here, setup a Want List to be notified of new arrivals.

THAT one is working, so its not blocking all clicks?

If need be, I guess I'll have to abandon iScroll and live with a downgraded navigation of some kind. But I don't see why simple things such as clicking and <select> menus have to be avoided due to iScroll.

Thanks.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Snarf0001Commented:
Well, honestly I've had horrible issues with iscroll before.  Well, with plugins of any kind.
But if you have everything working the way you want, if you're not opposed to modifying the iscroll script, you can probably just bypass this issue by modifying the if condition on line 1592:

Change:
if ( !e._constructed ) {

Open in new window


to:
if ( !e._constructed && e.target.type != "submit" ) {

Open in new window


And that should let the submit button bypass.


But, you're going to have to help me on this, the main navigation seems to be a standard hamburger menu type of thing, what do you need to track scroll position for on that?  I see it just anchored to the top like a standard system.
Concerned that there will still be other problems you're going to encounter having iscroll in there, not to mention it's adding a hell of a lot of overhead for every interaction of the whole page.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Julian HansenCommented:
Not sure if this is useful but I noticed that if I use the console to insert an element immediately after <body> and before #scrollwrapper the buttons are clickable.

i.e
<body>
  <i></i>
     <div id="scrollwrapper">
           ...

Open in new window


This may just be a side effect of the console - but it might help to shed some light.
0
Brad BansnerWeb DeveloperAuthor Commented:
The only reason I am using iScroll is to make the main row of buttons "stick" to the top of the window when you scroll. I have used it for this purpose before, but not with a complex form like this, I guess.

I realize I can do this with standard Javascript. However, on iOS devices, there isn't any way (to my knowledge) to trigger momentum scroll events. You get an event trigger when momentum scrolling stops, but while the scrolling is taking place you get nothing. Therefore, the screen is typically messed up while that is happening, then you correct it afterwards.

Based on what you are saying, I should ditch iScroll for this website.

Main thing is I need to find a workaround for my code which (right now) changes the nav from position:absolute to position:relative, depending on the scroll position.

Thanks.
0
Julian HansenCommented:
The only reason I am using iScroll is to make the main row of buttons "stick" to the top of the window when you scroll.
You could probably achieve the same thing with position: fixed
0
Brad BansnerWeb DeveloperAuthor Commented:
Thanks for your help. I'm going to just ditch iScroll which will solve all of these problems. And just work on something else for the nav.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.