/    Sign up×
Community /Pin to ProfileBookmark

AJAX submit button won’t work in IE

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 [URL=”www.mysarasotashortsale.com/test”]www.mysarasotashortsale.com/test[/URL].

[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 &raquo;</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>
[/CODE]

to post a comment
JavaScript

0Be the first to comment 😎

×

Success!

Help @thebigkrumm spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...