php mysqli form - заполнить поля ввода из выпадающего списка select - PullRequest
Новая
       10

php mysqli form - заполнить поля ввода из выпадающего списка select

0 голосов
/ 18 октября 2019

У меня есть веб-страница php, которую я могу выбрать в раскрывающемся поле выбора, и оно заполняет это поле, как и должно быть, у меня возникают проблемы с заполнением некоторых полей ввода. Я провел несколько дней, пробуя всевозможные решения, найденные здесь и в других местах в Google, но немногие, где заполненное раскрывающееся меню mysqli используется для заполнения других полей ввода. Я могу заставить его работать там, где он заполняет таблицу, но мне нужно разрешить пользователю изменять заполненные данные, поэтому я использую поле ввода.

Файл CDC3.php: 

   <?php
   include_once 'includes/db_connect.php';
   ?>

   <?php
    $b = intval($_GET['b']);

    $sql="SELECT * FROM Batches WHERE BatchNum = '".$b."'";
    $result = $mysqli->query($sql);
    while ($row = mysqli_fetch_array($result)) {
    }
    ?>

Основной php-файл: 

<?php include_once 'includes/db_connect.php'; ?>
<!DOCTYPE HTML>
<html>
<head>
<title>CDC Wash Run Entry</title>
  <script>
  function showBatch(str) {
    if (str == "") {
        document.getElementById("txtMessage").innerHTML = "";
        return;
    } 
    else { 
        xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtMessage").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","CDC3.php?b="+str,true);
        xmlhttp.send();
    }
}
  </script>
</head>
<body>
<form id="WashForm" name="washform" method="POST">
<h1>CDC Wash Run Entry</h2>
<label for="DateTimeCode">DateTimeCode</label>
 <input name="DateTimeCode" value="<?php echo date('Y-m-d H:i:s'); ?>" required><br>
<label for="BatchNum">BatchNum</label>

    <?php
    $sql = "SELECT BatchNum, BatchName, SourceProduct, SourceIngredient FROM Batches ORDER by BatchNum DESC";
    $result = $mysqli->query($sql);
    echo "<select name='BatchNum' id='BatchNum' onchange='showBatch(this.value)'>";
    echo "<option value=''> Select BatchNum        </option>";
    while ($row = $result->fetch_assoc()) {
        echo "<option value='" . $row['BatchNum'] . "'>" . $row['BatchNum'] .' - '. $row['BatchName'] . "</option>";
    }
    echo "</select><br><br>";
    echo "<label for='BatchName'>Batch Name</label>";
    echo " <input name='BatchName' value='".$row['BatchName']."'><br>";
    echo "<label for='SourceProduct'>Source Product</label>";
    echo " <input name='SourceProduct' value='".$row['SourceProduct']."'><br>";
    echo "<label for='SourceIngredient'>Source Ingredient</label>";
    echo "<input name='SourceIngredient' value='".$row['SourceIngredient']."'><br>";
    ?>


</form>        
</body>
</html>

Рабочий, модифицированный код, извините за стену кода, но он работает

База данных / включает в себя /файл psl-configPDO.php 

<?php
$servername = "localhost";
$username = "DBadmin";
$password = "xxxxxxxx"; 
$dbname = "CDCtest";
?>

База данных / файл / includes / db_connect_PDO.php (работает из командной строки) 

<?php
require_once('psl-configPDO.php');
try{
    $dbh = new PDO('mysql:host='.$servername.';dbname='.$dbname,$username,$password);
                    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    die(json_encode(array('outcome' => true)));
}
catch(PDOException $ex){
    die(json_encode(array('outcome' => false, 
                          'message' => 'Unable to connect to '.$servername.':'.$dbname.' with '.$username)));
}
$dbh = null;
?>

База данных / включает в себя/jquery.min.js - это wget из https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

файла базы данных / CDC_Ajax_PDO.php 

?>
<?php
require_once('includes/psl-configPDO.php');
$db = new PDO('mysql:host='.$servername.';dbname='.$dbname,$username,$password);
$sth = $db->prepare('SELECT BatchName, SourceProduct, SourceIngredient FROM Batches WHERE BatchNum =:BatchNum');
$sth->bindParam(':BatchNum', $_POST['BatchNum'], PDO::PARAM_INT);
$sth->execute();
$data = new stdClass;
$status = 'failed';
if ($row = $sth->fetchObject() ) {
    $data = $row;
    $status = 'success';
    }
header('Content-Type: application/json');
echo json_encode([
    'status' => $status,
    'data' => $data
    ]);
?>

базы данных / файла CDC_WashFormPDO.php 

