嗨，
我有一个表单，我想将其值插入MySQL数据库，而不刷新表单并丢失其值。 通过单击“打印”按钮，用户应该能够根据他们在表单中输入的数据生成报告，但表单会在提交时保持刷新。所以我想知道如何在不刷新表单的情况下将数据存储在数据库中（即使用Ajax）？
以下是我的表单代码：
<div class="commentpost"></div>
<form name="entry" id="entry" method="POST" action="">
<table border="1" bgcolor="Silver">
<tr>
<td>
</td>
<td>
<h2><b>Candidate Entry</b><h2>
</td>
</tr>
<tr>
<td>
Code
</td>
<td>
<input type="text" name="vouchno" value="New" onkeypress="return isNumberKey(event)" readonly="readonly" size="8" maxlength="8">
Date
<input type="text" id="vouchdt" name="vouchdt" id="popupDatepicker" tabindex="1" value="<?php echo (isset($_POST['vouchdt']) ? $_POST['vouchdt'] : ''); ?>"></td>
<td>
<input type="text" id='councode' name="councode" size="1" maxlength="2" value="<?php echo (isset($_POST['councode']) ? $_POST['councode'] : ''); ?>"><input type="text" id="counvouch" name="counvouch" size="8" value="<?php echo (isset($_POST['counvouch']) ? $_POST['counvouch'] : ''); ?>" maxlength="8">
<div id="cam">
</div>
<input type=button value="Configure..." onClick="webcam.configure()">
<input type=button value="Take Snapshot" onClick="take_snapshot()">
<div id="upload_results" style="background-color:#eee;"></div>
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
<input type="text" id="name" name="name" value="<?php echo (isset($_POST['name']) ? $_POST['name'] : ''); ?>" maxlength="40" size="45" tabindex="2">
</td>
</tr>
<tr>
<td>
Address
</td>
<td>
<textarea name="add" id="add" row="3" cols="40" tabindex="3">
<?php echo (isset($_POST['vouchdt']) ? $_POST['vouchdt'] : ''); ?>
</textarea>
</td>
</tr>
<tr>
<td>
City
</td>
<td>
<input type="text" id="city" name="city" size="20" maxlength="20" value="<?php echo (isset($_POST['city']) ? $_POST['city'] : ''); ?>" tabindex="4">
Pin
<input type="text" id="pin" name="pin" size="6" maxlength="6" value="<?php echo (isset($_POST['pin']) ? $_POST['pin'] : ''); ?>" tabindex="5">
</td>
</tr>
<tr>
<td>
Nationality
</td>
<td>
<input type="text" id="ntn" name="ntn" value="<?php echo (isset($_POST['ntn']) ? $_POST['ntn'] : ''); ?>" size="10" maxlength="10" tabindex="6">
</td>
</tr>
<tr>
<td>
Mobile No
</td>
<td>
<input type="text" id="mob" name="mob" value="<?php echo (isset($_POST['mob']) ? $_POST['mob'] : ''); ?>" tabindex="7">
</td>
</tr>
<tr>
<td>
Date of Birth
</td>
<td>
<input type="text" id="dob" name="dob" value="<?php echo (isset($_POST['dob']) ? $_POST['dob'] : ''); ?>" id="popupDatepicker2" tabindex="8">
</td>
<td>
Age
</td>
<td width="9px">
<input type="text" id="age" name="age" size="3" maxlength="3" value="<?php echo (isset($_POST['age']) ? $_POST['age'] : ''); ?>" tabindex="9">
</td>
<td width="10px">
Sex
</td>
<td>
<select id="sex" name="sex" tabindex="12">
<?php
if(isset($_POST[sex])==m){
?>
<option value="<?php echo (isset($_POST['sex']) ? $_POST['sex'] : ''); ?>">Male</option>":
<?php }else{?>
<option value="<?php echo (isset($_POST['sex']) ? $_POST['sex'] : ''); ?>">Female</option>":
<?php }?>
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</td>
</tr>
<tr>
<td>
Religion
</td>
<td>
<input type="text" id="rel" name="rel" value="<?php echo (isset($_POST['rel']) ? $_POST['rel'] : ''); ?>" size="20" maxlength="20" tabindex="11">
</td>
<td>
Martial Status
</td>
<td>
<select id ="status" name="status" tabindex="12">
<option value="">--select--</option>
<option value="1">Married</option>
<option value="2">Unmarried</option>
</select>
</td>
</tr>
<tr>
<td>
Passport No.
</td>
<td>
<input type="text" id="pass" name="pass" value="" size="15" maxlength="15" tabindex="13">
</td>
<td>
Place of Issue
</td>
<td>
<input type="text" id="poi" name="poi" size="20" maxlenght-20 tabindex="14">
</td>
<td>
Date of Issue
</td>
<td>
<input type="text" id="doi" name="doi" id="popupDatepicker4" tabindex="15">
</td>
</tr>
<tr>
<td>
Profession
</td>
<td>
<input type="text" id="prof" name="prof" size="20" maxlenght="20" value="" tabindex="16">
</td>
<td>
Amount
</td>
<td>
<input type="text" id="amt" name="amt" value="" size ="8" onblur="calculateText()" style="background-color:transparent; color:blue; text-align:right" tabindex="17">
</td>
</tr>
<tr>
<td>
Payment
</td>
<td>
<select id="pay" name="pay" tabindex="12">
<option value="">--select--</option>
<option value="f">Full</option>
<option value="p">Part</option>
<option value="n">None</option>
</select>
</td>
<td>
Received
</td>
<td>
<input type="text" id="resc" name="resc" value="" size ="8" onblur="calculateText()" style="background-color:transparent; color:green; text-align:right" tabindex="18">
</td>
</tr>
<tr>
<td>
Agent
</td>
<td>
<input type="tetx" id="agnt" name="agnt" value="" size="40" maxlength="40" tabindex="21">
</td>
<td>
Balance
</td>
<td>
<input type="text" id="bal" name="bal" readonly="readonly" value="" size ="8" style="background-color:transparent; color:red; text-align:right" onblur="calculateText()" tabindex="19">
</td>
</tr>
<tr>
<td>
Mofa No.
</td>
<td>
<input type="text" id="mofa" name="mofa" value="" size="20" maxlength="20" tabindex="22">
</td>
</tr>
<tr>
<td>
Remarks
</td>
<td>
<input type="text" id="rem" name="rem" size="60" maxlength="60" value="" tabindex="23">
</td>
</tr>
<table border="0" align="center">
<tr>
<td>
<input type="submit" name="save" value="Save"><input type="hidden" name="task" value="addComments" />
<td>
<input type="submit" name="print" value="Print">
</td>
<td>
<input type="submit" name="close" value="Cancel">
</td>
<td>
<input type="reset" name="Add" value="Add">
</td>
</tr>
</table>
</table>
</form>
</body>
</html>
这是我的JavaScript代码：
<script type="text/javascript">
jQuery(document).ready(function($){
$("#entry").submit(function(){
ctask = this.task.value;
cvouchdt = this.vouchdt.value;
ccouncde = this.councode.value;
ccounvouch = this.counvouch.value;
cname = this.name.value;
ccity = this.city.value;
cpin = this.pin.value;
cntn = this.ntn.value;
cmob = this.mob.value;
cdob = this.dob.value;
cage = this.age.value;
csex = this.sex.value;
crel = this.rel.value;
cstatus = this.status.value;
cpass = this.pass.value;
crel = this.rel.value;
cpoi = this.poi.value;
cdoi = this.doi.value;
cprof = this.prof.value;
camt = this.amt.value;
cpay = this.pay.value;
cpass = this.pass.value;
crecd = this.recd.value;
cagnt = this.agnt.value;
cbal = this.bal.value;
cmofa = this.mofa.value;
crem = this.rem.value;
save = this.save;
if(cname=="" || ccounvouch=="" || ccouncde=="") { $("#errAll").html('<p>Invalid Captcha. Please try again.</p>'); }
$.post("submit.php", {task: ctask, name: cname, email: cemail, url: curl, message: cmessage}, function(data){
if(data=='0') { $("#errAll").html('<p>Please don\'t leave the requierd fields.</p>'); }
else if(data=='1') { $("#errAll").html('<p>Invalid Email Address, Please try again.</p>'); }
else { submitter.value="Value Saved"; save.disabled=false;} //$(data).appendTo($(".commentpost")); }
});
return false;
});
});
</script>
这是我的PHP代码：
<?php
//include_once( 'config.php' );
require("includes/dbconnect.php");
$getmaxvou = mysql_query("SELECT MAX(`vouchno`) as `maxid` FROM `candidate` ") or die(mysql_error());
$max = mysql_fetch_array($getmaxvou);
$maxv =$max["maxid"]+1;
if(isset($_POST['task']) && $_POST['task'] == 'addComments')
{
$a = 1;
$date = mysql_real_escape_string($_POST["vouchdt"]);
$date = strtotime($date);
$date = date('Y-m-d',$date);
$cname = trim($_POST["name"]);
$add = trim($_POST["add"]);
$city = trim($_POST["city"]);
$pin = trim($_POST["pin"]);
$nations = trim($_POST["ntn"]);
$mob = trim($_POST["mob"]);
$dob = mysql_real_escape_string($_POST["dob"]);
$dob = strtotime($dob);
$dob = date('Y-m-d',$dob);
$age = trim($_POST["age"]);
$sex = trim($_POST["sex"]);
$rel = trim($_POST["rel"]);
$pass = trim($_POST["pass"]);
$status = trim($_POST["status"]);
$poi = trim($_POST["poi"]);
$doi = mysql_real_escape_string($_POST["doi"]);
$doi = strtotime($doi);
$doi = date('Y-m-d',$doi);
$prof = trim($_POST["prof"]);
$amt = trim($_POST["amt"]);
$pay = trim($_POST["pay"]);
$bal = trim($_POST["bal"]);
$recd = trim($_POST["resc"]);
$agnt = trim($_POST["agnt"]);
$mofa = trim($_POST["mofa"]);
$rem = trim($_POST["rem"]);
$councode = trim($_POST["councode"]);
$counvouch = trim($_POST["counvouch"]);
{
if (isset($_POST["code"])) {
$sql_check = mysql_query("SELECT * FROM candiidate WHERE code ='$councode' AND counvouch='$counvouch'");
if (mysql_num_rows($sql_check) > 0) {
$a = 0;
print '<script type="text/javascript">';
print 'alert("Code Already Exist For the Country")';
PRINT '</script>';
}
}
if($a ==1){
mysql_query("INSERT INTO `candidate`(vouchno, vouchdt, `name`, `add`, `city`, `pin`, `nationality`, mobile, dob, `religion`, `passport`, `profession`, amt, recd, bal, payment, `agent`, `mofa`, `age`, `gender`, `martial`, `poi`, doi, councode, counvouch, `rem` )
Values
('$maxv', '$date', '$cname', '$add', '$city', '$pin', '$nations', '$mob', '$dob', '$rel', '$pass', '$prof', '$amt', '$recd', '$bal', '$pay', '$agnt', '$mofa', '$age', '$sex', '$status', '$poi', '$doi', '$councode', '$counvouch', '$rem' )") or die(mysql_error());
echo ' <div class="commentbox">
<div class="commentboxt">Value Inserted </div>
</div>';
}
}
}?>
答案 0 :(得分：1)
将表单标记更改为
<form name="entry" id="entry" method="GET" action="javascript:">
将阻止页面刷新。
然后查看jquery ajax http://api.jquery.com/jQuery.ajax/ 例如。
var string ="FORMVALUE1=" + $('#FORMVALUE1ID').val() + "FORMVALUE2=" + $('#FORMVALUE2ID').val() + "REAPEAT FOR ALL YOUR VALUES";
$.ajax({
type: "GET",
url: "YOURPHPFILE.php",
data: string,
});
然后使用$_GET['FORMVALUE1'];
答案 1 :(得分：0)
首先将PHP文件分开，然后插入或执行某些操作。
PHP操作文件：YourPHPPostFile.php HTML文件：index.html或您拥有的任何名称。
然后在PHP文件中编写所有代码但在开始添加检查
if(isset($_POST['task']) && $_POST['task'] == 'addComments')
{//Your all PHP Code here}
另一方面，在你的html文件中，向这个文件发出一个AJAX请求，并在AJAX请求中使用POST方法，并在Request Parameters中包含你的数据。
如果您不想丢失已填写的表单数据，还可以使用以下内容：
<form name="entry" id="entry" method="GET" onsubmit="calltoAjax();return false;">
现在，只要用户提交表单，它就不会重置存储在数据库中的表单和数据。
谢谢，