javascript - 实时获取PHP变量值，并在提交到数据库前显示在警告框中

Question

我有这个页面，可以输入图书馆资料的详细信息。我可以设法发布该字段并使用本机代码将其保存到数据库中。但是，我发现如果页面首先显示使用确认框输入的详细信息会更有用，如果单击是，它将保存到数据库，但如果“取消”它将返回页面而不删除字段内容（所以他们可以再次编辑它）。我认为这是一个阿贾克斯。

这些是我的代码：

这是表单显示的页面：“_invent.php”

<?php
//INVENTORY FOR LIBRARIAN
session_start();
require_once('securitytwo.php');
//SECURITY
$db = mysql_connect("localhost","lemuel","12345"); //connect to the server
      mysql_select_db("integratedlibrarysystem"); //connect to the database

       $query="Select * from libinventuser where username='{$_SESSION['user']}' and password='{$_SESSION['pass']}'";
       $result=mysql_query($query);
       $num=mysql_num_rows($result);
        if($num!=0)
        {
?>
<html>
<head>
<script language="javascript" type="text/javascript" src="clarify.js"></script>
<link href="tabs.css" rel="stylesheet" type="text/css" />
<?php include("clarify.php"); ?>
</head>
INVENTORY
<br><br><br>

<ol id="toc">
    <li><a href="#inventory"><span>Inventory</span></a></li>
    <li><a href="#addmaterial"><span>Add Material</span></a></li>
</ol>

<div class="content" id="inventory">
Inventory
</div>

<!-- Add Library Material inside the database-->
<div id="addmaterial" class="content">
<h2>Add Material</h2>
<br>
<form method="POST" action="savetoinvent.php">
<?php include('addmaterialform.php'); //Add material form?> 
<div class="space"><input type="submit" id="save" value="Save"></div>
</form>
<div id="message"></div>
</div>

<script src="activatables.js" type="text/javascript"></script>
<script type="text/javascript">
activatables('page', ['inventory', 'addmaterial']);
</script>
<a href="adminmainpage.php">Back</a>
<?php
}
else{
header("Location: index.php");
}
?>
</body>
</html>

这是我输入材料详细信息的字段页面：“addmaterialform.php”