<?php
require_once('includes/psl-configPDO.php');
$pdo = new PDO('mysql:host='.$servername.';dbname='.$dbname,$username,$password);
$db = $pdo->prepare("SELECT BatchNum, BatchName FROM Batches ORDER by BatchNum DESC");
$db->execute();
?>

<!DOCTYPE HTML>
<html class="supernova"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta property="og:title" content="CDC Wash Run Entry" >
<meta property="og:description" content="Please click submit to complete this form.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="HandheldFriendly" content="true" />
<link type="text/css" rel="stylesheet" href="styles/main.css" />
<head>
 <title>CDC Wash Run Entry</title>
 <script src = includes/jquery.min.js></script>
</head>
<body>
<form class="jotform-form" accept-charset="utf-8" id="WashForm" name="washform" method="POST">
<div class="form-all">
  <ul class="form-section page-section">
    <li id="cid_1" class="form-input-wide" data-type="control_head">
      <div class="form-header-group ">
        <div class="header-text httal htvam">
          <h1>CDC Wash Run Entry</h2>
          <label class="form-label form-label-top form-label-auto">Logged in as: <?php echo htmlentities($_SESSION['username']); ?> </label>
        </div>
      </div>
    </li>
    <li class="form-line" data-type="control_textbox">
        <label class="form-label form-label-top form-label-auto" for="DateTimeCode">DateTimeCode</label>
        <div class="form-input-wide">
          <input type="text" class="form-control" size="20" name="DateTimeCode" value="<?php echo date('Y-m-d H:i:s'); ?>" required>
        </div>
    </li>
    <li class="form-line" data-type="control_dropdown">
        <label class="form-label form-label-top form-label-auto" for="choose-batch">Choose a Batch</label>
        <div class="form-input-wide">



        <select class='form-dropdown' id='choose-batch'>
          <?php while($row = $db->fetchObject()): ?>
// show both name and number in drop-down
        <option value="<?= $row->BatchNum ?>" ><?= $row->BatchNum." - ".$row->BatchName ?></option>
          <?php endwhile; ?>
          </select>



       </div>
    </li>
    <li class="form-line" data-type="control_textbox">
        <label class="form-label form-label-top form-label-auto" for="BatchName">Batch Name</label>
        <div class="form-input-wide">

          <input type='text' class='form-control' size='20' id="BatchName" name="BatchName" value="<?php echo $row['BatchName'];?>" />

      </div>
    </li>
    <li class="form-line" data-type="control_textbox">
        <label class="form-label form-label-top form-label-auto" for="SourceProduct">Source Product</label>
        <div class="form-input-wide">
          <input type="text" class="form-control" size="20" id="SourceProduct" name="SourceProduct" value="" required>
        </div>
    </li>
    <li class="form-line" data-type="control_textbox">
        <label class="form-label form-label-top form-label-auto" for="SourceIngredient">Source Ingredient</label>
        <div class="form-input-wide">
          <input type="text" class="form-control" size="20" id="SourceIngredient" name="SourceIngredient" value="" required>
        </div>
    </li>
  </ul>
    <ul class="form-section page-section" >
    <li class="form-line" data-type="control_text" >
      <div class="buttonrow">
        <div class="col-1 form-buttons-wrapper">
            <button type="submit" class="form-submit-button" id="submit_form" name="submit" value="Submit">Submit</button>
        </div>
      <div class="col-1 form-buttons-wrapper">
         <a href="CDChome.php" >
           <button type="button" class="form-submit-button" >
             Home
           </button>
         </a>
       </div>
       <div class="col-1 form-buttons-wrapper">
          <a href="includes/logout.php">
            <button type="button" class="form-submit-button" >
              Logout
            </button>
          </a>
        </div>
      </div>
    </li>
  </ul>
</div>
</form>        

  <script>
    // monitor for changes in drop-down
    $(document).ready(function() {  // technically not necessary if script is at the bottom, but I do it out of habit
      $('#choose-batch').on('change', function() {
        retrieveItem( $(this).val() );
      })
    });
    // send batchNum via ajax
    function retrieveItem(BatchNumber) {
      $.post(
        "CDC_Ajax_PDO.php",               // where to send data
        {BatchNum: BatchNumber},  // parameters to send {varname: value}
        function(result) {        // what to do with results
          if(result.status=='success') {
            populateForm(result.data);
          } else {
            alert ('oops, failed');
          }
        }
      );
    }
    // put results into page
    function populateForm(data) {
      $('#BatchName').val(data.BatchName);
      $('#SourceProduct').val(data.SourceProduct);
      $('#SourceIngredient').val(data.SourceIngredient);
    }
  </script>



</body>
</html>

1 Ответ

1 голос
/ 19 октября 2019

