-3

你好，

我有一个表单，我想将其值插入 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()">
        &nbsp;&nbsp;
        <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>';
    }
 }
}?>
4

2 回答 2

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

然后只需使用获取 php 文件中的表单值$_GET['FORMVALUE1'];

于 2013-02-26T14:54:53.010 回答
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 方法，并将您的数据包含在请求参数中。

如果您不想丢失已填写的表单数据，您可以使用另一件事：

<form name="entry" id="entry" method="GET" onsubmit="calltoAjax();return false;">

现在，无论何时用户提交表单，它都不会重置表单，并且数据也存储在您的数据库中。

谢谢，

于 2014-03-05T04:31:07.040 回答