堆栈内存溢出
  简体   繁体   English

实时获取PHP变量值，并在提交到数据库之前将其显示在警报框中

[英]Get the PHP variable value in real time and display it in the alert box before submitting to database

 原文  2013-09-15 06:59:42  0   1    javascript/ php/ jquery/ html/ mysql

问题描述

I have this page that input details for library materials. 我有此页面输入图书馆资料的详细信息。 I can manage to post the field and save it to the database using native codes. 我可以设法发布该字段，并使用本机代码将其保存到数据库中。 But, I find it more useful if the page would display first the details being inputted using a confirm box, that if clicked yes it will then save to database, but if "cancel" it will return to the page without erasing the field contents (so they can edit it again). 但是，如果页面首先显示使用确认框输入的详细信息，我发现它会更有用，如果单击“是”，它将保存到数据库，但是如果单击“取消”，它将返回到页面而不删除字段内容（因此他们可以再次对其进行编辑）。 I think it was an Ajax. 我认为这是一个Ajax。

These are my codes: 这些是我的代码：

This is the page where the form displays: "_invent.php" 这是表单显示的页面：“ _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>

This is the page for the fields where I input the details of materials: "addmaterialform.php" 这是我在其中输入材料详细信息的字段的页面：“ 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>

And this is the php code I used to save it to the database: "savetoinvent.php" 这是我用来将其保存到数据库中的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>';
            }
            }


?>

1 个解决方案

解决方案1
 0  2013-09-15 07:31:28

Change your html to: 将您的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>

Add something like the following javascript/jquery: 添加类似以下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;
}

This code will show the confirmation dialog without reloading the page. 此代码将显示确认对话框，而无需重新加载页面。 When submitting the form it will reload/load savetoinvent.php. 提交表单时，它将重新加载/加载savetoinvent.php。

Documentation about used functions: 有关使用的功能的文档：

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

On a side-note: mysql_* in php are deprecated functions. 附带说明：php中的mysql_*是已弃用的函数。 You are encouraged to use either the mysqli_* functions or the PDO functions for new projects. 建议您对新项目使用mysqli_*函数或PDO函数。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在提交PHP表单之前显示确认警报框 - Show Confirm Alert Box before submitting the PHP Form 如何在警告框中显示变量值？ - how to display variable value in alert box? 提交前实时显示选定的单选按钮和复选框 - Display chosen radio-buttons and checkboxes aside in real time before submitting PHP 实时显示 Shell 命令 Output 在一个盒子里 - PHP Display Shell Command Output in a box in Real Time 如何在php中显示警告框？ - How to display an alert box in php? 如何实时显示我的数据库（Php，js，jquery，AJAX） - How to display my database in real time (Php, js, jquery, AJAX) 在 php 中提交评论前显示登录页面 - Display login page before submitting the comment in php 在输入框中显示实时结果 - Display real time results in input box 在提交之前设置表单变量值 - Setting a form variable value before submitting 在php中显示警报框并向后导航 - Display an alert box in php and navigate back
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM