Search jQuery

jQuery Forum

[jQuery] Form Plugin Problem with IE 8 and Safari 5

in Using jQuery Plugins • 1 years ago

Hello everyone,

I am attempting to create a form that submits with AJAX on each input change using Malsup's Form Plugin. However, I run into a problem on submitting the form the second time when using a browser besides Firefox. In Safari 5, after the second submission the form stops doing the calculations (besides the English to metric conversions). In Internet Explorer 8, the second submission opens a new window with the handler.php page, which the main page refers to. Thank you in advance to anyone that can help in allowing the form to submit repeatedly without opening a new page in IE and Safari. Here is a live link and here is my code:

submit.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Calculator</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
// prepare the form when the DOM is ready
$(document).ready(function() {
var options = {
target: '#main', // target element(s) to be updated with server response
};
// bind to the form's submit event
$('#calculator').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
});
function convert() {
with (document.calculator) {
if (U.value == 0) {
Xo1.value = XO.value;
Xo2.value = XO.value*0.3048;
Dt1.value = DT.value;
Dt2.value = DT.value*25.4;
} else {
Xo1.value = XO.value/0.3048;
Xo2.value = XO.value;
Dt1.value = DT.value/25.4;
Dt2.value = DT.value;
}
}
//document.calculator.submit();
return true;
}
function units() {
with (document.calculator) {
if (U.value == 0) {
XO.value = XO.value/0.3048;
DT.value = DT.value/25.4;
} else {
XO.value = XO.value*0.3048;
DT.value = DT.value*25.4;
}
}
//document.calculator.submit();
return true;
}
</script>
<?php
$U = $_POST['U'];
$CB = $_POST['CB'];
$SR = $_POST['SR'];
$XO = $_POST['XO'];
$Xo1 = $_POST['Xo1'];
$Xo2 = $_POST['Xo2'];
$DT = $_POST['DT'];
$Dt1 = $_POST['Dt1'];
$Dt2 = $_POST['Dt2'];
if(isset($XO)) {
include 'handler.php';
} else {
$U = 0;
$CB = "DEF";
$SR = 32;
$XO = 20;
$Xo1= ($U==0 ? $XO : $XO/0.3048);
$Xo2 = ($U==1 ? $XO : $XO*0.3048);
$DT = 2.875;
$Dt1 = (U==0 ? $DT : $DT/25.4);
$Dt2 = (U==1 ? $DT : $DT*25.4);
$Z1 = 200;
$Z2 = 287.5;
$Z3 = 57.5;
$Z4 = 1840;
}
$english = ($U==0 ? "SELECTED" : "" );
$metric = ($U==1 ? "SELECTED" : "" );
$cb_A = ( $CB=="ABC" ? "SELECTED" : "" );
$cb_D = ( $CB=="DEF" ? "SELECTED" : "" );
$cb_G = ( $CB=="GHI" ? "SELECTED" : "" );
$sr_12 = ( $SR=="12" ? "SELECTED" : "" );
$sr_18 = ( $SR=="18" ? "SELECTED" : "" );
$sr_20 = ( $SR=="20" ? "SELECTED" : "" );
$sr_32 = ( $SR=="32" ? "SELECTED" : "" );
$sr_44 = ( $SR=="44" ? "SELECTED" : "" );
$sr_56 = ( $SR=="56" ? "SELECTED" : "" );
$sr_64 = ( $SR=="64" ? "SELECTED" : "" );
$sr_86 = ( $SR=="86" ? "SELECTED" : "" );
$sr_100 = ( $SR=="100" ? "SELECTED" : "" );
$sr_120 = ( $SR=="120" ? "SELECTED" : "" );
$sr_144 = ( $SR=="144" ? "SELECTED" : "" );
?>
</head>
<body>
<div id="main">
<form action="handler.php" target="calculator" method="POST" id="calculator" name="calculator">
<span style="color:#0000CC">USER INPUTS:</span>
<br /><br />
U = <select id="U" name="U" size="1" onChange="units(); $('#calculator').submit();">
<option <? echo $english ?> value="0">English</option>
<option <? echo $metric ?> value="1">Metric</option>
</select>
<br /><br />
CB = <select id="CB" name="CB" onChange="$('#calculator').submit();">
<option <? echo $cb_A ?> value="ABC">ABC</option>
<option <? echo $cb_D ?> value="DEF">DEF</option>
<option <? echo $cb_G ?> value="GHI">GHI</option>
</select>
<br /><br />
SR = <select id="SR" name="SR" onChange="$('#calculator').submit();">
<? switch ($CB) {
case "ABC":
echo "<option $sr_12 value='12'>12</option>";
echo "<option $sr_18 value='18'>18</option>";
break;
case "DEF":
echo "<option $sr_20 value='20'>20</option>";
echo "<option $sr_32 value='32'>32</option>";
echo "<option $sr_44 value='44'>44</option>";
echo "<option $sr_56 value='56'>56</option>";
break;
case "GHI":
echo "<option $sr_64 value='64'>64</option>";
echo "<option $sr_86 value='86'>86</option>";
echo "<option $sr_100 value='100'>100</option>";
echo "<option $sr_120 value='120'>120</option>";
echo "<option $sr_144 value='144'>144</option>";
break;
} ?>
</select>
<br /><br />
XO = <input class="input" id="XO" name="XO" type="text" value='<? echo $U==0 ? number_format("$Xo1",0,'.','') : number_format("$Xo2",0,'.','') ?>' size="8" onChange="convert(); $('#calculator').submit();">
<br />
DT = <input class="input" id="DT" name="DT" type="text" value='<? echo $U==0 ? number_format("$Dt1",3,'.','') : number_format("$Dt2",2,'.','') ?>' size="8" onChange="convert(); $('#calculator').submit();">
<br /><br /><br />
<span style="color:#0000CC">CALCULATION RESULTS:</span>
<br /><br />
Z1 (XO*10) = <? echo "$Z1" ?>
<br />
Z2 (DT*100) = <? echo "$Z2" ?>
<br />
Z3 (XO*DT) = <? echo "$Z3" ?>
<br />
Z4 (SR*XO*DT) = <? echo "$Z4" ?>
<br />
<span style="visibility: hidden; font-size: 1px; line-height: 1px;">
Xo1 = <input type="text" name="Xo1" value='<? echo "$Xo1" ?>' size="1">
Xo2 = <input type="text" name="Xo2" value='<? echo "$Xo2" ?>' size="1">
Dt1 = <input type="text" name="Dt1" value='<? echo "$Dt1" ?>' size="1">
Dt2 = <input type="text" name="Dt2" value='<? echo "$Dt2" ?>' size="1">
</span>
</form>
</div>
Download the pages <a href="submit.zip">here</a>.
</body>
</html>

