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

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

转载作者：行者123 更新时间：2023-11-30 01:18:35

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

这些是我的代码:

这是表单显示的页面:“_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>

这是我输入 Material 详细信息的字段页面:“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>';
            }
            }


?>

最佳答案

将 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/

<小时/>

旁注:php 中的 mysql_* 是已弃用的函数。我们鼓励您在新项目中使用 mysqli_* 函数或 PDO 函数。

关于javascript - 实时获取PHP变量值并在提交数据库之前显示在警告框中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18809777/

文章推荐： mysql - 字段列表中的未知表(vb.net 中的 MySQL)

文章推荐： java - 无法在Java中的prepareStatement中设置日期

文章推荐： PHP-MySql-设置 cookie 不起作用

c# - 异步任务获取 VS HttpResponseMessage 获取
我需要您在以下方面提供帮助。近一个月来，我一直在阅读有关任务和异步的内容。我想尝试在一个简单的 wep api 项目中实现我新获得的知识。我有以下方法，并且它们都按预期工作: public Htt
java - 无法从 URL 获取 URI，获取 null？
我的可执行 jar 中有一个模板文件 (.xls)。不需要在运行时我需要为这个文件创建 100 多个副本(稍后将唯一地附加)。用于获取 jar 文件中的资源 (template.xls)。我正在使用
javascript - Backbone 的模型原型(prototype)获取 vs backbone 获取
我在查看网站的模型代码时对原型(prototype)有疑问。我知道这对 Javascript 中的继承很有用。在这个例子中... define([], function () { "use
javascript - 获取 scrollTop、获取 offsetHeight 和 getStyle 需要很长时间
影响我性能的前三项操作是: 获取滚动条获取偏移高度 Ext.getStyle 为了解释我的应用程序中发生了什么:我有一个网格，其中有一列在每个单元格中呈现网格。当我几乎对网格的内容做任何事情时，它运
javascript - 获取 URL 参数函数，获取 url 部分的值，或者如果存在但没有值则返回 true？
我正在使用以下函数来获取 URL 参数。 function gup(name, url) { name = name.replace(/[\[]/, '\\\[').replace(/[\]]/,
c - MacOS 使用 sysctl() 获取 HW_MACHINE_ARCH 获取 "no such file or directory"
我最近一直在使用 sysctl 来做很多事情，现在我使用 HW_MACHINE_ARCH 变量。我正在使用以下代码。请注意，当我尝试获取其他变量 HW_MACHINE 时，此代码可以完美运行。我还认为
ios - 将我的 YouTube channel 获取(获取)到我的 iOS 应用程序中
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。关闭 9 年前。要求提供代码的问题必须表现出对所解决问题的最低限度的理解。包括尝试过的解决方案、为什么
javascript - webpack:如何从 "bower_components"获取 JavaScript，而不是从 "node_modules"获取 JavaScript
由于使用 main-bower-files 作为使用 Gulp 的编译任务的一部分，我无法使用 node_modules 中的 webpack 来require 模块code> dir 因为我会弄乱当
Javascript - 从 "Monday"获取 "mon"或从 "Tuesday"获取 "tue"等
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 5 年前。 Improve this qu
Java:无法将 Gridlayout 应用于 Jscrollpane。获取获取 java.lang.ClassCastException
我使用 Gridlayout 在一行中放置 4 个元素。首先，我有一个 JPanel，一切正常。对于行数变大并且我必须能够向下滚动的情况，我对其进行了一些更改。现在我的 JPanel 上添加了一个 J
python - 如何从 key BlockDeviceMappings 获取 VolumeId(boto3 获取 ec2 的卷信息)
由于以下原因，我想将 VolumeId 的值保存在变量中: #!/usr/bin/env python import boto3 import json import argparse import
angularjs - 未使用 acquireTokensilent 获取 token ，但使用 acquireTokenpopup Msal-browser 获取 token
我正在将 MSAL 版本 1.x 更新为 MSAL-browser 的 Angular 。所以我正在尝试从版本 1.x 迁移到 2.X.I 能够成功替换代码并且工作正常。但是我遇到了 acquireT
python - 使用 GroupBy 获取 Pandas 的平均值 - 获取 DataError : No numeric types to aggregate -
我知道有很多关于此的问题，例如 Getting daily averages with pandas和 How get monthly mean in pandas using groupby但我遇到
javascript - 无法在 mvc 获取 Controller 方法(来自 Uri())中从 QueryString 获取 DATETIME
This is the query string that I am receiving in URL. Output url: /demo/analysis/test?startDate=Sat+
ubuntu - 从 OpenLayer 3 获取 Geoserver 获取 '500 (Internal Server Error)'
我正在尝试使用 javascript 中的以下代码访问 Geoserver 层 var gkvrtWmsSource =new ol.source.ImageWMS({ u
javascript - 使用 XMLHttpRequest 获取 Ecobee API 信息。获取 500(错误 1 : "Authentication failed. Token is required.")
API 需要一个包含授权代码的 header 。这就是我到目前为止所拥有的: var fullUrl = 'https://api.ecobee.com/1/thermostat?json=\{"s
c# - 获取/删除文件的最后一个字符而不加载到内存中
如何获取文件中的最后一个字符，如果是某个字符，则删除它而不将整个文件加载到内存中？这就是我目前所拥有的。 using (var fileStream = new FileStream("file.t
JSP 获取/设置整个对象的参数
我是这个社区的新手，想出了我的第一个问题。我正在使用 JSP，我成功地创建了 JSP-Sites，它正在使用jsp:setParameter 和 jsp:getParameter 具有单个字符串。
multithreading - 获取/释放语义
在回答 StoreStore reordering happens when compiling C++ for x86 @Peter Cordes 写过 For Acquire/Release se
javascript - 获取 .on 中使用的函数的结果
我有一个函数，我们将其命名为 X1，它返回变量 Y。该函数在操作 .on("focusout", X1) 中使用。如何获取变量Y？执行.on后X1的结果？最佳答案您可以更改 Y 的范围以使其位于函

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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