good day everyone,
i just wanted to ask for some help in using block ui for forms.
i have a form with 3 values.
once the form is submitted then block ui will appear with all the information from the form "echoed" within the div.
but the problem is each time i use a submit button, blockui doesn't work and immediately shuts when the form is submitted.
here is a sample of the code i am working with (sorry if it quite long):
block ui javascript
<script type="text/javascript">
$(document).ready(function() {
$("#pay").click(function() {
$.blockUI({ message: $('#question'), css: { width: '1024px' } });
});
$('#yes').click(function() {
// update the block message
$.blockUI({ message: "<h1>Remote call in progress...</h1>" });
$.ajax({
url: 'wait.php',
cache: false,
complete: function() {
// unblock when remote call returns
$.unblockUI();
}
});
});
$('#no').click(function() {
$.unblockUI();
return false;
});
});
</script>block ui
<div id="question" style="display: none; cursor: default; padding: 20px;">
<span style="font-size: 24px; font-weight: bold;">Would you save all changes and print the receipt?</span>
<p>
<div style="border: 1px black solid; padding: 20px; width: 175px; margin-left: auto; margin-right: auto;">
<img src="resources/speedline.png" width="161" height="58" />
<p>
DRIVER <?php echo $_GET['id']; ?> RECEIPT
<br /><span style="font-size:11px">
<?php
$oBeginDate = new DateTime('last wednesday');
$oEndDate = new DateTime('next wednesday');
echo $oBeginDate->format('d/m/Y') . ' to ' . $oEndDate->format('d/m/Y');
?>
</span>
<p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left">DATE PAID</td>
<td> </td>
</tr>
<tr>
<td align="left"> </td>
<td> </td>
</tr>
<tr>
<td align="left">TOTAL RENT</td>
<td>£<? echo $_POST['pRent']; ?></td>
</tr>
<tr>
<td align="left">RENT PAID</td>
<td>£<? echo $_POST['rentPaid']; ?></td>
</tr>
<tr>
<td align="left"> </td>
<td></td>
</tr>
<tr>
<td align="left">REMAINING</td>
<td>£<? echo $_POST['result']; ?></td>
</tr>
</table><br />
<span style="font-size:8px">THANK YOU FOR YOUR PAYMENT. PLEASE KEEP THIS RECEIPT FOR FUTURE REFERENCE. YOU WILL BE ASKED TO PRESENT IT AS EVIDENCE OF PAYMENT MADE.</span>
</div>
</p>
<input type="button" id="yes" value="Save/Print" style="width: 150px; height: 100px;"/>
<input type="button" id="no" value="Cancel" style="width: 150px; height: 100px;"/>
</div>form
<form action="<?php echo $_SERVER["PHP_SELF"]; ?>" method="post">
<table width="99%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="33%">Status</td>
<td width="33%">Total Rent (£)</td>
<td width="33%">Rent Paid (£)</td>
</tr>
<tr>
<td><select name="status" style="width: 320px; font-size: 56px;" size="5">
<option value="vacant" <?php if (!(strcmp("vacant", $row_driver['status']))) {echo "selected=\"selected\"";} ?>>vacant</option>
<option value="clear" <?php if (!(strcmp("clear", $row_driver['status']))) {echo "selected=\"selected\"";} ?>>clear</option>
<option value="awaiting" <?php if (!(strcmp("awaiting", $row_driver['status']))) {echo "selected=\"selected\"";} ?>>awaiting</option>
<option value="paid" <?php if (!(strcmp("paid", $row_driver['status']))) {echo "selected=\"selected\"";} ?>>paid</option>
<option value="not working" <?php if (!(strcmp("not working", $row_driver['status']))) {echo "selected=\"selected\"";} ?>>not working</option>
</select></td>
<td valign="top"><input name="pRent" type="text" id="previousRent" style="height: 60px; width: 200px; font-size: 56px;" value="<?php if ( $row_driver['pRent'] =! 0 ) { echo ""; } else { echo $row_driver['pRent']; } ?>"/></td>
<td valign="top"><input type="text" id="rentPaid" name="rentPaid" style="height: 60px; width: 200px; font-size: 56px;"/></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr></form>
<tr>
<td>Last Paid On</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><span style="font-size: 56px;">
<?php if ( $row_driver['pDate'] =! 0 ) { echo "N/A"; } else { echo $row_driver['pDate']; } ?>
</span></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="19"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Remaining (£)</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td valign="top"><input type="text" id="result" name="result" style="border: #FFF; height: 60px; width: 200px; font-size: 56px;" readonly="readonly"/></td>
<td colspan="2" align="center"><input type="submit" name="pay" id="pay" value="Pay" style="width: 150px; height: 100px;"/>
<img src="resources/spacer.gif" width="25px" height="1px" />
<input type="reset" name="reset" id="reset" value="Reset" style="width: 150px; height: 100px;"/> </td>
</tr>
<tr>
<td><img src="resources/spacer.gif" width="1" height="50px" /></td>
<td> </td>
<td> </td>
</tr>
</table>
</form>any help would be appreciated. much love and God bless!