handler.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
// prepare the form when the DOM is ready
$(document).ready(function() {
var options = {
target: '#main', // target element(s) to be updated with server response
};
// bind to the form's submit event
$('#calculator').submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
});
function convert() {
with (document.calculator) {
if (U.value == 0) {
Xo1.value = XO.value;
Xo2.value = XO.value*0.3048;
Dt1.value = DT.value;
Dt2.value = DT.value*25.4;
} else {
Xo1.value = XO.value/0.3048;
Xo2.value = XO.value;
Dt1.value = DT.value/25.4;
Dt2.value = DT.value;
}
}
//document.calculator.submit();
return true;
}
function units() {
with (document.calculator) {
if (U.value == 0) {
XO.value = XO.value/0.3048;
DT.value = DT.value/25.4;
} else {
XO.value = XO.value*0.3048;
DT.value = DT.value*25.4;
}
}
//document.calculator.submit();
return true;
}
</script>
<?php
function cb_data() {
global $CB, $SR, $sr_length;
switch ($CB) {
case "ABC":
switch ($SR) {
case 12: break;
case 18: break;
}
break;
case "DEF":
switch ($SR) {
case 20: break;
case 32: break;
case 44: break;
case 56: break;
}
break;
case "GHI":
switch ($SR) {
case 64: break;
case 86: break;
case 100: break;
case 120: break;
case 144: break;
}
break;
}
}
cb_data();
$Z1 = $XO*10;
$Z2 = $DT*100;
$Z3 = $XO*$DT;
$Z4 = $SR*$XO*$DT;
$english = ($U==0 ? "SELECTED" : "" );
$metric = ($U==1 ? "SELECTED" : "" );
$cb_A = ( $CB=="ABC" ? "SELECTED" : "" );
$cb_D = ( $CB=="DEF" ? "SELECTED" : "" );
$cb_G = ( $CB=="GHI" ? "SELECTED" : "" );
$sr_12 = ( $SR=="12" ? "SELECTED" : "" );
$sr_18 = ( $SR=="18" ? "SELECTED" : "" );
$sr_20 = ( $SR=="20" ? "SELECTED" : "" );
$sr_32 = ( $SR=="32" ? "SELECTED" : "" );
$sr_44 = ( $SR=="44" ? "SELECTED" : "" );
$sr_56 = ( $SR=="56" ? "SELECTED" : "" );
$sr_64 = ( $SR=="64" ? "SELECTED" : "" );
$sr_86 = ( $SR=="86" ? "SELECTED" : "" );
$sr_100 = ( $SR=="100" ? "SELECTED" : "" );
$sr_120 = ( $SR=="120" ? "SELECTED" : "" );
$sr_144 = ( $SR=="144" ? "SELECTED" : "" );
?>
</head>
<body>
<form action="handler.php" target="calculator" method="POST" id="calculator" name="calculator">
<span style="color:#0000CC">USER INPUTS:</span>
<br /><br />
U = <select id="U" name="U" size="1" onChange="units(); $('#calculator').submit();">
<option <? echo $english ?> value="0">English</option>
<option <? echo $metric ?> value="1">Metric</option>
</select>
<br /><br />
CB = <select id="CB" name="CB" onChange="$('#calculator').submit();">
<option <? echo $cb_A ?> value="ABC">ABC</option>
<option <? echo $cb_D ?> value="DEF">DEF</option>
<option <? echo $cb_G ?> value="GHI">GHI</option>
</select>
<br /><br />
SR = <select id="SR" name="SR" onChange="$('#calculator').submit();">
<? switch ($CB) {
case "ABC":
echo "<option $sr_12 value='12'>12</option>";
echo "<option $sr_18 value='18'>18</option>";
break;
case "DEF":
echo "<option $sr_20 value='20'>20</option>";
echo "<option $sr_32 value='32'>32</option>";
echo "<option $sr_44 value='44'>44</option>";
echo "<option $sr_56 value='56'>56</option>";
break;
case "GHI":
echo "<option $sr_64 value='64'>64</option>";
echo "<option $sr_86 value='86'>86</option>";
echo "<option $sr_100 value='100'>100</option>";
echo "<option $sr_120 value='120'>120</option>";
echo "<option $sr_144 value='144'>144</option>";
break;
} ?>
</select>
<br /><br />
XO = <input class="input" id="XO" name="XO" type="text" value='<? echo $U==0 ? number_format("$Xo1",0,'.','') : number_format("$Xo2",0,'.','') ?>' size="8" onChange="convert(); $('#calculator').submit();">
<br />
DT = <input class="input" id="DT" name="DT" type="text" value='<? echo $U==0 ? number_format("$Dt1",3,'.','') : number_format("$Dt2",2,'.','') ?>' size="8" onChange="convert(); $('#calculator').submit();">
<br /><br /><br />
<span style="color:#0000CC">CALCULATION RESULTS:</span>
<br /><br />
Z1 (XO*10) = <? echo number_format("$Z1",2,'.','') ?>
<br />
Z2 (DT*100) = <? echo number_format("$Z2",2,'.','') ?>
<br />
Z3 (XO*DT) = <? echo number_format("$Z3",2,'.','') ?>
<br />
Z4 (SR*XO*DT) = <? echo number_format("$Z4",2,'.','') ?>
<br />
<span style="visibility: hidden; font-size: 1px; line-height: 1px;">
Xo1 = <input type="text" name="Xo1" value='<? echo "$Xo1" ?>' size="1">
Xo2 = <input type="text" name="Xo2" value='<? echo "$Xo2" ?>' size="1">
Dt1 = <input type="text" name="Dt1" value='<? echo "$Dt1" ?>' size="1">
Dt2 = <input type="text" name="Dt2" value='<? echo "$Dt2" ?>' size="1">
</span>
</form>
</body>
</html>

