Hi, all -
I have a perfectly wonderful jQuery/AJAX contact form that does everything it's supposed to do - except submit.![]()
![]()
FYI, the form DOES submit in Firefox; the problem (surprise, surprise) only occurs in IE.
My code is below; please feel free to see my problem in action at www.mysarasotashortsale.com/test.
Code:<div class="sos_wrap"> <div id="sos_form"> <div id="sos_form_div1"> <h3 style="text-align:right; margin-right:20px">STEP ONE</h3> <div class="sos_button" id="sos_div1_button"> <h4>GO TO STEP 2 »</h4> </div> <table width="690px"> </tr> <tr> <td width="290px"><iframe width="260" height="206" src="http://www.youtube.com/embed/pJ0P1w5I3XE?rel=0" frameborder="0" allowfullscreen></iframe></td> <td width="400px"><table width="300px"> <tr> <td><h4>Street Address*</h4></td> </tr> <tr> <td><span class="wpcf7-form-control-wrap PropertyAddress"> <input type="text" name="PropertyAddress" value="" id="PropertyAddress" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /> </span> </td> </tr> <tr> <td><h4>City*</h4></td> <td><h4>State*</h4></td> </tr> <tr> <td><span class="wpcf7-form-control-wrap PropertyCity"> <input type="text" name="PropertyCity" value="" id="PropertyCity" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /> </span> </td> <td><span class="wpcf7-form-control-wrap PropertyState"> <select name="PropertyState" id="PropertyState" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required"> <option value="FL">FL</option> </select> </span> </td> </tr> <tr> <td><h4>ZIP Code*</h4></td> </tr> <tr> <td><span class="wpcf7-form-control-wrap PropertyZip"> <input type="text" name="PropertyZip" value="" id="PropertyZip" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /> </span> </td> </tr> </table></td> </tr> </table> </div> <div id="sos_form_div2"> <h3 style="text-align:right; margin-right:20px">STEP TWO</h3> <div class="sos_button" onclick="javascript:jQuery(this).submit();"> <h4>SUBMIT</h4> </div> <table width="690px"> <tr> <td><h4>Current Mortgage Balance*</h4></td> <td><h4>Your Name*</h4></td> </tr> <tr> <td><span class="wpcf7-form-control-wrap CurrentBalance"> <input type="text" name="CurrentBalance" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /> </span> </td> <td><span class="wpcf7-form-control-wrap YourName"> <input type="text" name="YourName" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /> </span> </td> </tr> <tr> <td><h4>Annual Interest Rate*</h4></td> <td><h4>Your E-Mail Address*</h4></td> </tr> <tr> <td><span class="wpcf7-form-control-wrap YourAPR"> <select name="YourAPR" class="wpcf7-form-control wpcf7-select wpcf7-validates-as-required"> <option value="3.5%">3.5%</option> <option value="4.0%">4.0%</option> <option value="4.5%">4.5%</option> <option value="5.0%">5.0%</option> <option value="5.5%">5.5%</option> <option value="6.0%">6.0%</option> <option value="6.5%">6.5%</option> <option value="7.0%">7.0%</option> <option value="7.5%">7.5%</option> <option value="8.0%">8.0%</option> <option value="8.5%">8.5%</option> <option value="9.0%">9.0%</option> <option value="9.5%">9.5%</option> </select> </span> </td> <td><span class="wpcf7-form-control-wrap YourEmail"> <input type="text" name="YourEmail" value="" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" size="40" /> </span> </td> </tr> <tr> <td><h4>Monthly Payment*</h4></td> <td><h4>Your Phone Number</h4></td> </tr> <tr> <td><span class="wpcf7-form-control-wrap MonthlyPayment"> <input type="text" name="MonthlyPayment" value="" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" /> </span> </td> <td><span class="wpcf7-form-control-wrap YourPhone"> <input type="text" name="YourPhone" value="" id="sos_form_YourPhone" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" size="40" maxlength="12" /> </span> </td> </tr> </table> </div> </div> </div> <script> function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); // set the focus to this input return false; } return true; } </script> <br /> <script> jQuery("#sos_div1_button").click(function(){ if(notEmpty(document.getElementById('PropertyAddress'),'Address is a required field.')){ if(notEmpty(document.getElementById('PropertyCity'),'City is a required field.')){ if(notEmpty(document.getElementById('PropertyState'),'State is a required field.')){ if(notEmpty(document.getElementById('PropertyZip'),'ZIP code is required.')){ jQuery("#sos_form_div1,#sos_form_div2").animate({left:"-=100%"}, "slow"); } } } } }); </script>


Reply With Quote

Bookmarks