passing form values to block ui window_问答_开发者

does anybody know how to do this? each time i have tried it simply refreshes the page and block ui closes! i've included the block ui sample to start off things.

thanking you in advance!

   <script type="text/javascript"> 
    $(document).ready(function() { 

        $('#test').click(function() { 
            $.blockUI({ message: $('#question'), css: { width: '275px' } }); 
        }); 

        $('#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> 

... 

<input id="test" type="submit" value="Show Dialog" /> 

... 

<div id="question" style="display:none; cursor: default"> 
        <h1>Would you like to contine?.</h1> 
        <input type="button" id="yes" value="Yes" /> 
        <input type="button" id="no" value="No" /> 
</div>

here is my lengthy code to compare it against:

<?php require_once('Connections/rent.php'); ?>
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "") 
{
  if (PHP_VERSION < 6) {
    $theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
  }

  $theValue = function_exists("mysql_real_escape_string") ? mysql_real_escape_string($theValue) : mysql_escape_string($theValue);

  switch ($theType) {
    case "text":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;    
    case "long":
    case "int":
      $theValue = ($theValue != "") ? intval($theValue) : "NULL";
      break;
    case "double":
      $theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
      break;
    case "date":
      $theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
      break;
    case "defined":
      $theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
      break;
  }
  return $theValue;
}
}

$colname_driver = "-1";
if (isset($_GET['id'])) {
  $colname_driver = $_GET['id'];
}
mysql_select_db($database_rent, $rent);
$query_driver = sprintf("SELECT * FROM rent WHERE id = %s", GetSQLValueString($colname_driver, "int"));
$driver = mysql_query($query_driver, $rent) or die(mysql_error());
$row_driver = mysql_fetch_assoc($driver);
$totalRows_driver = mysql_num_rows($driver);

$user = $_GET['user'];
?>





<!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" />
<link rel="stylesheet" href="resources/css_02.css">
        <style type="text/css">
@import "resources/jquery.keypad.css";
<开发者_如何学C/style>  
<link rel="shortcut icon" href="resources/favicon.ico">
        <script src="resources/jquery.js"></script>     
        <script src="resources/jquery.keypad.js"></script> 
        <script src="resources/blockui.js"></script>   
        <script type="text/javascript"> 
    $(document).ready(function() { 

        $("#pay").click(function() { 
            $.blockUI({ message: $('#question'), css: { width: '1024px' } }); 
              return false; //stop the <form> from submitting, refreshing the page
        }); 

        $('#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>           
<script type="text/javascript">
$(function () {
    $('#rentPaid').keypad();
    $('#driver').keypad();
    $('#previousRent').keypad();
});
</script>            
  <script>
    $(document).ready(function(){
      $('#previousRent').change(function(){
        calcResult();
      });
      $('#rentPaid').change(function(){
        calcResult();
      });
    });
function calcResult() {
      $('#result').val( parseFloat($('#previousRent').val() - $('#rentPaid').val()) );
    }
  </script>   
<script type="text/javascript">
<!-- This function just gets the value of the text box 'name1' and assigned to the hidden for text box 'name2'... -->
function valuepassing()
{
var a = document.show.status.value;
var b = document.show.pRent.value;
var c = document.show.rentPaid.value;
var d = document.show.pDate.value;
var e = document.show.result.value;
document.hiddenform.status2.value = a;
document.hiddenform.pRent2.value = b;
document.hiddenform.rentPaid2.value = c;
document.hiddenform.pDate2.value = d;
document.hiddenform.result2.value = e;

<!-- This command submits the hidden form... Nothing but what you have done previously with submit button directly... Now you can get the value from 'name2' text box of hidden form through $_POST method and you can populate the datas as usual.....
document.hiddenform.submit();
}
</script>
<title>Speedy CMS</title>
</head>
<body style="text-align: left;">





        <!-- div -->

<div id="question" style="display: none; cursor: default; padding: 20px;"> 
        <span style="font-size: 24px; font-weight: bold;">Would you like to save all the 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" style="font-size: 12px;">
<tr>
    <td align="left">TOTAL RENT</td>
    <td align="left">£<?php echo $_POST['pRent2']; ?></td>
  </tr>
  <tr>
    <td align="left">RENT PAID</td>
    <td align="left">£<?php echo $_POST['rentPaid2']; ?></td>
  </tr>
  <tr>
    <td align="left">&nbsp;</td>
    <td></td>
  </tr>
  <tr>
    <td align="left">REMAINING</td>
    <td align="left">£<?php echo $_POST['result2']; ?></td>
  </tr>
</table><br />
<span style="font-size:9px">THANK YOU FOR YOUR PAYMENT. PLEASE KEEP THIS RECEIPT FOR FUTURE REFERENCE. YOU WILL BE ASKED TO PRESENT IT AS EVIDENCE OF PAYMENT MADE.<p>RECEIVED ON <?php echo date("d/m/y H:i a"); ?><p></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>





        <!-- heading -->

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
        <td width="68%"><img src="resources/speedline.png" /></td>
        <td width="32%" align="right"><span style="font-size: 12px;"><a href="main.php?user=<?php echo $_GET['user']; ?>" class='login2' style="font-size: 20px;">VIEW SUMMARY</a></span><img src='resources/spacer.gif' alt="" width='50px' height='1px'/><a href="index.php" class='login2' style="font-size: 20px;">LOG OFF</a></td>
  </tr>
</table>
<p>
<span style="font-size: 12px;"><?php echo date("l F d, Y, G:i A") ?><br>
<img src='resources/spacer.gif' width='1px' height='10px'/>
<p style="font-size: 20px;">RENT PAYMENT (<?php echo $_GET['user']; ?> for DRIVER <?php echo $_GET['id']; ?>) 
- <?php
$oBeginDate = new DateTime('last wednesday');
$oEndDate   = new DateTime('next wednesday');
echo $oBeginDate->format('d/m/Y') . ' to ' . $oEndDate->format('d/m/Y');
?>





        <!-- hidden form -->

<form action=" " name="hiddenform" method="post">
<input type="hidden" name="status2" />
<input type="hidden" name="pRent2" />
<input type="hidden" name="rentPaid2" />
<input type="hidden" name="result2" />
<input type="hidden" name="pDate2" value="<?php echo date("l F d, Y, G:i A") ?>" />
</form>





        <!-- keypad form -->

<form name="show">
  <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>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Last Paid On</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>   
      <input type="text" id="pDate" name="pDate" style="border: #FFF; height: 60px; width: 400px; font-size: 46px;" readonly="readonly" value="<?php if ( $row_driver['pDate'] == 0 ) { echo "N/A"; } else { echo  $row_driver['pDate']; } ?>"/>
      </td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td height="19">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>Remaining (£)</td>
      <td>&nbsp;</td>
      <td>&nbsp;</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="button" name="pay" id="pay" value="Pay" style="width: 150px; height: 100px;" onclick="return valuepassing()"/>
        <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>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
  </form>





        <!-- footer -->

<img src='resources/spacer.gif' width='1px' height='10px'/><img src='resources/spacer.gif' width='1px' height='10px'/><br />
<span class="bottom">&copy; <?php echo date("Y"); ?> Speedline</span>





<?php
mysql_free_result($driver);
?>

The default behavior is to submit the page, you need to disable this with event.preventDefault() (or return false, but that's overkill IMO), like this:

$('#test').click(function(e) {
  $.blockUI({ message: $('#question'), css: { width: '275px' } });  
  e.preventDefault(); //stop the <form> from submitting, refreshing the page
});