Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Submit button doesn't submit in IE8

Posted on 2011-05-04
26
Medium Priority
?
947 Views
Last Modified: 2012-05-11
I have a form that submits fine from Firefox and Safari. In IE8 nothing occurs when the submit button is clicked.

The form is located here:
http://aeronautical.com/rfq/
0
Comment
Question by:befidled
  • 10
  • 10
  • 6
26 Comments
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35695123
This is a shot in the dark, but easy to test. Try either <input type="button"... or <button type="button".. instead of <input type="submit" for the submit button element.

http://nickcowie.com/2006/the-button-element-and-ie/
0
 
LVL 1

Author Comment

by:befidled
ID: 35695152
using type="button" but it didn't change anything.

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35695184
Sorry if I'm being dense. This is your submit button currently. Are you saying you changed it to type="button" and it did not fix the problem?

<button id="submit-button-replacement" type="submit" style="margin-left: 15px;">Submit</button>
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 10

Expert Comment

by:hosneylk
ID: 35695241
why not use an input element instead?

e.g.

<input style="MARGIN-LEFT: 15px" id=submit-button-replacement type="submit">Submit</input>

Open in new window

0
 
LVL 10

Expert Comment

by:hosneylk
ID: 35695251
oops. it should be this
<input style="MARGIN-LEFT: 15px" id=submit-button-replacement type="submit" value="Submit"></input>

Open in new window

0
 
LVL 1

Author Comment

by:befidled
ID: 35695253
Initially I used input but it didn't work either.

I've used both:

<button id="submit-button-replacement" type="submit" style="margin-left: 15px;" >Submit</button>

and

<input id="submit-button-replacement" style="margin-left: 15px;" type="submit" value="Submit" />
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35695405
>>I've used both:

But you are still using type="submit" for both instead of type="button". Try this.

<button id="submit-button-replacement" type="button" style="margin-left: 15px;" onclick="document.forms.freeform.submit();" >Submit</button>

The article I cited says this: "Still this IE idio­syn­crasy can be avoided by either using the same details in value and the inner­text or ignor­ing the details provided by the but­ton. Using <but­ton type=“button”> to trig­ger javas­cript is not affected by this problem."
0
 
LVL 1

Author Comment

by:befidled
ID: 35695439
I'm doing javascript validation and if I add the onclick="document.forms.freeform.submit();" javascript call, it bypasses all of my validation script.

Does anybody know what causes this problem?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35695483
That doesn't make sense-- type="submit" does exactly the same thing as onclick="document.forms.freeform.submit();" Where are you stopping the submission of the form to run a validation routine. I don't see onsubmit="validate()" or onclick="validate()" anywhere in the form.

0
 
LVL 1

Author Comment

