sql >> データベース >  >> RDS >> PostgreSQL

ドロップダウンリストからアイテムが選択されたときにフォームフィールドに自動入力するPHP\HTMLスクリプト

    これは、AjaxとJQueryを使用して行います。 3つのことを行う必要があります-headにAjax/JQueryコードを追加します ドキュメントの、Ajaxが接続するphpファイルを作成し、onChangeを追加します 、idvalue フィールドへの属性。

    <head></head><title></title>の後にこのJavaScriptを追加します -

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
    function check(){   
        var pipeno = $('#pipeno').val();
        if(pipeno != "pipeno"){
          jQuery.ajax({
          type: "POST",
          url: "check.php",
          data: 'pipeno='+pipeno,
          cache: false,
          success: function(response){
         var response_array = JSON.parse(response);
         $('#wallthickness').val(response_array['wallthickness']);  
         $('#jointno').val(response_array['jointno']);
         $('#measuredlength').val(response_array['measuredlength']);
         $('#serialno').val(response_array['serialno']);}
        });
        }
        else{
             $('#wallthickness').val('');   
         $('#jointno').val('');
         $('#measuredlength').val('');
         $('#serialno').val('');}
        }
    </script>
    

    次に、check.phpという名前のファイルを作成します コード付き-

    <?php
     //Php Code to connect to postgresqldatabase
     include ("connection.php");
     // Code to pull data from the database and load onto the form  
     $pipeno = pg_escape_string($_POST['pipeno']);
     $query = "SELECT * FROM fieldtally WHERE pipeno = $pipeno ";
     $result = pg_query($db_handle,$query); 
     $row = pg_fetch_row($result))
     $row_info = array('wallthickness'=>$row[1],'jointno'=>$row[2],'measuredlength'=>$row[3],'serialno'=>$row[4]);
    
     $row_info = json_encode($row_info);
     print_r($row_info); 
    ?>
    

    そして最後に、idを追加します &value フォームフィールドの属性(ファイルを変更せず、これらの行を更新するだけです)

    Select Pipe No:<select name="pipeno" id="pipeno" onChange="check()"><option value="pipeno"> --Select-- </option> 
    ...  (keep your database connection / how you create your dropdown, etc here, just edit the option below)
     echo "<option value=\"$pipeno\"> $pipeno</option>";
    ... (keep your database connection / how you create your dropdown, etc. here)
    </select> 
    ...
    Input Joint No: <input type="text" name="jointno" id="jointno">
    Input Wall Thickness: <input type="text" name="wallthickness" id="wallthickness">
    Input measured Length: <input type="text" name="measuredlength" id="measuredlength">
    Input Serial No: <input type="text" name="serialno" id="serialno">
    

    コードが変更されたため、10/19に更新-

    私はあなたのコードに番号付きのアンカーを入れました、そしてメモは最後にあります。これはすべて2つのファイルで実行できますが、2番目のファイルはcheck1.php 、データベースクエリを1つだけ持つことができます。そうしないと、ajaxでエラーが発生します。

    autopopulate.php-

    <!-- #1 -->
    <?php
    //Php Code to connect to postgresqldatabase
    $PGHOST = "localhost:25376";
    $PGDATABASE = "Pipeline";
    $PGUSER = "postgres";
    $PGPASSWORD = "Casa2009";
    $PGPORT = 5432;
    $db_handle = pg_connect("dbname=$PGDATABASE user=$PGUSER password=$PGPASSWORD");
    
    //<!-- #2 -->
     if(isset($_POST['submit_1'])){
     //Code to post data to the database
     $pipeno = pg_escape_string( $_POST['pipeno']);
     $wallthickness = pg_escape_string($_POST['wallthickness']);
     $heatno1 = pg_escape_string( $_POST['heatno1']);
     $pipeno2 = pg_escape_string( $_POST['pipeno2']);
     $heatno2 = pg_escape_string($_POST['heatno2']);
     $jointno = pg_escape_string($_POST['jointno']);
     $measuredlength = pg_escape_string($_POST['measuredlength']);
     $serialno = pg_escape_string($_POST['serialno']); 
     $wthick= pg_escape_string($_POST['wthick']);
    
    //<!-- #3 -->
     $query = "INSERT INTO fieldtally1(pipeno,wallthickness,heatno1,pipeno2,heatno2,jointno,measuredlength,serialno,wthick)VALUES ('$pipeno','$wallthickness','$heatno1','$pipeno2','$heatno2','$jointno','$measuredlength','$serialno','$wthick') ON DUPLICATE KEY UPDATE wallthickness='$wallthickness',heatno1='$heatno1',pipeno2='$pipeno2',heatno2='$heatno2',jointno='$jointno',measuredlength='$measuredlength',serialno='$serialno',wthick='$wthick'";
    
    //<!-- #4a -->
     $result = pg_query($query);
     if (!$result) {
     $errormessage = pg_last_error();
     $message = "Error with query: " . $errormessage;
     }
     $message = sprintf ("These values were inserted into the database - %s %s %s %s %s %s %s %s %s",$pipeno,$wallthickness,$heatno1,$pipeno2,$heatno2,$jointno,$measuredlength,$serialno,$wthick);
     }
    
     // Code to pull data from the database and load onto the form
     $query = 'select pipeno, wallthickness from fieldtally1 order by pipeno asc'; 
     $result = pg_query($db_handle,$query); 
     while ($row = pg_fetch_row($result))
     {
        // Creates Arrays to use in dropdowns
         $pipeno_array[] = $row[0];
         $wallthickness_array[] = $row[1];
     } 
    
      // This function creates dropdowns that can be used in your forms
     function dropdown($field_name, $num){
         // Creates the Dropdown
     //<!-- #5a -->
         $c = ($field_name == 'pipeno') ? ' onChange="check('.$num.');"' : '';
         echo "<select name=\"".$field_name."\" id=\"".$field_name.$num."\"$c>\n";
         echo "<option value=\"\"> --- Select --- </option>\n";
         // Chooses which array to use for Dropdown options
         global $pipeno_array, $wallthickness_array;
         $name_array = ($field_name == 'pipeno') ? $pipeno_array : $wallthickness_array;
         // Creates the Dropdown options based off the array above
         foreach($name_array as $k){
             echo "<option value=\"$k\">$k</option> \n"; }
         // Ends the Dropdown
         echo "</select>\n";
     }
    
     ?>
     <html>
         <head><title>UG Pipeline Field Data Capture</title></head>
          <body>
           <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
           <script type="text/javascript">
     <!-- #5b -->
            function check(num){
               var pipeno_id = '#pipeno_'+num;
               var pipeno = $(pipeno_id).val();
               if(pipeno != ""){
                 jQuery.ajax({
                 type: "POST",
                 url: "check1.php",
                 data: 'pipeno='+pipeno,
                 cache: false,
                 success: function(response){
                 var response_array = JSON.parse(response);
                 $('#heatno1').val(response_array['heatno1']);
                 $('#pipeno2').val(response_array['pipeno2']); 
                 $('#heatno2').val(response_array['heatno2']);
                 $('#jointno').val(response_array['jointno']);
                 //$('#measuredlength').val(response_array['measuredlength']); // this should be input from the user
                // $('#serialno').val(response_array['serialno']);  //This should also be input from the user
                }           
                });
               }
               else{
               $('#heatno1').val('');
               $('#pipeno2').val('');
               $('#heatno2').val('');
               $('#jointno').val('');}
                }
      </script> 
    
     <!-- #4b -->
     <?php printf($message);?>
     <!-- #6.1 -->
     <form action="" method="post">
     <table width="800" cellpadding= "10" cellspacing="1" border="2">
     <tr align="center" valign="top">
     <td align="center" colspan="1" rowspan="1" bgcolor="#64b1ff">
     <h3>Input Field Tally Information</h3>
          Select Pipe Thickness:<select name="wthick" id="wthick">
     <!-- #7.1 -->
      <option value=""> --Select-- </option> 
      <option value="9.8">  9.8  </option>
      <option value="13.5"> 13.5 </option>
      <option value="15.9"> 15.9 </option>
      </Select>           
     Select Pipe No:<?php dropdown('pipeno', 1); ?>  Select Wall Thickness:<?php dropdown('wallthickness', 1); ?><br /><br /> 
     HeatNo1: <input type="text" name="heatno2" id="heatno1"> PipeNo2: <input type="text" name="pipeno2" id="pipeno1"> HeatNo2: <input type="text" name="heatno2" id="heatno2"><br /><br /> 
     Joint No: <input type="text" name="jointno"> Input measured Length: <input type="text" name="measuredlength"> Input Serial No: <input type="text" name="serialno"><br><br> 
     <!-- #8.1 -->
     <input type="Submit" name="submit_1" value="Submit">
     <!-- #9.1 -->
     </td></tr></table></form>
     <p></p>
    
     <!-- #6.2 -->
     <form action="" method="post">
     <table width="800" cellpadding= "10" cellspacing="1" border="2">
     <tr align="center" valign="top">
     <td align="center" colspan="1" rowspan="1" bgcolor="#ff9d9d">
     <h3>Input Field Bend Information</h3>
      Select Wall Thickness:<select name="wallthickness" id="wallthickness">
     <!-- #7.2 -->
         <option value=""> --Select-- </option> 
         <option value="9.8">  9.8  </option>
         <option value="13.5">13.5 </option>
         <option value="15.9"> 15.9 </option>
      </select>
     <!-- #10.1 -->           
     Select Pipe No:<?php dropdown('pipeno', 2); ?>  Select Wall Thickness:<?php dropdown('wallthickness', 2); ?><br /><br /> 
     HeatNo1: <input type="text" name="heatno1" id="heatno1_2"> PipeNo2: <input type="text" name="pipeno2" id="pipeno2_2"> HeatNo2: <input type="text" name="heatno2" id="heatno2_2"><br /><br /> 
     Joint No: <input type="text" name="jointno"> Input Measured Distance: <input type="text" name="measureddistance"><br><br> 
     Input Bend Angle: <input type="text" name="benddegree"> Input Bend Type: <input type="text" name="bendtype"><br><br>
     <!-- #8.2 -->
     <input type="Submit" name="submit_2" value="Submit">
     <!-- #9.2 -->
     </td></tr></table></form>
     <p></p>
    
     <!-- #6.3 -->
     <form action="" method="post">
     <table width="800" cellpadding= "10" cellspacing="1" border="2">
     <tr align="center" valign="top">
     <td align="center" colspan="1" rowspan="1" bgcolor="#66CC66">
     <h3>Input App. Tally Information</h3>
     <!-- #11 -->
          Select Wall Thickness:<select name="wallthickness1" id="wallthickness1">
     <!-- #7.3 -->
         <option value=""> --Select-- </option> 
         <option value="9.8">  9.8  </option>
         <option value="13.5"> 13.5 </option>
         <option value="15.9"> 15.9 </option>
      </select>
     <!-- #10.2 -->             
     Select Pipe No:<?php dropdown('pipeno', 3); ?>  Select Wall Thickness:<?php dropdown('wallthickness', 3); ?><br /><br />            
     Input Tally Type: <input type="text" name="type">   Input Serial No: <input type="text" name="serialno"><br><br>
     Input Reference ID: <input type="text" name="referenceid"><br><br>
     <!-- #8.3 -->
     <input type="Submit" name="submit_3" value="Submit">
     </td></tr></table>
     </form>
     </body>
     </html>
    

    check1.php-

    <?php
    //Php Code to connect to postgresqldatabase
    $PGHOST = "localhost:25376";
    $PGDATABASE = "Pipeline";
    $PGUSER = "postgres";
    $PGPASSWORD = "Casa2009";
    $PGPORT = 5432;
    $db_handle = pg_connect("dbname=$PGDATABASE user=$PGUSER password=$PGPASSWORD");
    
    // Code to pull data from the database and load onto the form  
    $pipeno = pg_escape_string($_POST['pipeno']);
    $query = "SELECT * FROM fieldtally1 WHERE pipeno = $pipeno ";
    $result = pg_query($db_handle,$query); 
    $row = pg_fetch_row($result);
    $row_info = array('heatno1'=>$row[1],'pipeno2'=>$row[2],'heatno2'=>$row[3],'jointno'=>$row[4]);
    $row_info = json_encode($row_info);
    print_r($row_info); 
    ?>
    

    ここに問題があります-

    1-すべての<?php ?>を移動します ページの上部にスクリプト。これにより、(1)コードがクリーンアップされ、(2)すべてのデータベースクエリを同時に処理できるようになります。

    2-fieldtally1を更新するためのクエリ これで、データベースからドロップダウンを取得する前に完了します。

    3-入力フィールドにデータを入力して[送信]をクリックした後の2番目の問題after entering data into the input fields and click submit. it creates a new record in the database instead of populating the required columns in the database INSERT INTO ... VALUES ... ON DUPLICATE KEY UPDATE ...を使用します 。 pipenoの場合 はすでにデータベースにあります(Primary Keyであるため) )UPDATE INSERTの代わりに 。

    4-errorを保存することをお勧めします またはsuccess メッセージ(#4a)を作成し、HTML(#4b)の上部にエコーします。

    5a-ハードコードされたpipenoから変更しました ドロップダウン、関数を使用して動的ドロップダウンに戻ります。したがって、JavaScriptがありません-onChange=check(); 5b-pipenoを作成しているので &onChange=check(); 動的に、check()を変更する必要があります IDを動的に取得する関数もあります。

    6-$PHP_SELF 有効じゃない。 $_SERVER['PHP_SELF']を試していたと思います 、ただし、これは簡単にハッキングされるため、action=""を使用することをお勧めします。 。 [6.1,6.2,6.3]

    7-<select><option>を実行する場合 同じvalue=""を使用していました 、ただし、投稿時に値を取得するには、それぞれが異なる必要があります。また、ほとんどの</option> のスペルが</optio>と間違っていた 。 [7.1,7.2,7.3]

    8-同じページに3つのフォームがある場合、それぞれに異なる名前を付ける必要があります。そうしないと、どの送信ボタンがクリックされたかがわかりません。 [8.1,8.2,8.3]

    9-最初の2つのフォームに終了タグがありませんでした-</td></tr></table></form> 。 [9.1、9.2]

    10-あなたの2と3のフォームでは、idを使用しています 1番目の形式で使用される。すべてのidとして、これは無効です 一意である必要があります。 [10.1,10.2]

    11-3番目のフォームはid="wallthickness"を使用します フォーム2で使用されました。idについては上記を参照してください 独自性。



    1. OracleにGUIDを保存するにはどうすればよいですか?

    2. Oracleパーサーを使用してXMLから最初に発生した値を取得する

    3. CSVデータをPostgreSQLデータベース(リモートデータベース)に挿入する方法

    4. SQLGroupByとOrderBy