JQuery Forms ajaxSubmit issue with Internet Explorer
Hi there!
I have a very simple piece of test code using JQuery Forms plugin. In Chrome and Firefox it works exactly as intended -- I type in a name, push the submit button, and the form is submitted behind the scenes to the action page on the server, which returns a value, which gets displayed beneath the form, and then the form slides out of view.
In Internet Explorer 9 (and I used developer tools to force it to 7, 8, and 9 with identical results), when I push the submit button, it just submits like a normal form and takes me to the action page. No errors, no indication of what's wrong... it just doesn't stay on the page.
I've been messing with this since Friday morning and it's driving me crazy. Any assistance would be very much appreciated. Thanks!
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
- <script src="http://malsup.github.com/jquery.form.js"></script>
- <script language="javascript" type="text/javascript">
- $(document).ready(function(){
- $('.zzForm').submit(function(){
- var base = this.id;
- $(this).ajaxSubmit({
- target: '#'+base+'_results'
- ,success: function(){$('#'+base).slideUp(500);}
- });
- return false;
- });
- });
- </script>
- <div style="width:400px; height=300px; overflow:hidden; border:2px solid black;">
- <div class="news-panel" id="Contact_frm">
- <form id="Contact" class="zzform" action="_action.cfm" method="post">
- <label title="Customer's Name">Name: <input type="text" name="custname" value="" /></label>
- <input type="submit" class="submit-button" value="Submit" />
- <input type="hidden" name="formbox" value="Contact">
- <input type="hidden" name="formtarget" value="Contact_results">
- </form>
- </div>
- <div id="Contact_results" class="zztarget" style="overflow:hidden;"></div>
- </div>