Question : Submit a Form Without Refresh

Hello. I have a PHP form, which acts as a calculator. Drop down boxes and text fields take user inputs, uses those values to make calculations, then displays the results, all within the same page. How can I repeatedly submit the page onBlur and onChange without refreshing the page, but display the new calculated results with each input change? Thank you very much in advance to anyone that helps.

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:

           
           
          <html>
<head>
<title>Calculator</title>

<script type="text/javascript">

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;
	}
}

$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)) {

	cb_data();

	$Z1 = $XO*10;
	$Z2 = $DT*100;
	$Z3 = $XO*$DT;
	$Z4 = $SR*$XO*$DT;
	
} 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 = 8280;

	cb_data();	
}

$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="divCalculator">
<form action="ajax.php" 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();">
        <option <? echo $english ?> value="0">English</option>
        <option <? echo $metric ?> value="1">Metric</option>
    </select>
    <br /><br />

	CB = <select id="CB" name="CB" onChange="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="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" onBlur="convert();">
    <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" onBlur="convert();">
    <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 /><br /><br />
    
    <span style="color:#0000CC">UNIT CONVERSION RESULTS:</span>
    <br /><br />
    Xo1 = <input type="text" name="Xo1" value='<? echo "$Xo1" ?>' size="8" tabindex="6">
    <br />
    Xo2 = <input type="text" name="Xo2" value='<? echo "$Xo2" ?>' size="8" tabindex="6">
    <br /><br />
    
    Dt1 = <input type="text" name="Dt1" value='<? echo "$Dt1" ?>' size="8" tabindex="6">
    <br />
    Dt2 = <input type="text" name="Dt2" value='<? echo "$Dt2" ?>' size="8" tabindex="6">
    <br /><br />
    
    <input type="submit" name="calculate" id="calculate" value="Calculate" onClick="change()">
</form>
</div>

</body>
</html>

           
         

Answer : Submit a Form Without Refresh

Thanks for trying to help me leakim, but I was able to work this out using Malsup's jQuery Form Plugin: http://jquery.malsup.com/form/. In case anyone else is having the same issues, I'll post my code. Here is the code for the index.php page. In the next post I will include the code for the handler.php page.

                       
         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:
191:
192:
193:
194:
195:
196:
197:
198:
199:
200:
201:
202:
203:
204:
205:
206:
207:
208:
209:
210:
211:
212:
213:
214:
215:
216:
217:
218:
219:
220:
221:
222:
223:
224:
225:

           
           
             <html>
<head>
<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="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.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:        '#divCalculator',   // target element(s) to be updated with server response 
        success:       showResponse,  // post-submit callback 
 
        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 
 
        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 
 
    // 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; 
    }); 
}); 
 
// post-submit callback 
function showResponse(responseText, statusText, xhr, $form)  { 
    // for normal html responses, the first argument to the success callback 
    // is the XMLHttpRequest object's responseText property 
 
    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'xml' then the first argument to the success callback 
    // is the XMLHttpRequest object's responseXML property 
 
    // if the ajaxSubmit method was passed an Options Object with the dataType 
    // property set to 'json' then the first argument to the success callback 
    // is the json data object returned by the server 
}

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="divCalculator">
<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 /><br /><br />   

    <span style="color:#0000CC">UNIT CONVERSION RESULTS:</span>
    <br /><br />
    Xo1 = <input type="text" name="Xo1" value='<? echo "$Xo1" ?>' size="8" tabindex="6">
    <br />
    Xo2 = <input type="text" name="Xo2" value='<? echo "$Xo2" ?>' size="8" tabindex="6">
    <br /><br />
    
    Dt1 = <input type="text" name="Dt1" value='<? echo "$Dt1" ?>' size="8" tabindex="6">
    <br />
    Dt2 = <input type="text" name="Dt2" value='<? echo "$Dt2" ?>' size="8" tabindex="6">
    <br /><br />
    
</form>
</div>

</body>
</html>

           
         