<html>
<head>
<?php
session_start();
?>
<script language="javascript">
var last = 1;
var first = 1;
var middle = 1; 
var ctr = 1;
var ctra = 1;
var subj = 1; 
function addInput() {
ctr++;
last++;
first++;
middle++; // Para every time na iclick ni user ang addInput mag-increment siya. Parang eto na din yung unique identifier ng author
document.getElementById('author').insertAdjacentHTML('beforeend',
"<input type='text' name='l"+last+"' placeholder='last name' value=''> " +
"<input type='text' name='f" +first+ "' placeholder='first name' value=''> " +
"<input type='text' name='m" +middle+ "' placeholder='middle name' value=''><br>") ;
document.getElementById('ctr').value = ctr;
document.getElementById('last').value = last;
document.getElementById('first').value = first;
document.getElementById('middle').value = middle;
}
function addSubjectMatter() {
ctra++;
subj++;
document.getElementById('subjmat').insertAdjacentHTML('beforeend',
"<input type='text' name='s"+subj+"' value=''><br>") ;
document.getElementById('ctra').value = ctra;
}
</script>
<input type="hidden" name="ctr" id="ctr">
<input type="hidden" name="ctra" id="ctra">
</head>
<body>
<div id="container">
<div id="subcontainer">
    <div class="label">Title</div> <!--Title-->
    <div class="inputs"><input type="text" name="title" id="title" size="60px"></div>
    <div class="label">Author(s)</div> <!--Author(s)-->
    <div class="inputs">
        <div id="author">
        <!--Last Name--><input type="text" name="l1" placeholder="last name" value=""><!-- Ginawa kong "last_1" yung "last" -->
        <!--First Name--><input type="text" name="f1" placeholder="first name" value=""><!-- Ginawa kong "first_1" yung "first" -->
        <!--Middle Name--><input type="text" name="m1" placeholder="middle name" value=""><!-- Ginawa kong "middle_1" yung "middle" -->
        <input type="button" onclick="addInput()" name="add" value="Add" /><br>
        </div>
    </div>
    <div class="label">Edition</div> <!--Edition-->
    <div class="inputs"><input type="text" name="edition" id="edition"></div>
    <div class="label">Place of Publication</div> <!--Place of Publication-->
    <div class="inputs"><input type="text" name="place" size="60px"></div>
    <div class="label">Copyright date/Publication date</div> <!--Copyright date/Publication date-->
    <div class="inputs">
        <table border="0" cellspacing="0" >
        <tr><td  align="left"  >   
        <!-- Month -->
        <select name="cpdm" value=''>Select Month</option>
        <option value='01'>January</option>
        <option value='02'>February</option>
        <option value='03'>March</option>
        <option value='04'>April</option>
        <option value='05'>May</option>
        <option value='06'>June</option>
        <option value='07'>July</option>
        <option value='08'>August</option>
        <option value='09'>September</option>
        <option value='10'>October</option>
        <option value='11'>November</option>
        <option value='12'>December</option>
        </select>
        <!-- Day -->
        </td><td  align="left">   
        <select name="cpdd">
        <option value='01'>01</option>
        <option value='02'>02</option>
        <option value='03'>03</option>
        <option value='04'>04</option>
        <option value='05'>05</option>
        <option value='06'>06</option>
        <option value='07'>07</option>
        <option value='08'>08</option>
        <option value='09'>09</option>
        <option value='10'>10</option>
        <option value='11'>11</option>
        <option value='12'>12</option>
        <option value='13'>13</option>
        <option value='14'>14</option>
        <option value='15'>15</option>
        <option value='16'>16</option>
        <option value='17'>17</option>
        <option value='18'>18</option>
        <option value='19'>19</option>
        <option value='20'>20</option>
        <option value='21'>21</option>
        <option value='22'>22</option>
        <option value='23'>23</option>
        <option value='24'>24</option>
        <option value='25'>25</option>
        <option value='26'>26</option>
        <option value='27'>27</option>
        <option value='28'>28</option>
        <option value='29'>29</option>
        <option value='30'>30</option>
        <option value='31'>31</option>
        </select>
        <!-- Year -->
        </td><td  align="left"  >   
        <input type="text" name="cpdy" size="4" placeholder="year">
        </table>
    </div>
    <div class="label">No. of pages:</div> <!--No. of pages-->
    <div class="inputs"><input type="text" name="nopa" size="5px"></div>
    <div class="label">No. of copies:</div> <!--No. of copies-->
    <div class="inputs"><input type="text" name="nocop" size="5px"></div>
    <div class="label">Subject matter</div> <!--Subject matter-->
    <div class="inputs">
        <div id="subjmat">
        <input type="text" name="s1" value=""> <!--subject matter than can be use as the tag of the subject-->
        <input type="button" onclick="addSubjectMatter()" name="add" value="Add" /><br>
        </div>
    </div>
    <div class="space">&nbsp;</div>
    <div class="space"><b>Purchase details:</b></div> <!--Purchase details-->
    <div class="space">&nbsp;</div>
    <div class="label">Date of purchase</div> <!--Date of purchase-->
    <div class="inputs">
        <table border="0" cellspacing="0" >
        <tr><td  align="left"  >   
        <!-- Month -->
        <select name="dapurm" value=''>Select Month</option>
        <option value='01'>January</option>
        <option value='02'>February</option>
        <option value='03'>March</option>
        <option value='04'>April</option>
        <option value='05'>May</option>
        <option value='06'>June</option>
        <option value='07'>July</option>
        <option value='08'>August</option>
        <option value='09'>September</option>
        <option value='10'>October</option>
        <option value='11'>November</option>
        <option value='12'>December</option>
        </select>
        <!-- Day -->
        </td><td align="left">   
        <select name="dapurd">
        <option value='01'>01</option>
        <option value='02'>02</option>
        <option value='03'>03</option>
        <option value='04'>04</option>
        <option value='05'>05</option>
        <option value='06'>06</option>
        <option value='07'>07</option>
        <option value='08'>08</option>
        <option value='09'>09</option>
        <option value='10'>10</option>
        <option value='11'>11</option>
        <option value='12'>12</option>
        <option value='13'>13</option>
        <option value='14'>14</option>
        <option value='15'>15</option>
        <option value='16'>16</option>
        <option value='17'>17</option>
        <option value='18'>18</option>
        <option value='19'>19</option>
        <option value='20'>20</option>
        <option value='21'>21</option>
        <option value='22'>22</option>
        <option value='23'>23</option>
        <option value='24'>24</option>
        <option value='25'>25</option>
        <option value='26'>26</option>
        <option value='27'>27</option>
        <option value='28'>28</option>
        <option value='29'>29</option>
        <option value='30'>30</option>
        <option value='31'>31</option>
        </select>
        <!-- Year -->
        </td><td  align="left"  >   
        <input type="text" name="dapury" size="4" placeholder="year">
        </table>
    </div>
    <div class="label">Place of purchase</div> <!--Place of purchase-->
    <div class="inputs"><input type="text" name="plpur" size="60px"></div>
    <div class="label">Name of Dealer</div> <!--Name of dealer-->
    <div class="inputs"><input type="text" name="namedea" size="60px"></div>
    <div class="space"><b>Price:</b></div>
    <div class="label">Amount</div> <!--Price-->
    <div class="inputs"><input type="text" name="amount"></div>
    <div class="label">Currency</div> <!--Currency-->
    <div class="inputs"><input type="text" name="currency"></div>
    <div class="space">&nbsp;</div>
    <div class="space">&nbsp;</div>
    <div class="space"><b>Code Number:</b></div> <!--Code Number-->
    <div class="space">&nbsp;</div>
    <div class="label">Locator</div> <!--Locator-->
    <div class="inputs"><input type="text" name="locator"></div>
    <div class="label">General Classification</div> <!--General Classification-->
    <div class="inputs"><input type="text" name="genclass"></div>
    <div class="label">Specific No.</div> <!--Specific No.-->
    <div class="inputs"><input type="text" name="specno"></div>
    <div class="label">Author No.</div> <!--Author No.-->
    <div class="inputs"><input type="text" name="authorno"></div>
    <div class="label">Copyright/Date of Publication</div> <!--Copyright/Date of Publication-->
    <div class="inputs"><input type="text" name="cdm" placeholder="year" size="5px"></div>
    <div class="label">Volume/Book no.</div> <!--Volume/Book no.-->
    <div class="inputs"><input type="text" name="volb"></div>