by:befidled
ID: 35707877
@tommyBoy: $("#freeform").validate({... is in the header.

When I try to use onclick="document.forms.freeform.submit();" it validates the page but then redirects to the homepage.

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35708071
Where do you want it redirected to? Does it work if you change the action in the form tag to the page you want to redirect to? Do you want it to just come back to the current page? If so, you can just enter # for the action value.

<form id='freeform' method="post" action="http://www.aeronautical.com/"  enctype="multipart/form-data" >

<form id='freeform' method="post" action="#"  enctype="multipart/form-data" >

I started to look at the all the external jquery files to try to find a workaround, but I'm simply not qualified to even decipher it.
0
 
LVL 1

Author Comment

by:befidled
ID: 35708880
To simplify things, I've totally removed the javascript validation however it is still not submitting.

I've created a test form here:
http://www.aeronautical.com/test/form-test/

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35709082
When you say it's not submitting, you mean in IE, correct? I tried in Chrome and it submitted. I tried in IE and it did not submit.

The link you provided goes to a page that has <input id="submit-button-replacement" style="margin-left: 15px;" type="button" value="Submit" /> for the submit button.

Can you replace the submit button markup for that page with this, and upload, so we can try that in IE?

<button id="submit-button-replacement" type="button" style="margin-left: 15px;" onclick="document.forms.freeform.submit();" >Submit</button>
0
 
LVL 1

Author Comment

by:befidled
ID: 35709550
@tommyboy: Ok, i've added your code but it's bypassing my javascript validation in Firefox and not just clicking to the homepage in IE8. The script is set up to perform server side validation as well however when submitted via IE8 the javascript submit that you provided bypasses that as well.

http://aeronautical.com/test/form-test/
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35709809
Obviously, the ajax add-on is very fussy when it comes to the type attribute that you put in the submit button. It's looking for type="submit" in order to move on to the validation routines. IE doesn't like type="submit" on this form. I don't know why. But it will submit with type="button". That much we have established. Maybe there is a way to force IE to accept a type="submit" but I don't know what it is. I don't understand how the ajax control takes control of the submission of the form.

You could:
Request Attention and try to get additional experts involved.
Close this question and open a new that is more specifically focused on the submit button itself and IE.
Look for tech support from the ajax control vendor.

I am sorry I could not find a solution, but at least I narrowed down the problem to the submit button.


0
 
LVL 10

Expert Comment

by:hosneylk
ID: 35710243
for the form action try removing the trailing slash ("/") in the url and enclose all values witihn quotations (")
0
 
LVL 10

Expert Comment

by:hosneylk
ID: 35710261
i.e.

<form id='freeform' method="post" action="http://www.aeronautical.com"  enctype="multipart/form-data" >

Open in new window

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35710497
@hosneylk,

I don't fully understand how the ajax add-on works, but somehow it intercepts the whole submit function, handles the validation, and builds the action value to redirect the page upon completion. The actual action that occurs is built at least partly from this hidden value:
 
<input type="hidden" name="return" value="test/thank-you" />

The form submits fine in all browsers except IE where it does not do anything when the submit button is clicked. The form would probably behave the same even if the action were set to "http://google.com".
0
 
LVL 10

Accepted Solution

by:
hosneylk earned 2000 total points
ID: 35710845
well something is causing the parsing of the form element to be malformed in IE8 or less. Because of this the form element is rendered in IE in the following manner:

<FORM id=freeform encType=multipart/form-data method=post action=http://www.aeronautical.com jQuery1304737448143="60"></FORM>

So I tried removing the trailing slash from the action URL and it seemed to work. At Least for me..

@befidled why don't you give it a try? @tommyBoy, you could try it out too.

And also by ajax control do you mean the jQuery Validate plugin?
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35710885
>>by ajax control do you mean the jQuery Validate plugin?

Is that all it is, a jQuery Validate plugin? This include is part of the validation process and it's got ajax written all over it.

http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js

I tried your suggestion and removed the trailing slash and the form did attempt to submit in IE8.

Here's another clue. I put the trailing slash back in and commented out this jquery include and once again, the form attempted to submit in IE8.

<!--<script type="text/javascript" src="http://www.aeronautical.com/_ui/js/jquery-1.4.2.min.js"></script>-->
0
 
LVL 10

Expert Comment

by:hosneylk
ID: 35710899
@tommyBoy.

yes it is a plugin for validations that uses the jQuery library, whch uses ajax of course. I wanted to know if that was what you were referring to.

So if my suggestion works I suppose it's ok?
0
 
LVL 1

Author Comment

by:befidled
ID: 35712778
@hosneylk: I'll give it a try today. thanks.
0
 
LVL 1

Author Comment

by:befidled
ID: 35713702
Ok, I've removed the trailing slash from action="http://www.aeronautical.com" so it is now at least validating at the server level.

Is there anything I can do at this point to invoke the jquery validation?

thanks,
brian
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 35713881
Clarify this for me please: If I'm getting this (screen shot) in IE8 when I click the submit button on your test page form, is that a result of jquery validation or server side validation?
validation.jpg
0
 
LVL 1

Author Comment

by:befidled
ID: 35716236
Thats a result of the server side validation.
0
 
LVL 1

Author Closing Comment

by:befidled
ID: 35779342
I changed the action per hosneylk's recommendation and in my test file it would bypass the jquery validation but still allow the server side validation. Oddly though, when I added it to the real file the jquery validation worked as it should.

So that was all I needed to do. Thanks for all of your help guys!

Brian
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Find out what you should include to make the best professional email signature for your organization.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

581 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question