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