</div>
</div>
</body>
</html>

这是我用来将其保存到数据库的 php 代码：“savetoinvent.php”

<?php
session_start();
//Security and connection to database
$db = mysql_connect("localhost","lemuel","12345"); //connect to the server
      mysql_select_db("integratedlibrarysystem"); //connect to the database

       $query="Select * from libinventuser where username='{$_SESSION['user']}' and password='{$_SESSION['pass']}'";
       $result=mysql_query($query);
       $num=mysql_num_rows($result);
        if($num!=0)
        {

        //ACCESSION NUMBER
        //Checking of the last accession number being inputted
        $acce="SELECT MAX(accenum) FROM libinvent";
        $accer=mysql_query($acce);
        $viewuser_row=mysql_fetch_array($accer);

            if($viewuser_row['MAX(accenum)']<1||$viewuser_row['MAX(accenum)']==null){
            $accesnum = 1;
            $_SESSION['accessnum']=$accesnum;
            }
            else{
            $_SESSION['accessnum'] = $_SESSION['accessnum'] + 1;
            }

        //CODE NUMBER
        $locator = $_POST['locator']; //Locator
        $genclass = $_POST['genclass']; //General Classification
        $specno = $_POST['specno']; //Specific Number
        $authorno = $_POST['authorno']; //Author Number
        $dpub = $_POST['cdm']; //Copyright/Date of Publication
        $volb = $_POST['volb']; //Volume or Book Number

        //AUTHOR    
        //Getting the value of Author(s)
        $ctr = $_POST['ctr']; //author counter
        if($ctr==null){
        $ctr=1; //counting the number of Authors
        }
        $lasttemp="";
        for($i=1; $i<=$ctr; $i++){
            $lasttemp.=$_POST['l'.$i].', '.$_POST['f'.$i].' '.$_POST['m'.$i].';'; //temp = temp + last, first and middle names
        }

        //TITLE
        $title = $_POST['title'];

        //EDITION
        $edition = $_POST['edition'];

        //PLACE OF PUBLICATION
        $place = $_POST['place'];

        //DATE OF PUBLICATION
        $datepub = $_POST['cpdm'].'-'.$_POST['cpdd'].'-'.$_POST['cpdy'];

        //NUMBER OF PAGES
        $nopa = $_POST['nopa'];

        //NUMBER OF COPIES
        $nocop = $_POST['nocop'];

        //DATE OF PURCHASE
        $datepurch = $_POST['dapurm'].'-'.$_POST['dapurd'].'-'.$_POST['dapury'];

        //PLACE OF PURCHASE
        $plpur = $_POST['plpur'];

        //NAME OF DEALER
        $namedea = $_POST['namedea'];

        //PRICE
        $price = $_POST['currency'].' '.$_POST['amount']; //Currency and Amount

        //SUBJECT MATTER    
        //Getting the value of subject(s)
        $ctra = $_POST['ctra']; //subject counter
        if($ctra==null){
        $ctra=1; //counting the number of Authors
        }
        $lasttempa="";
        for($i=1; $i<=$ctra; $i++){
            $lasttempa.=$_POST['s'.$i].';'; //temp = temp + last, first and middle names
        }

        //Saving the details into the database
        $query1="Insert into libinvent values('{$_SESSION['accessnum']}', '$locator', '$genclass', '$specno', 
        '$authorno', '$dpub', '$volb', '$lasttemp', '$title', '$edition', '$place', '$datepub', '$nopa', 
        '$nocop', '$datepurch', '$plpur', '$namedea' ,'$price' ,'$lastempa')";
        $result1=mysql_query($query1);


        //Searching
        $data=explode(';', $lasttemp);
        for($i=0; $i<=$ctr; $i++){
        echo $data[$i].'; ';
        }
        //Author counter


        if(mysql_affected_rows()==1){
            echo "message sent!";
            echo '<a href="_invent.php">GO Back</a>';
            }
            }


