after finding out that i couldn't use form submit (which refreshes the page) alongside bockui i have decided to move onto ajax. i am not too good at ajax but i get the gist of it. but now block ui does not wish to work at all. here is the javascript i am using:
<script> $(document).ready(function() { //if submit button is clicked $('#submit').click(function () { //Get the data from all the fields var status = $('input[name=status]'); var pRent = $('input[name=pRent]'); var rentPaid = $('input[name=rentPaid]'); var pDate = $('input[name=pDate]'); //Simple validation to make sure user entered something //If error found, add hightlight class to the text field if (status.val()=='') { status.addClass('hightlight'); return false; } else status.removeClass('hightlight'); if (pRent.val()=='') { pRent.addClass('hightlight'); return false; } else pRent.removeClass('hightlight'); if (rentPaid.val()=='') { rentPaid.addClass('hightlight'); return false; } else rentPaid.removeClass('hightlight'); if (pDate.val()=='') { pDate.addClass('hightlight'); return false; } else pDate.removeClass('hightlight'); //organize the data properly var data = 'status=' + status.val() + '&pRent=' + pRent.val() + '&rentPaid=' + rentPaid.val() + '&pDate=' + pDate.val(); //disabled all the text fields $('.text').attr('disabled','true'); //show the loading sign $('.loading').show(); //start the ajax $.ajax({ //this is the php file that processes the data and send mail url: "resources/process.php", //GET method is used type: "GET", //pass the data data: data, //Do not cache the page cache: false, //success success: function (html) { //if process.php returned 1/true (send mail success) if (html==1) { //blockui $.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; }); //if process.php returned 0/false (send mail failed) } else alert('Sorry, unexpected error. Please try again later.'); } }); //cancel the submit button default behaviours return false; }); });process.php
<?php //Retrieve form data. //GET - user submitted data using AJAX //POST - in case user does not support javascript, we'll use POST instead $status = ($_GET['status']) ? $_GET['status'] : $_POST['status']; $pRent = ($_GET['pRent']) ?$_GET['pRent'] : $_POST['pRent']; $rentPaid = ($_GET['rentPaid']) ?$_GET['rentPaid'] : $_POST['rentPaid']; $pDate = ($_GET['pDate']) ?$_GET['pDate'] : $_POST['pDate']; ?>any thanks would be appreciated. God bless you in advance!