Replies(4)

malsup

Re: [jQuery] Form Plugin Problem with IE 8 and Safari 5

1 years ago

Instead of this:

$('#calculator').submit(function() {

try this:

$('#calculator').live('submit', function() {

ununhexium

Re: [jQuery] Form Plugin Problem with IE 8 and Safari 5

1 years ago

Thanks for the response, malsup! Your suggestion solved my problem in Safari and Chrome, but it still occurs in IE and Opera. On the second submission for IE and Opera a new window opens with the handler.php page. I apologize if there is something fundamentally wrong with my setup, as I am very new to this. Also, this is unrelated, but do you know if it is possible to streamline my code so I don't have to include my JavaScript functions on both pages? Thanks again.

malsup

Re: [jQuery] Form Plugin Problem with IE 8 and Safari 5

1 year ago

You have script errors in IE. Beware of trailing commas, such as:

target: '#main',

ununhexium

Re: [jQuery] Form Plugin Problem with IE 8 and Safari 5

1 year ago

I just knew it had to be a dumb error, haha. The form still doesn't work properly in Opera, but I can live with that. Thanks for all your help!

darksyntax

Re: [jQuery] Form Plugin Problem with IE 8 and Safari 5

8 months ago

I am having a similar problem with Malsup's fine Form Plugin crashing ie8. Chrome seems to be fine so I am assuming safari is ok. Additionally, firefox, ie9 as well as the ie10 preview render fine.

This little bit of code seems to crash ie 8:

// wait for the DOM to be loaded

$(document).ready(function() {

// bind 'myForm' and provide a simple callback function

$('#contact_form').ajaxForm(function() {

$('.success').fadeIn('slow');

});

</script>

you can see the complete source at : http://fernandojfernandez.com/contact.html

I cannot for the life of me understand the issue. Any help would be greatly appreciated!