Поскольку вы только начинаете, вот несколько концепций, которые сделают путешествие намного приятнее

  • Это необходимо , чтобы вы узнали, какиспользуйте подготовленные операторы вместо того, чтобы помещать переменные в запрос. Даже если intval() в этом случае должно быть безопасным, вы просто не захотите писать запросы таким образом. IMHO PDO намного лучше учиться и работать, чем mysqli.

  • Использование библиотеки JavaScript, такой как JQuery, сделает ajax и клиентские сценарии намного проще и совместим с разными браузерами.

  • При выполнении ajax старайтесь всегда передавать данные в виде строк в кодировке json. Ваш ajax-ответ - это данные, а не представление.

  • для сценариев, не относящихся к mvc, постарайтесь, чтобы все php были в верхней части (инициализация, работа с пользовательским вводом / перенаправлением и бизнес-логикой),и только потом html (с php только для зацикливания и подстановки данных) внизу.

С учетом вышесказанного ваш скрипт CDC3.php будет выглядеть примерно так (лучше всего перенести объект соединения с БД в свой собственный файл, чтобы вы не повторяли себя)

<?php

// connection example, see http://https://phpdelusions.net/pdo
$host = '127.0.0.1';
$db   = 'test';
$user = 'root';
$pass = '';
$charset = 'utf8mb4';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES   => false,
];
try {
     $pdo = new PDO($dsn, $user, $pass, $options);
} catch (\PDOException $e) {
     throw new \PDOException($e->getMessage(), (int)$e->getCode());
}


$stmt = $pdo->prepare('SELECT BatchNum, BatchName, SourceProduct, SourceIngredient FROM Batches WHERE BatchNum = ?');
$stmt->execute($_POST['batchNum']);

// initialize $data and $status, in case there are no results
$data = array();
$status = 'failed';
if ($row = $stmt->fetch(PDO::FETCH_ASSOC) ) {
    $data = $row;
    $status = 'success';
}

header('Content-Type: application/json');
echo json_encode([
    'status' => $status,
    'data' => $data
    ]);

Возвращает данные, которые ваш клиентский javascript может получить как данные, которыми он может немедленно манипулировать или вставлять в элементы dom.

Ваше представление будет выглядеть примерно так (я неубедитесь, что вы делаете в своем примере, поэтому здесь будет выбран пакет для показа): 

<?php

// connection example, see http://https://phpdelusions.net/pdo
$host = '127.0.0.1';
$db   = 'test';
$user = 'root';
$pass = '';
$charset = 'utf8mb4';

$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES   => false,
];
try {
     $pdo = new PDO($dsn, $user, $pass, $options);
} catch (\PDOException $e) {
     throw new \PDOException($e->getMessage(), (int)$e->getCode());
}

$stmt = $pdo->prepare("select BatchNum, BatchName from Batches");
$stmt->execute();

// if you were using regular submits back to the same page, you would deal with them here.

?>
<html>
  <head>
    <title>jQuery CDN</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <h1>CDC Wash Run Entry</h1>
    <div>Batch will be loaded by ajax and displayed in the form below:</div>
    <label for="choose-batch">Choose a Batch</label>
    <select id='choose-batch'>
    <?php foreach($stmt as $row): ?>
        <option value="<?= $row['BatchNum'] ?>" ><?= $row['BatchName'] ?></option>
    <?php endforeach; ?>

    </select>

    <form id="batch-form">
      <div>
        <label for='batch-name'>Batch Name</label>
        <input id="batch-name" name='BatchName' value="">
      </div>
      <div>
        <label for='SourceProduct'>Source Product</label>
        <input id="source-product" name='SourceProduct' value="">
      </div>
      <div>
        <label for='SourceIngredient'>Source Ingredient</label>
        <input id="source-ingredient" name='SourceIngredient' value="">
      </div>
    </form>



  <script>

    // monitor for changes in drop-down
    $(document).ready(function() {  // technically not necessary if script is at the bottom, but I do it out of habit

      $('#choose-batch').on('change', function() {
        retrieveIngredient( $(this).val() );
      })
    });

    // send batchNum via ajax
    function retrieveIngredient(batchNumber) {

      $.post(
        "CDC3.php",               // where to send data
        {batchNum: batchNumber},  // parameters to send {varname: value}
        function(result) {        // what to do with results
          if(result.message=='success') {
            populateForm(result.data);
          } else {
            alert ('oops, failed');
          }
        }
      );
    }

    // put results into page
    function populateForm(data) {
      $('#batch-name').val(data.BatchName);
      $('#source-product').val(data.SourceProduct);
      $('#source-ingredient').val(data.SourceIngredient);
    }
  </script>
  </body>
</html>

Примечание: это предназначено для демонстрации концепций, а не для примера вырезания и вставки. Это у меня в голове, и могут быть вопиющие ошибки ...

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...