我正在嘗試學習 PHP 來解決評估挑戰，我必須在其中構建產品串列和添加產品頁面。在這里和那里閱讀，觀看一些教程，到目前為止我能夠開發此代碼：
索引.php：
<?php include("db.php"); ?>
<?php include("includes/header.php"); ?>
<div class="container p-4">
<div class="row">
<div class="col-md-4">
<div class="card card-body">
<!--INPUT FORM
it will contains the form to add new product to the database:
Fields: SKU / NAME / PRICE / PROD_TYPE / DVD / BOOK / FUR_H / FUR_W / FUR_L -->
<form action="index.php" method="POST">
<div class="form-group">
<input type="text" name="sku" class="form-control" placeholder="Enter SKU Code">
<hr/>
<input type="text" name="name" class="form-control" placeholder="Enter Product Name">
<hr/>
<input type="text" name="price" class="form-control" placeholder="Enter Price">
<hr/>
<label>Product Type</label>
<select id="prod_type" name="prod_type" class="form-control" >
<option value="">Select Product Type</option>
<option value="DVD">DVD</option>
<option value="BOOK">BOOK</option>
<option value="FUR">FURNITURE</option>
</select>
<!-- <hr/> -->
<!--if the select(prod_type) option = DVD, then show the following fields:
Fields: DVD_SIZE
if the select(prod_type) option = BOOK, then show the following fields:
Fields: BOOK_WEIGHT
if the select(prod_type) option = FUR, then show the following fields:
Fields: FUR_H / FUR_W / FUR_L -->
<hr/>
<?php if(isset($_POST['prod_type']) && $_POST['prod_type'] == 'DVD'){ ?>
<input type="text" name="dvd_size" class="form-control" placeholder="Enter DVD Size">
<?php } else if(isset($_POST['prod_type']) && $_POST['prod_type'] == 'BOOK'){ ?>
<input type="text" name="book_weight" class="form-control" placeholder="Enter Book Weight">
<?php } else if(isset($_POST['prod_type']) && $_POST['prod_type'] == 'FUR'){ ?>
<hr/>
<input type="text" name="fur_h" class="form-control" placeholder="Enter Furniture Height">
<hr/>
<input type="text" name="fur_w" class="form-control" placeholder="Enter Furniture Width">
<hr/>
<input type="text" name="fur_l" class="form-control" placeholder="Enter Furniture Length">
<?php } ?>
<!-- <hr/> -->
</div>
<hr/>
<input type="submit" name="add_product" class="btn btn-success w-100" value="Add Product">
</form>
</div>
</div>
<div class="col-md-8">
</div>
</div>
</div>
<?php include("includes/footer.php"); ?>
事實是，應根據用戶在 #prod_type 上的選擇來呈現 DVD 尺寸、書本重量和家具尺寸（H、W 和 L）的輸入。目前，這些輸入在用戶選擇一個選擇選項并點擊添加產品按鈕后顯示（與我按下的 POST 方法相關，是我得到的最接近的）
uj5u.com熱心網友回復：
PHP 完全在服務器上運行。如果您希望在您的用戶與您的網頁互動時（不執行到服務器的往返）在瀏覽器中發生某些事情，那么 Javascript 就是您的朋友。
在這種情況下，我會給每個輸入一個data屬性來說明它們與哪種產品型別相關。然后您可以撰寫一個 Javascript 函式來處理對prod_type欄位的更改并顯示/隱藏正確的欄位。
例如：
function toggleFields() {
var productType = document.getElementById('prod_type').value;
var fields = document.querySelectorAll('[data-if-prod-type]');
fields.forEach(function (field) {
if (field.dataset.ifProdType === productType) {
field.style.display = '';
} else {
field.style.display = 'none';
}
});
}
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('prod_type').addEventListener('change', toggleFields);
// Run the toggle function when the DOM is ready loading,
// so that fields that are not relevant to #prod_type's
// initial value are hidden.
toggleFields();
});<select id="prod_type" name="prod_type" class="form-control">
<option value="">Select Product Type</option>
<option value="DVD">DVD</option>
<option value="BOOK">BOOK</option>
<option value="FUR">FURNITURE</option>
</select>
<input type="text" name="dvd_size" class="form-control" placeholder="Enter DVD Size" data-if-prod-type="DVD">
<input type="text" name="book_weight" class="form-control" placeholder="Enter Book Weight" data-if-prod-type="BOOK">
<div data-if-prod-type="FUR">
<hr/>
<input type="text" name="fur_h" class="form-control" placeholder="Enter Furniture Height">
<hr/>
<input type="text" name="fur_w" class="form-control" placeholder="Enter Furniture Width">
<hr/>
<input type="text" name="fur_l" class="form-control" placeholder="Enter Furniture Length">
</div>uj5u.com熱心網友回復：
你可以試試 AJAX。它易于使用，您也會喜歡它的功能。使用 AJAX 可以輕松完成您想要的頁面內容。如果您對 Javascript 和 jQuery 稍有了解，您一定會喜歡上它。W3School可以為你詳細講解——AJAX介紹
在您的代碼中使用 AJAX 的示例，
索引.php：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Index Page</title>
</head>
<body>
<?php
if(isset($_POST['prod_type'])){
print_r($_POST); die;
}
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
<select name="prod_type" onchange="getProdOptions(this.value)">
<option value="">Select Product Type</option>
<option value="DVD">DVD</option>
<option value="BOOK">BOOK</option>
<option value="FUR">FURNITURE</option>
</select>
<div id="option_area"></div>
<input type="submit" name="add">
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> // CDN link of jQuery, you can get from - https://cdnjs.com/libraries/jquery
<script type="text/javascript">
function getProdOptions(val) {
val = val.trim();
if(val !== '') {
$.ajax({
url: "/ajax_request.php", // url is the destination to receive the request
data: {
prod_type: val
}, // data is the key and the value you are sending
type: "POST", // method is GET, POST, etc..
success: function( response ) {
response = JSON.parse( response );
if( response.status ){
document.getElementById( 'option_area' ).innerHTML = response.data; // Pure JS Syntax
}else{
alert('No data for the selected prod type.');
}
}
});
}else{
$("#option_area").html(""); // jQuery Syntax
}
}
</script>
ajax_request.php:
<?php
if( isset( $_POST['prod_type'] ) && !empty( $_POST['prod_type'] ) ) {
$response = ['status' => true];
// any condition to check and the condition not met thenn send the status as false
$html = '<input type="text" name="dvd_size" placeholder="Enter DVD Size">';
$html .= '<input type="text" name="book_weight" placeholder="Enter Book Weight">'; // `.=` will concatenate the strings
$response['data'] = $html;
echo json_encode( $response );
}
?>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/373245.html