?>

score 0 · Accepted Answer

将您的 html 更改为：

<form method="POST" action="savetoinvent.php">
  <div id="forminput">
    <?php include('addmaterialform.php'); //Add material form?> 
    <div class="space"><input type="submit" id="save" value="Save" /></div>
  </div>
  <div id="formconfirm" style="display: none">
    <div id="formconfirminner"></div>
    <br/><input type="submit" id="saveconfirm" value="Hell Yeah!" /> <a href="#" id="cancelconfirm">Errr... no....</a>
  </div>
</form>

添加类似以下 javascript/jquery 的内容：

//Keep the actual save button, in case the user disables javascript. This way, they can still
//submit the form. If javascript is enabled, cancle the submission otherwise to show the confirmation
$('#save').on( 'click', function( e ) {
  e.preventDefault(); //Prevent the click event trigger submitting the form
  $('#forminput').hide();
  $('#formconfirm').show();
  $('#formconfirminner').html( preparesomethingfancy() );
} );

$('#cancelconfirm').on( 'click', function( e ) {
  e.preventDefault();
  $('#forminput').show();
  $('#formconfirm').hide();
  $('#formconfirminner').html( '' );
} );

function preparesomethingfancy() {
  //Here you prepare the html to display in the confirmation message
  var output = "";
  output += "Title: " + $('#title').prop( 'value' );
  output += "<br/><br/>Do you really want to strive for world domination?";
  return output;
}

此代码将显示确认对话框而无需重新加载页面。提交表单时，它将重新加载/加载 savetoinvent.php。

关于使用函数的文档：

JsFiddle：http: //jsfiddle.net/EuJBq/1/

附带说明：mysql_*在 php 中是不推荐使用的函数。我们鼓励您在新项目中使用mysqli_*函数或 PDO 函数。

javascript - 实时获取PHP变量值，并在提交到数据库前显示在警告框中

1 回答 1

Related

Reference