我正在用 php 創建一個選單串列。我希望用戶更改串列中的名稱和折扣變數。所以這是串列的影像： list with items，所以對于每個串列項和子項，都有一個按鈕，它必須打開一個彈出視窗并將屬于該串列項的變數（如名稱和折扣變數）傳遞到表單輸入欄位中，所以用戶可以從舊值調整它。我使用 javascript 打開和關閉表單，并希望它也將 php 變數（從資料庫中獲取）放入該表單中。所以這是我的一段代碼：
javascript:
<script>
function updatepopup(**$name**, $discount){
document.getElementById("updatedata").style.display = "block";
document.getElementById("fnaam").value = **$name**";
document.getElementById("fkort").value = $discount;
}
function closeform(){
document.getElementById("updatedata").style.display = "none";
}
</script>
PHP:
<ol class='tree'> ";
if ($currLevel == $prevLevel) echo " ";
echo '
<li>
<label for="subfolder2">'.$category['name'].'</label>
<label> '.$category['discount'].'%</label>
<input type="checkbox" name="subfolder2">
<form id="updatedata" method="POST">
<label for="fnaam">Naam: </label>
<input type="text" id="fnaam" name="fnaam" value="'.$category['name'].'">
<label for="fkort">Korting</label>
<input type="number" id="fkort" name="fkort" value="'.$category['discount'].'">
<button id="closebutton" onclick="closeform()">X</button>
<button type= "submit"> </button>
</form>
<button onclick="updatepopup()"><i class="fa-solid fa-pen-to-square"></i></button>
';
if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
$currLevel ;
createTreeView ($array, $categoryId, $currLevel, $prevLevel);
$currLevel--;
}
}
if ($currLevel == $prevLevel) echo "<li><button> </button></li></li>
</ol>";
}
?>
所以我已經閱讀了許多將字串傳遞給 javascript 函式的解決方案，但沒有一個會有所幫助。我只能用數字完成類似的事情，但我還想將一個字串發送到該輸入欄位。所以這就是我想要得到的：我想要的
uj5u.com熱心網友回復：
您正在嘗試將 PHP 與 JavaScript 混合使用，應盡可能避免這種情況。還有其他方法可以將 PHP 值傳遞給 JavaScript，比如將它們設定為 HTML 屬性。
我的方法是<form>為每個串列項創建一個元素，并$category在隱藏<input />元素中輸出您的 PHP 值。
<!-- Start list -->
<ol class='tree'>
<li>
<form class="js-update-data">
<label for="subfolder2"><?= $category['name']; ?></label>
<span><?= $category['discount']; ?>%</span>
<input type="checkbox" name="subfolder2">
<input type="hidden" name="name" value="<?= $category["name"]; ?>"/>
<input type="hidden" name="discount" value="<?= $category["discount"]; ?>" />
<button type="submit"><i class="fa-solid fa-pen-to-square"></i></button>
</form>
<!-- Nested list -->
<ol class='tree'>
<li>
<form class="js-update-data">
<!-- Structure for every list item.. -->
</form>
</li>
</ol>
</li>
</ol>
<!-- End list -->
<!-- Form to show/hide & update -->
<form id="updatedata" method="POST">
<label for="fnaam">Naam: </label>
<input type="text" id="fnaam" name="fnaam" value="">
<label for="fkort">Korting</label>
<input type="number" id="fkort" name="fkort" value="">
<button type="button" id="closebutton">X</button>
<button type="submit"> </button>
</form>
然后監聽submit這些表單上的事件。提交表單時，確保preventDefault()呼叫事件上的方法。這將防止重新加載頁面并允許您撰寫自己的行為。
從提交的表單中提取值并將它們傳遞給您的updatepopup函式。
const forms = document.querySelectorAll('.js-update-data');
for (const form of forms) {
form.addEventListener('submit', event => {
event.preventDefault();
const formData = new FormData(event.target);
const name = formData.get('name');
const discount = formData.get('discount');
updatepopup(name, discount);
});
}
const closeButton = document.getElementById("closebutton");
closeButton.addEventListener('click', closeform);
function updatepopup(name, discount){
document.getElementById("updatedata").display = "block";
document.getElementById("fnaam").value = name;
document.getElementById("fkort").value = discount;
}
function closeform(){
document.getElementById("updatedata").style.display = "none";
}
可運行的例子
此示例使用預填充值運行。您唯一的作業就是在正確的位置設定值。
const forms = document.querySelectorAll('.js-update-data');
for (const form of forms) {
form.addEventListener('submit', event => {
event.preventDefault();
const formData = new FormData(event.target);
const name = formData.get('name');
const discount = formData.get('discount');
updatepopup(name, discount);
});
}
const closeButton = document.getElementById("closebutton");
closeButton.addEventListener('click', closeform);
function updatepopup(name, discount){
document.getElementById("updatedata").hidden = false;
document.getElementById("fnaam").value = name;
document.getElementById("fkort").value = discount;
}
function closeform(){
document.getElementById("updatedata").hidden = true;
}form[hidden] {
display: none;
}<!-- Start list -->
<ol class='tree'>
<li>
<form class="js-update-data">
<label for="subfolder2">Test 1</label>
<span>25%</span>
<input type="checkbox" name="subfolder2">
<input type="hidden" name="name" value="Test 1"/>
<input type="hidden" name="discount" value="25" />
<button type="submit"><i class="fa-solid fa-pen-to-square"></i>edit</button>
</form>
<!-- Nested list -->
<ol class='tree'>
<li>
<form class="js-update-data">
<label for="subfolder2">Test 2</label>
<span>13%</span>
<input type="checkbox" name="subfolder2">
<input type="hidden" name="name" value="Test 2"/>
<input type="hidden" name="discount" value="13" />
<button type="submit"><i class="fa-solid fa-pen-to-square">edit</i></button>
</form>
</li>
</ol>
</li>
<li>
<form class="js-update-data">
<label for="subfolder2">Test 4</label>
<span>80%</span>
<input type="checkbox" name="subfolder2">
<input type="hidden" name="name" value="Test 4"/>
<input type="hidden" name="discount" value="80" />
<button type="submit"><i class="fa-solid fa-pen-to-square"></i>edit</button>
</form>
<!-- Nested list -->
<ol class='tree'>
<li>
<form class="js-update-data">
<label for="subfolder2">Test 3</label>
<span>50%</span>
<input type="checkbox" name="subfolder2">
<input type="hidden" name="name" value="Test 3"/>
<input type="hidden" name="discount" value="50" />
<button type="submit"><i class="fa-solid fa-pen-to-square"></i>edit</button>
</form>
</li>
</ol>
</li>
</ol>
<!-- End list -->
<!-- Form to show/hide & update -->
<form id="updatedata" method="POST" hidden>
<label for="fnaam">Naam: </label>
<input type="text" id="fnaam" name="fnaam" value="">
<label for="fkort">Korting</label>
<input type="number" id="fkort" name="fkort" value="">
<button type="button" id="closebutton">X</button>
<button type="submit"> </button>
</form>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/535686.html
上一篇：如何在引導程式中使用資料目標？