[英]Submit and Generate Dynamic PHP Form
我有一個帶有文本框和下拉菜單的表單。 下拉菜單中的一個依賴於另一個菜單的值,例如InventoryUsage
依賴於InventoryID
的值。
到目前為止,盡管我發現一個JavaScript函數可以獲取InventoryID
輸入的值,但由於我不了解JavaScript,所以我已經使用PHP完成了整個站點,但是由於PHP是服務器端,因此無法在PHP中使用該值。
我需要做的是根據第一個下拉菜單更改第二個下拉菜單選項。 然后像往常一樣提交數據。
編輯:
我使用了ob_start並包含了tpl頁面,並將所有變量發送到了先前從數據庫中提取的變量。 所有變量都具有相同的索引,這意味着InventoryID ['0'] = ID3456對應於InventoryUsage ['0'] = 60。 因此,當InventoryID為ID3456時,我想顯示位於InventoryUsage ['0']的數字。 我希望這為問題增加了一些背景。
該索引由我的代碼片段中的php變量$ i確定。 $ i將被更改以匹配InventoryID字段的索引。 假設InventoryUsage的值為20,那么我要顯示1到20。
下面的代碼片段:
<label>TypeOfSurgery</label> <input type="text" name="TypeOfSurgery" size="35" value="" />
<label>CauseOfSurgery</label> <input type="text" name="CauseOfSurgery" size="35" value="" />
<label>AnaesthesiaUsage</label> <input type="text" name="AnaesthesiaUsage" size="35" value="" />
<label>SurgeryOutcome </label> <input type="text" name="SurgeryOutcome" size="35" value="" />
<label>RecoveryTime</label> <input type="text" name="RecoveryTime" size="35" value="" />
<label>Stages </label> <input type="text" name="Stages" size="35" value="" />
<label>EmployeeName </label> <p>
<select name="EmployeeName">
<option value=""></option>
<?php
for($i=0;!empty($EmployeeName[$i]);$i++)
echo '<option value="">'.$EmployeeName[$i].'</option>';
?>
</select><p>
<label>Cost</label> <input type="text" name="Cost" size="35" value="" />
<label>InventoryID</label> <p>
<select name="InventoryID">
<option value=""></option>
<?php
for($i=0;!empty($InventoryID[$i]);$i++)
echo '<option value="">'.$InventoryID[$i].'</option>';
?>
</select><p>
<label>InventoryUsage </label> <p>
<select name="InventoryUsage">
<option value=""></option>
<script type="text/javascript">
var model= document.getElementById('InventoryUsage');
</script>
<?php
//if inventory in
for($i=0;!empty($InventoryUsage[$i]);$i++)
echo '<option value="">'.$InventoryUsage[$i].'</option>';
?>
</select><p>
為了填充InventoryUsage
下拉列表,您需要使用JavaScript。 您可以將onChange
事件用於下拉InventoryID
然后通過Ajax獲取相應的值。
$('#InventoryID').change(function () {
var value =$(this).val(); // selected InventoryID option
//get InventoryUsage values
$.ajax({
method: "POST",
url: "myfile.php",
data: { data: value },
success: function(data){
// Populate new dropdown $("#InventoryUsage")
// this is an example without knowing what is the returned data
var Newoptions = [];
for (var i = 0; i < data.length; i++) {
Newoptions.push('<option value="',
data[i].someValue, '">',
data[i].someName, '</option>');
}
$("#InventoryUsage").html(Newoptions .join(''));
}
});
});
});
然后在您的PHP文件中,您需要處理$_POST['data']
,然后查詢數據庫並返回將在上方填充的下拉選項(Arrays)。
編輯:
如果您確定此索引與Inventory_Usage相匹配並且先前已填充InventoryUsage下拉列表,則可以嘗試使用更改和裝入事件中InventoryID下拉列表的索引來選擇InventoryUsage選項...
嘗試添加此功能到您選擇:
<select name="InventoryID" onChange="set_inventory_usage()"></select>
然后將此腳本添加到頁面的HEAD部分。
<head>
<script type="text/javascript">
function set_inventory_usage(){
// Change to getElementById if it is the ID not the name
var Inventory_ID = document.getElementsByName('InventoryID')[0];
var Inventory_Usage = document.getElementsByName('InventoryUsage')[0];
// returns the index of the selected option in the InventoryID dropdown
var InventorySelected = Inventory_ID.selectedIndex ;
// Sets the Usage dropdown to the same index as the Inventory selected option
Inventory_Usage.selectedIndex = InventorySelected ;
}
window.onload = set_inventory_usage ;
</script>
</head>
選項1:如果沒有JavaScript,最好的選擇是將onchange
添加到第一個dropdwon列表中,並在選擇值后提交表單。 由於表單不完整,並且僅傳遞了下拉列表值和元素,因此可以設置條件以查詢數據庫,基於第一個下拉列表獲取值,然后使用這些選項重新加載表單。 如果正確完成此解決方案,則沒有任何問題,但老實說,我願意使用Ajax進行此類操作,因此,下面的選項2。
選項2: 學習一些JavaScript並使用Ajax (在系統中使用其他人的腳本時要小心)
編輯:也許不是從頭開始擰Ajax代碼,而是使用jQuery,其中大多數事情已經為您完成。 如果您打算進行Web開發,那么學習jQuery非常有用。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.